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

Sharing is Caring

Happy Engineer’s Day 🙂
This post is about overriding default text for select all feature in af:selectManyChoice
af:selectManyChoice supports multiple selections in ADF Faces and framework provides a default feature to select all values of the 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 the 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 the valueChange event of selectManyChoice, so created a valueChangeListener in the 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 a 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 the 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

Cheers 🙂 Happy Learning

Related Posts

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

Leave a Reply

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