Hide values from ADF SelectOneChoice using EL expression on UI

This post is about a specific requirement that is to hide some values from adf based select one choice from UI
Previously I have posted about disabling some items from select one choice and this post uses same steps to hide values from lov

Showing HashMap values in af:table using af:iterator

Previously i have posted about populating af:table programmatically using List Data Structure
Populate af:table programmatically from managead bean using POJO

This post covers same topic but this time requirement is different , we have a HashMap in managed bean and requirement is to show it's values on page in a table view
See Managed Bean code-

    //HashMap and it's accessors
    private HashMap<String, String> valMap = new HashMap<String, String>();

    public void setValMap(HashMap valMap) {
        this.valMap = valMap;
    }

    public HashMap getValMap() {
        return valMap;
    }
    // Object array to store key values of HashMap
    public Object[] getKeySet() {
        return getValMap().keySet().toArray();
    }

Added two inputText on page and a button to add new key and value to HashMap,

<af:panelFormLayout id="pfl1">
                    <af:inputText label="Key" id="it1" contentStyle="width:100px;"
                                  binding="#{viewScope.ShowHashMapAsTable.keyTextBind}"/>
                    <af:inputText label="Value" id="it2" contentStyle="width:100px;"
                                  binding="#{viewScope.ShowHashMapAsTable.valueTextBind}"/>
                    <af:button text="Add" id="b1" actionListener="#{viewScope.ShowHashMapAsTable.addValuesToMap}"/>
                </af:panelFormLayout>

Now code on button that get value of both inputText using component binding and add it to HashMap, at run time this form will be used to add new values to HashMap and table

    //Component Binding of inputText to get values
    private RichInputText keyTextBind;
    private RichInputText valueTextBind;

    public void setKeyTextBind(RichInputText keyTextBind) {
        this.keyTextBind = keyTextBind;
    }

    public RichInputText getKeyTextBind() {
        return keyTextBind;
    }

    public void setValueTextBind(RichInputText valueTextBind) {
        this.valueTextBind = valueTextBind;
    }

    public RichInputText getValueTextBind() {
        return valueTextBind;
    }

    /**Add new value to HashMap
     * @param actionEvent
     */
    public void addValuesToMap(ActionEvent actionEvent) {
        if (keyTextBind.getValue() != null && valueTextBind.getValue() != null) {
            valMap.put(keyTextBind.getValue().toString(), valueTextBind.getValue().toString());

        }
    }

Now Bean Part is done , see how to configure af:table to show HashMap values, table is mapped to array of keySet and an iterator is used inside table that derives value using key attribute -

#{cVal[row]}

<af:table var="row" rowBandingInterval="0" id="t1" value="#{viewScope.ShowHashMapAsTable.keySet}"
                              partialTriggers="::b1">
                        <af:iterator id="i1" value="#{viewScope.ShowHashMapAsTable.valMap}" var="cVal">
                            <af:column sortable="false" headerText="Key" id="c2">
                                <af:outputText value="#{row}" id="ot4" inlineStyle="font-weight:bold;color:darkblue;"/>
                            </af:column>
                            <af:column sortable="false" headerText="Value" id="c1">
                                <af:outputText value="#{cVal[row]}" id="ot3"/>
                            </af:column>
                        </af:iterator>
                    </af:table>

Now all done , run and check the application

 Add New Value (1)

  Add New Value (2)

Sample Application- Download (Jdev 12.1.3)
Cheers :) Happy Learning

Programmatically populate values in ADF Faces multiSelect component (af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox, af:selectManyShuttle)

ADF Faces provides some component to support multiple selection as af:selectManyListbox, af:selectManyCheckbox, af:selectManyChoice, af:selectManyShuttle
In this post we will see how to populate values in these component from managed bean using POJO
You can read my previous post on multiple selection that was about populating multiselect component using ADF BC and binding layer
Using Multiple Selection (selectManyListbox & selectManyCheckbox component) in ADF
Shuttle Component in Oracle ADF (Allow Multiple Selection)

See the step by step implementation-

• Create a Fusion Web Application and a managed bean in viewController
  
  
  


• Create a variable of type java.util.List in managed bean, and generate its accessors



    //List to show records in selectMany components
    List<SelectItem> allValuesList;

    public void setAllValuesList(List<SelectItem> allValuesList) {
        this.allValuesList = allValuesList;
    }

    public List<SelectItem> getAllValuesList() {
        return allValuesList;
    }



• This list contains value of type javax.faces.model.SelectItem; that is supported by af:selectManyCheckbox, af:selectManyChoice, af:selectManyListbox compoent



    //List to show records in selectMany components
    List<SelectItem> allValuesList;

    public void setAllValuesList(List<SelectItem> allValuesList) {
        this.allValuesList = allValuesList;
    }

    public List<SelectItem> getAllValuesList() {
        if (allValuesList == null) {
            allValuesList = new ArrayList<SelectItem>();
            allValuesList.add(new SelectItem(1, "India"));
            allValuesList.add(new SelectItem(2, "Australia"));
            allValuesList.add(new SelectItem(3, "America"));
            allValuesList.add(new SelectItem(4, "United Kingdom"));
        }
        return allValuesList;
    }



• See how to add this list reference to  af:selectManyCheckbox component, just drag n drop component on page





• Set managed bean list reference to selectManyCheckbox component, records stored in this list will be populated in component





