Show message (Invoke FacesMessage) using JavaScript in ADF Faces

Sharing is Caring

Hello all
This post is about the 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 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 checks that entered value is alphabetic or not
see this JavaScript function that is added to the page, here it1 is the id of inputText for that FacesMessage is invoked, I am using Jspx page so I use the actual id of component, if you try this in a region, dynamic region or inside pageTemplate then check and change the id of the 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 the 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

Invoke FacesMessage using JavaScript

So it’s done but now problem is – when the user input a wrong value an error message is displayed and after this validation alert if the user keeps entering wrong values then every time a new FacesMessage is created and added to the page, It appears on the 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 the type of message, use TYPE_ERROR, TYPE_INFO, TYPE_WARNING, TYPE_FATAL to change the message type

see different output-
Warning Message (TYPE_WARNING)-

Informational Message (TYPE_INFO)-

Fatal Error Message (TYPE_FATAL)-

Cheers 🙂 Happy Learning

Related Posts

I’m an Oracle ACE, Blogger, Reviewer,
Technical Lead working on Oracle ADF

0 thoughts on “Show message (Invoke FacesMessage) using JavaScript in ADF Faces”

Leave a Reply

Your email address will not be published. Required fields are marked *