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

Populate select one choice using Web Service Data Control in ADF Application

My previous post was about creating a JAX-WS Web Service from Java Bean and consuming web service and showing data in ADF table. Now In this post, I am going to elaborate about consuming that Web Service in ADF Application and show Employees data in selectOneChoice component


So for this requirement, We need to use Web Service Data Control and from that WSDL we can create ADF Faces components

Let's see how to implement this

Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job

ADF Basics: Count number of records in LOV using LOV Accessor

Hello All

This post is about a simple requirement - How to count number of records in a LOV ?
I have seen this type of threads on OTN forum so here I am writing about it

We can make use of LOV Accessor to  count number of records in LOV as per selected source viewObject record, Here I am using Departments and Employees table of Oracle HR Schema

Create ADF Choice List and apply selectItems to it programmatically

I hope we all know how to create selectOneChoice using Model layer and previously I have posted about populating selectOneChoice programmatically from bean using ArrayList

Programmatically populate values in a af:selectOneChoice component in ADF

But this post is slight different - It is about creating selectOneChoice component and applying selectItems to it programmatically
There is nothing complicated in this , Just a piece of code is required
Here I have used an ArrayList to set SelectItems and created component binding for af:form to add selectOneChoice as it's child 

ADF Basics: Get display and base value of POJO based SelectOneChoice

Previously I have posted about populating selectOneChoice programmatically using POJO

Programmatically populate values in a af:selectOneChoice component in ADF

and this post is about getting selected value of POJO base selectOneChoice (both display value and base value)

Add and delete values in POJO based selectOneListbox/selectOneChoice in ADF

Previously i have posted about populating selectOneChoice programmatically using POJO
Programmatically populate values in a af:selectOneChoice component in ADF

In same way we can populate values in selectOneListBox as both ADF Faces components are used for single selection and share same structure

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle -

contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle

It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -

just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1

In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning

Build selectOneChoice to show hierarchical (tree style) data programmatically in ADF

This post is based on an old article from Frank Nimphius How - to build a select one choice displaying hierarchical selection data

This article is about showing tree structure data in af:selectOneChoice component using ADF BC , it makes use of tree binding and af:forEach
Same concept i have used to populate data from managed bean using List data structure

Let's see the implementation part - how to populate tree style selectOneChoice programatically ?

First we have to design a Java Bean class in such a way that it can hold  master -detail type of data

A class that represents a List for Parent Values
                          ======> A list of same type to hold Child Values

See bean class code-

import java.util.ArrayList;
import java.util.List;

public class Seasons {
    public Seasons(String name) {
        this.name = name; // To Store Header Values (Storing Seasons Name :))
    }
    // Season and Charater Name
    private String name;
    // To Store Detail Values (Storing Season's Charatcers)
    private List<Seasons> characters = new <Seasons>ArrayList();

    public void setCharacters(List<Seasons> empDet) {
        this.characters = empDet;
    }

    public List<Seasons> getCharacters() {
        return characters;
    }


    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }
    // This methods directly add characters value in list
    public void addCharaters(Seasons employee) {
        characters.add(employee);
    }
}

Now how to use this bean in managed bean to add records, i have written code in constructor to populate values on class load

    // Master List to populate data in selectOnce choice
    List<Seasons> seasonList = new ArrayList<Seasons>();

    public void setSeasonList(List<Seasons> seasonList) {
        this.seasonList = seasonList;
    }

    public List<Seasons> getSeasonList() {
        return seasonList;
    }
    //Constructor of Managed Bean to populate data on page load (you can move this code )
    public TreeStyleLovBean() {
        super();
        // Creating tree for Seasons and Characters details
        // Adding Master Values (seasons)
        Seasons season1 = new Seasons("Game of Thrones");

        // Adding Detail Values (Child Node-Characters)
        Seasons character = new Seasons("Tywin Lannister");
        season1.addCharaters(character);
        character = new Seasons("Tyrion Lannister");
        season1.addCharaters(character);
        character = new Seasons("Jaime Lannister");
        season1.addCharaters(character);
        character = new Seasons("Cersie Lannister");
        season1.addCharaters(character);
        character = new Seasons("Ned Stark");
        season1.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season2 = new Seasons("Arrow");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Oliver Queen");
        season2.addCharaters(character);
        character = new Seasons("Moira Queen");
        season2.addCharaters(character);
        character = new Seasons("Laurel Lance");
        season2.addCharaters(character);
        character = new Seasons("Sara Lance");
        season2.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season3 = new Seasons("Vikings");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Ragnar Lothrak");
        season3.addCharaters(character);

        // Adding Master Values (seasons)
        Seasons season4 = new Seasons("The Flash");

        // Adding Detail Values (Child Node-Characters)
        character = new Seasons("Barry Allen");
        season4.addCharaters(character);
        character = new Seasons("Harisson Wells");
        season4.addCharaters(character);
        character = new Seasons("Iris West");
        season4.addCharaters(character);
        character = new Seasons("Joe");
        season4.addCharaters(character);

        // Adding all list to topList
        seasonList.add(season1);
        seasonList.add(season2);
        seasonList.add(season3);
        seasonList.add(season4);

    }

