Monday, 15 September 2014

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