Show message (Invoke FacesMessage) using JavaScript in ADF Faces

Hello all

This post is about use of JavaScript in ADF Faces to show a simple message notification , it may be error/warning/information/critical error message

so this is simple, as we have to just invoke default FacesMessage using JavaScript

So for this i have used an af:inputText on page and use case is that this field should only take characters

How to validate characters (alphabet) only  using javascript ?

So for this i have taken a simple regular expression that check that entered value is alphabetic or not
see this JavaScript function that is added to page, here it1 is the id of inputText for that FacesMessage is invoked, i am using Jspx page so i use actual id of component, if you try this in region,dynamic region or inside pageTemplate then check and change the id of component .
It will be something like r1:0:it1 or pt1:0:it1, because that is nested page structure.
you can get this id using componentBinding.getClientId();

 <af:resource type="javascript">
              function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();

                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problem
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }
            </af:resource>

Added a clientListener to inputText that executes this JavaScript function on keyPress event

Run page and see how it works-
Here you see that 2 is not a character so it showing error message as FacesMessage is defined for TYPE_ERROR

So it's done but now problem is - when user input a wrong value a error message is displayed and after this validation alert if user keeps entering wrong values then every time a new FacesMessage is created and added to page, It appears on page like this (duplicate messages - really weird)

To remove additional messages , i have added one more line in JavaScript to clear previous validation message

JavaScript to clear validation message-

 // Clear all validation message 
              AdfPage.PAGE.clearAllMessages();

now JavaScript function is like this

function validateStringOnKeyPress(event) {
                  //Regular Expression to validate String
                  var letters = /^[A-Za-z]+$/;
                  //Get value of input text
                  var charCode = event.getSource().getSubmittedValue();
                  // Clear all validation message 
                  AdfPage.PAGE.clearAllMessages();
                  if (charCode != '') {
                      if (charCode.match(letters)) {
                          // IF matches then no problme
                      }
                      else {
                          //Invoke FacesMessage
                          AdfPage.PAGE.addMessage('it1', new AdfFacesMessage(AdfFacesMessage.TYPE_ERROR, "Invalid Value", "Enter Characters Only"));
                          AdfPage.PAGE.showMessages('it1');
                          event.cancel();
                      }
                  }
              }

and yes you can change type of message, use TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change message type

see different output-
Warning Message (TYPE_WARNING)-

Informational Message (TYPE_INFO)-

Fatal Error Message (TYPE_FATAL)-

Thanks Happy Learning :)

Using HashMap in EL expression to set component properties in Oracle ADF

Basic requirement while using EL on pages in ADF, we use bean variables, binding attributes, iterators in expression to check conditions , to set properties for components as Enable-Disable, Visible, inline style etc.
in the same way we can use collections (Array, HashMap) in expression, i know it is pretty simple but have seen many thread in OTN asking how to use HashMap in expression

So here i am taking a very simple example



I have 5 input text on page and i have to enable-disable some fields based on it's id value, there is two buttons on page

as you can see on click of first button , input field 1,3 and 5 should be disabled and on click of second button af:inputText 2 and 4 should be disabled
so for this purpose i have used a HashMap in managed bean

    private HashMap fieldVal = new HashMap();

    public void setFieldVal(HashMap fieldVal) {
        this.fieldVal = fieldVal;
    }

    public HashMap getFieldVal() {
        return fieldVal;
    }

values in HashMap are populated using id value of inputTexts on page as key, this id will be passed as parameter in HashMap in expression
see how expression used in disabled property of inputText-

in same way expression for all inputText is set

<af:panelFormLayout id="pfl1" partialTriggers="b1 b2">
                    <af:inputText label="Label 1" id="it1" disabled="#{EnableDisableBean.fieldVal['it1']}"/>
                    <af:inputText label="Label 2" id="it2"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it2']}"/>
                    <af:inputText label="Label 3" id="it3"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it3']}"/>
                    <af:inputText label="Label 4" id="it4"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it4']}"/>
                    <af:inputText label="Label 5" id="it5" autoSubmit="true"
                                  disabled="#{requestScope.EnableDisableBean.fieldVal['it5']}"/>
                </af:panelFormLayout>

now see code on buttons, simply setting values against key

    /**Method to disable inputText (1,3,5) on basis of id value
     * @param actionEvent
     */
    public void disable135Action(ActionEvent actionEvent) {
        fieldVal.put("it1", true);
        fieldVal.put("it2", false);
        fieldVal.put("it3", true);
        fieldVal.put("it4", false);
        fieldVal.put("it5", true);

    }

    /**Method to disable inputText (2,4) on basis of id value
     * @param actionEvent
     */
    public void disable24Action(ActionEvent actionEvent) {
        fieldVal.put("it1", false);
        fieldVal.put("it2", true);
        fieldVal.put("it3", false);
        fieldVal.put("it4", true);
        fieldVal.put("it5", false);
    }

Run Application and see what is on page
On Click of First Button

On Click of Second Button

Thanks
Happy learning :)