how to bind this managed bean to selectOneChoice ? i have used same concept as described in Frank's article using af:forEach

<af:selectOneChoice id="selectBox" label="Choose Character" valuePassThru="true"
                                        styleClass="employeeSelectBox" contentStyle="width:150px;"
                                        binding="#{viewScope.TreeStyleLovBean.selectOneValueBind}">
                        <af:forEach items="#{viewScope.TreeStyleLovBean.seasonList}" var="seasonNm">
                            <af:selectItem label="#{seasonNm.name}" disabled="true" id="si1"/>
                            <af:forEach items="#{seasonNm.characters}" var="characterNm">
                                <af:selectItem label="#{characterNm.name}" value="#{characterNm.name}" id="si2"/>
                            </af:forEach>
                        </af:forEach>
                    </af:selectOneChoice>

you can see here that first forEach is populated from master list and iterates over list of seasons and first selectItem show season's name
the inner forEach makes used of character list that is defined in Java Bean class and stores season wise character's name
Rest is same - a CSS is used to differentiate color and alignment of parent and child records (same as Frank's article)

<f:facet name="metaContainer">
                <af:group>
                    <![CDATA[
<style>
.employeeSelectBox option{text-indent:15px;color:darkgreen;}
.employeeSelectBox option[disabled]{color:red; background-color:#dddddd; 
font-weight: bold; text-indent:0px}
</style>
]]>
                </af:group>
            </f:facet>

Now run this application - see how it appears on page

It looks quite good :) to get selected value in bean just use componentBinding.getValue();

Sample ADF Application-Download (Jdev 12.1.3)
Cheers , Happy Learning 

Getting selected value (not index) & display value of select one choice programmatically in ADF

Hello All,
This post is about a common requirement of getting selected value & display value of af:selectOneChoice in managed bean
normally when we try to get selected value of  selectOneChoice in managed bean (in ValueChange/ Validator or using binding) it returns index of that row
so there is a little piece of code using that we can get selected value of choice component

• I have used Departments table of HR Schema in sample and created a lov on a transient field





• Now dropped that ViewObject on page as a table 





• Created a value change listener in managed bean fro DeptIdTrans but it return index of selected value










• Then i googled about it and used this method to solve my headache, try to get attributeValue instead of inputValue, see the code written in valueChaneListener in managed bean



    /**Value Change Listener of DeptIdTrans (to get selected and display value)
     * @param vce
     */
    public void deptIdVCE(ValueChangeEvent vce) {
        System.out.println("New Value is-" + vce.getNewValue());
        if (vce.getNewValue() != null) {
            this.setvalueToExpression("#{row.bindings.DeptIdTrans.inputValue}",
                                      vce.getNewValue()); //Updating Model Values
            Integer selectedCode =
                Integer.parseInt(this.getValueFrmExpression("#{row.bindings.DeptIdTrans.attributeValue}").toString());

            System.out.println("******** Selected Value in List***** " + selectedCode);
            System.out.println("*******Display Value in List ****" +
                               getValueFrmExpression("#{row.bindings.DeptIdTrans.selectedValue.attributeValues[1]}"));

        }
    }



• There is two methods to set and get value in expression (EL)



    /**Method to set value in Expression (EL)
     * @param el
     * @param val
     */
    public void setvalueToExpression(String el, Object val) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        ELContext elContext = facesContext.getELContext();
        ExpressionFactory expressionFactory = facesContext.getApplication().getExpressionFactory();
        ValueExpression exp = expressionFactory.createValueExpression(elContext, el, Object.class);
        exp.setValue(elContext, val);
    }

    /**Method to get value from Expression (EL)
     * @param data
     * @return
     */
    public String getValueFrmExpression(String data) {
        FacesContext fc = FacesContext.getCurrentInstance();
        Application app = fc.getApplication();
        ExpressionFactory elFactory = app.getExpressionFactory();
        ELContext elContext = fc.getELContext();
        ValueExpression valueExp = elFactory.createValueExpression(elContext, data, Object.class);
        String Message = null;
        Object obj = valueExp.getValue(elContext);
        if (obj != null) {
            Message = obj.toString();
        }
        return Message;
    }



