Showing all values instead of 'All' text in selectManyChoice using JavaScript -Oracle ADF

Happy Engineer's Day :)
This post is about overriding default text for select all feature in af:selectManyChoice
af:selectManyChoice supports multiple selection in ADF Faces and framework provides a default feature to select all values of list but after selecting all value it doesn't show values ,only show a String 'All'.
Like this-
but sometimes it is not clear that what are the values by just seeing this 'All' text or it is a requirement to show all values (if there is not much data) instead of this default text



So in this post i am going to override this default text using JavaScript and this is a quick overview that how we can play with JavaScript and try it in ADF Faces
see previous posts on JavaScript in Oracle ADF-

Show message (Invoke FacesMessage) using JavaScript in ADF Faces
Launching browser print dialog using simple javascript function in ADF
Using JQuery in Oracle ADF

So in this implementation i am using Departments table (HR Schema -Oracle) and Jdeveloper 12C (12.1.3)

• Prepare model using Departments table and drop viewObject on page as af:selectManyChoice





• Now  see when we select one -two values , it appears on component but in case of all only that 'All' string appears





• Here i am changing this text on valueChange event of selectManyChoice , so created a valueChangeListener in managed bean. 

• See what i am going to do in this listener is -
1. Get all selected values means DepartmentId
2. Next is to get corresponding DepartmentName for DepartmentId 
3. Add all DepartmentName into an String
4. Call JavaScript method to set this String as value of selectManyChoice instead of 'All'


• See code written in valueChangeListener , i have used enough comments to understand each line



    /**ValueChangeListener for SelectManyChoice (Executes Javascript to replace 'All' text)
     * @param vce
     */
    public void selectManyVCE(ValueChangeEvent vce) {
        //String to store all selected Departments Name
        String displayVal = "";
        //Get BindingContainer of current page
        BindingContext bctx = BindingContext.getCurrent();
        BindingContainer bindings = bctx.getCurrentBindingsEntry();
        //Get Iterator of SelectManyChoice
        DCIteratorBinding iter = (DCIteratorBinding) bindings.get("Departments1Iterator");

        if (vce.getNewValue() != null) {
            //Get all selected values in an Object array
            Object[] selectedVals = (Object[]) vce.getNewValue();
            //Iterate over array to get all selected DepartmentId
            for (int i = 0; i < selectedVals.length; i++) {
                Integer val = (Integer) selectedVals[i];
                //Create Key using DepartmentId to use furhter
                Key key = new Key(new Object[] { val });
                //Get ViewObject row using Key vlaue
                Row row = iter.getViewObject().getRow(key);
                // Get DepartmentName from row and add it to String
                if (displayVal != "") {
                    displayVal = displayVal.concat(", ").concat(row.getAttribute("DepartmentName").toString());
                } else {
                    displayVal = displayVal.concat(row.getAttribute("DepartmentName").toString());
                }
            }
            //Write JavaScript code to change text of selectManyChoice as a StingBuilder Object
            StringBuilder jsString = new StringBuilder();
            //First Step-get clientID of component
            jsString.append("var elementId = '" + vce.getComponent().getClientId());
            //Second- add ::content to access it's value
            jsString.append("::content';");
            //Third- Check that current value is 'All' or not
            jsString.append("\n if (document.getElementById(elementId).value == 'All') {");
            //Forth- if yes then assign Department Name's string as value of selectManyChoice
            jsString.append("\n document.getElementById(elementId).value ='" + displayVal + "' \n};");
            System.out.println("JS File-" + jsString);
            //Call this JavaScript code using this Helper method
            writeJavaScriptToClient(jsString.toString());

        }
    }


Method to call JavaScript from managed bean-



    /**Helper Method to call Javascript
     * @param javascriptCode
     */
    public static void writeJavaScriptToClient(String javascriptCode) {
        FacesContext facesCtx = FacesContext.getCurrentInstance();
        ExtendedRenderKitService service = Service.getRenderKitService(facesCtx, ExtendedRenderKitService.class);
        service.addScript(facesCtx, javascriptCode);
    }


Import packages-



import javax.faces.context.FacesContext;
import javax.faces.event.ValueChangeEvent;

import oracle.adf.model.BindingContext;
import oracle.adf.model.binding.DCIteratorBinding;

import oracle.binding.BindingContainer;

import oracle.jbo.Key;
import oracle.jbo.Row;

import org.apache.myfaces.trinidad.render.ExtendedRenderKitService;
import org.apache.myfaces.trinidad.util.Service;



• Run application and check, on selecting all values it shows -





• but this will happen only on value change event of selectManyChoice , you can call this JavaScript any time as per your requirement like on page load

Thanks , Happy Learning :-)

Dynamic (parameterize) model level validation using message token -Oracle ADF

Hello all
This post falls under ADF Basics category (about a little trick in model layer) but about a common development requirement
How can we create dynamic ADF BC validation ? means it takes a parameter at run time and append it to validation message

Read previous post on model level validation-
Conditional Execution of Model (EO) level Validation- Oracle ADF
ViewObject Validation rules for transient attributes (Model level validation in ADF)

In this post I am using Departments table of oracle HR Schema

• First step is same , prepare model (EO,VO and AM) using Departments table






• Creating a business rule that DepartmentName can not be duplicate, for this created a alternate key in EntityObject 






• Nnow creating unique key business rule for this alternate key and message that appears on validation failure (this is how we apply EO level validations)









• Run AM and check in BC4J tester, create a new row and on entering duplicate DepartmentName this validation message appears -"Duplicate Department Name"





• now my requirement is this message should be like - Duplicate Department Name <Administration> , so for this i have to pass parameter in message that shows entered DepartmentName on run-time. ADF provides built in feature to pass tokens in message and on run time it is replace with groovy expression value



 On running see desired output






• to pass more than one parameter just add another token and set groovy for it, see the screens

 Output-

Thanks - Happy Learning :)

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