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

Ashish Awasthi

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

http://www.awasthiashish.com

Ashish Awasthi's Blog

Posts

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

Related Posts

Leave a Reply Cancel reply