• Again run page and select any value in selectOneChoice (lov) and see the result

Cheers :-) Happy Learning

Reference-https://blogs.oracle.com/shay/entry/getting_the_value_from_a_selec

Dynamically enable or disable items of ADF bound List (af:selectOneChoice) -Oracle ADF

Hello All,
This tutorial is about a requirement of conditionally enabling/disabling items (values) of adf bound List (af:selectOneChoice) component
here i am taking reference of default HR Schema (Departments and Location table )

See the steps-

• Create a Fusion Web Application and business components using both tables

•  Now create List of Values (Lov) on locationId of departments VO from Location VO

• Set List Attribute to LocationId and for UI city will be shown

• Now Drag Departments VO from Data Control on page as a form

•  Select LocationId list field and delete f:selectItems from it, now drag af:selectItem as child of af:selectOneChoice and surround it with af:forEach 

• Add tree binding of Location ViewObject to page bindings in order to populate list items using forEach

•  Now select af:forEach and set its property and variable name, as we have to iterate through Location VO for list items

•  Again select af:selectItem and set its value and label property using forEach variable's  

• Now run your application, and see that list box is ready with values

• Now we have to disable its values as a condition basis, i have written an Expression on af:selectItem's disabled property
  
  
  
  


• I have written condition for DepartmentId 100 and 110, see in source of page



<af:selectOneChoice value="#{bindings.LocationId.inputValue}" label="#{bindings.LocationId.label}"
                                        required="#{bindings.LocationId.hints.mandatory}"
                                        shortDesc="#{bindings.LocationId.hints.tooltip}" id="soc1"
                                        contentStyle="width:150px;color:red;">
                        <af:forEach items="#{bindings.Locations1.rangeSet}" var="list">
                            <af:selectItem label="#{list.City}" id="si1" value="#{list.LocationId}"
                                           disabled="#{ (bindings.DepartmentId.inputValue==100 and (list.LocationId==1000 || list.LocationId==1300)) || (bindings.DepartmentId.inputValue==110 and (list.LocationId==1500 || list.LocationId==1600 || list.LocationId==1700 || list.LocationId==1800 || list.LocationId==1900))}"/>
                        </af:forEach>
                    </af:selectOneChoice>



• Now value given in Expression for Location Id will be disabled for given Department
• Run your page and select DepartmentId 100 and 110 to see disabled list items

 Download Sample App Cheers :-)

Programmatically populate values in a af:selectOneChoice component in ADF

In this tutorial you will see that how to populate selectOneChoice list from managed bean, sometimes we need to use custom list that are not model driven, this scenario can be implemented there

follow steps -

• First of all create a fusion web application and a page in it
• Now create a variable of type java.util.List in managed bean, and generate its accessors



    List<SelectItem> customList;

    public void setCustomList(List<SelectItem> customList) {
        this.customList = customList;
    }

    public List<SelectItem> getCustomList() {
        return customList;
    }



• this list contains value of type javax.faces.model.SelectItem; that is supported by af:selectOneChoice
• now time to add values in list, so to add values in this list i have written this code in getter of variable



    public List<SelectItem> getCustomList() {
        if (customList == null) {
            customList = new ArrayList<SelectItem>();
            customList.add(new SelectItem("i1","Item 1"));
            customList.add(new SelectItem("i2","Item 2"));
            customList.add(new SelectItem("i3","Item 3"));
            customList.add(new SelectItem("i3","Item 4"));
            customList.add(new SelectItem("i5","Item 5"));
    }
        return customList;
    }



• Managed bean part is done, now add this to view layer




• Drop choice list in page from component palette

•  Now bind choice list to bean List

• See the page source after whole setup-



<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:f="http://java.sun.com/jsf/core"
          xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="listPage.jspx" id="d1">
            <af:form id="f1">
                <af:panelGroupLayout id="pgl1" layout="vertical" halign="center">
                    <af:spacer width="10" height="10" id="s1"/>
                    <af:selectOneChoice label="Custom List" id="soc1" contentStyle="font-weight:bold;color:darkgreen;">
                        <f:selectItems value="#{ListPolulatebean.customList}" id="si1"/>
                    </af:selectOneChoice>
                </af:panelGroupLayout>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>



• Run this page and see programmatic choice list-