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 –
-
-
- Get all selected values means DepartmentId
- Next is to get corresponding DepartmentName for DepartmentId
- Add all DepartmentName into a String
- 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
