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 :)

Clear af:table filter programmaticallty , reset table filter in 12C (ADF)

Code to reset or clear af:table filter- here searchTabBind is the binding of af:table

    /**
     * method to reset filter attributes on an af:table
     * @param actionEvent event which triggers the method
     */
    public void resetTableFilterAction(ActionEvent actionEvent) {
        FilterableQueryDescriptor queryDescriptor = (FilterableQueryDescriptor) getSearchTabBind().getFilterModel();
        if (queryDescriptor != null && queryDescriptor.getFilterConjunctionCriterion() != null) {
            ConjunctionCriterion cc = queryDescriptor.getFilterConjunctionCriterion();
            List<Criterion> lc = cc.getCriterionList();
            for (Criterion c : lc) {
                if (c instanceof AttributeCriterion) {
                    AttributeCriterion ac = (AttributeCriterion) c;
                    ac.setValue(null);
                }
            }
            getSearchTabBind().queueEvent(new QueryEvent(getSearchTabBind(), queryDescriptor));
        }
    }

use this method on any button or link to clear af:table filter

Clear Selected Values of shuttle component (Reset shuttle) programmatically-Oracle ADF

Hello All ,
you have heard about shuttle component in ADF,  it works for multiple selection
to use it -refer my previous blog post
Shuttle Component in Oracle ADF (Allow Multiple Selection)

Sometimes we need to reset shuttle (clear selected values) through our code (managed bean)
so in this post I'm going to explain how to do this with simple piece of code

• I have created a simple jspx page and placed Departments (HR Schema) view-object on this page as an af:selectManyShuttle
  
• Created managed bean for a link to clear selected indices of shuttle, see code





    public BindingContainer getBindings() {
        return BindingContext.getCurrent().getCurrentBindingsEntry();
    }

    /**Method to Clear selected value of shuttle (Reset Shuttle)
     * @param actionEvent
     */
    public void resetShuttleAction(ActionEvent actionEvent) {
        BindingContainer bc = this.getBindings();
        JUCtrlListBinding listBindings = (JUCtrlListBinding)bc.get("DepartmentsView1");
        listBindings.clearSelectedIndices();

    }



• Now see how it works- when user click on this link ,it will clear all selected indices of shuttle