• Suppose I have to show some record as selected by default on page load so for this requirement created another List in managed bean and added it to value property of selectManyCheckbox component
  Value property of component refers only selected records but selectItems component refers all records of component



    //List to show selected values in selectMany Component
    List selectedValues;

    public void setSelectedValues(List selectedValues) {
        this.selectedValues = selectedValues;
    }

    public List getSelectedValues() {
        if (selectedValues == null) {
            selectedValues = new ArrayList();
            selectedValues.add(1);
            selectedValues.add(3);
            System.out.println("List is-" + selectedValues);
        }
        return selectedValues;
    }


See af:selectManyCheckbox source -



<af:selectManyCheckbox id="smc1" value="#{viewScope.ProgSelectManyComp.selectedValues}">
                                    <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si1"/>
                                </af:selectManyCheckbox>



• Now run this application and see component on page





• Following same steps i have three more component on page , all 3 adf faces component support multiple selection
  af:selectManyChoice-
  
  

  <af:selectManyChoice label="Label 1" id="smc2"
                                                       value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                       simple="true">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si2"/>
                                  </af:selectManyChoice>
  

  
  
  af:selectManyListbox-
  
  

  <af:selectManyListbox label="Label 1" id="sml1"
                                                        value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                        simple="true">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si3"/>
                                  </af:selectManyListbox>
  

  
  
  af:selectManyShuttle-
  
  

   <af:selectManyShuttle label="Label 1" id="sos1" simple="true"
                                                         value="#{viewScope.ProgSelectManyComp.selectedValues}"
                                                         contentStyle="width:50px;">
                                      <f:selectItems value="#{viewScope.ProgSelectManyComp.allValuesList}" id="si4"/>
                                  </af:selectManyShuttle>
  



• All 4 components on page are populated using same List, this is just an example to show that all 4 components share same strucutre, run this application and see 




Thanks, Happy Learning :)
Download- Sample ADF Application

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

Pre-populate selected values in viewObject based shuttle component (multiple selection)- Oracle ADF

Hello All,
This post talks about a common development requirement
while using shuttle component sometimes we need to show some values on selected side of af:selectManyShuttle , so to do this normally we use a custom shuttle component that is populated from managed bean code
but when i have all data in a viewObject so why should i iterate viewObject to get all data in managed bean and then set some values in an arrayList to populate selected shuttle values.
it is time consuming and requires lot of coding, so for viewObject based shuttle we can do it in efficient way.

• In this example I'm using Departments table of HR schema to populate af:selectManyShuttle, i think you all know how to create a shuttle in ADF
• So next is to populate selected shuttle values on some event, created a fusion web application using Departments table
  


• It's time to drop Departments ViewObject on page as shuttle component



<af:selectManyShuttle value="#{bindings.Departments1.inputValue}" label="#{bindings.Departments1.label}"
                                      id="sms1" size="15" binding="#{pageFlowScope.ShuttleSelectBean.shuttleBind}"
                                      partialTriggers="b1">
                    <f:selectItems value="#{bindings.Departments1.items}" id="si1"/>
                    <f:validator binding="#{bindings.Departments1.validator}"/>
                </af:selectManyShuttle>



• So suppose on a button click i want to set selected values in shuttle, so i have created a actionEvent for button in managed bean and binding of af:selectManyShuttle, so basic structure of page is like this







• See the code of actionEvent , create an arrayList and add all values in it that you want to set as selected values and then just set the value in shuttle using binding



    /**Method to set selected values in af:selectManyShuttle
     * @param actionEvent
     */
    public void selectValuesShuttle(ActionEvent actionEvent) {
        DCIteratorBinding iter = (DCIteratorBinding) getBindingsCont().get("Departments1Iterator");
        ViewObject vo = iter.getViewObject();
        RowSetIterator rsi = vo.createRowSetIterator(null);
        ArrayList listVal = new ArrayList(20);

        while (rsi.hasNext()) {
            Row nextRow = rsi.next();
            if (nextRow.getAttribute("DepartmentId") != null) {
                listVal.add(nextRow.getAttribute("DepartmentId"));
            }
        }
        shuttleBind.resetValue();// Reset Shuttle Component
        System.out.println("Setting values -" + listVal);
        shuttleBind.setValue(listVal.toArray()); // Setting selected values 
        AdfFacesContext.getCurrentInstance().addPartialTarget(shuttleBind);
    }



• Now run this page and test your shuttle component







Cheers- Happy Coding

• But this method works only when you have to set values on some action or other event after page load, because before page load , binding of shuttle component will not be accessible
• So if you have a requirement of setting selected values on page load then you must use a list defined in managed bean and bind it to  value property of shuttle component, value property denotes selected values of shuttle 





• And just write same code on getter of List, in this case selected values in shuttle are populated on page load



    List pageLoad = new ArrayList(20);
    public void setPageLoad(List pageLoad) {
        this.pageLoad = pageLoad;
    }

    public List getPageLoad() {
        DCIteratorBinding iter = (DCIteratorBinding) getBindingsCont().get("Departments1Iterator");
        ViewObject vo = iter.getViewObject();
        RowSetIterator rsi = vo.createRowSetIterator(null);
        while (rsi.hasNext()) {
            Row nextRow = rsi.next();
            if (nextRow.getAttribute("DepartmentId") != null) {
                pageLoad.add(nextRow.getAttribute("DepartmentId"));
            }
        }
        return pageLoad;
    }


Cheers- Use both method as per your requirement :-) Download Sample App