How to Implement Dependent Drop Down List in ADF

In this How-to example, I am going to explain, how dependent drop down list can be implemented in ADF.

Here I am creating two drop down lists "Department" and "Employee".
On selecting department, the list of employees will change.


I am assuming that you have sample HR schema installed in your database.

Create View Object DepartmentListVO for Department SelectItems.
Query: Select department_id, department_name from departments

Create View Object EmployeeListVO for Employee SelectItems.
Query: select employee_id, first_name from employees where dapartment_id = :DeptId

Define Bind variables DeptId in EmployeeListVO

Create View Object EmpDeptVO for defining the form elements.
This query varies according to your requirement. At least include employee_id and department_id in your select clause.

Define an Application Module and add above view objects to this application module.

Create a jspx page, drag EmpDeptVO to the jspx page and drop EmpDeptVO as ADF form.

Delete form elements for employee_id and department_id from the page.

Drag DepartmentId from data control under EmpDeptVO and drop as select one choice.
Click on add to define binding for List. Select DepartmentListVO from the Add data source drop down.
Select Display Attribute as DepartmentName.

Id of this select one chioce is auto populated as selectOneChoice1
Drag EmployeeId from data control under EmpDeptVO and drop as select one choice.
Click on add to define binding for List. Select EmployeeListVO from the Add data source drop down.
Select Display Attribute as FirstName.

Id of this select one chioce is auto populated as selectOneChoice2

Select selectOneChoice1 in structure window and go to properties.
Set AutoSubmit property to true

Select selectOneChoice2 in structure window and go to properties.
Set PartialTruggers property to selectOneChoice1

          <af:selectOneChoice value="#{bindings.Departmentid.inputValue}"
                              label="Department"
                              id="selectOneChoice1" autoSubmit="true"">
            <f:selectItems value="#{bindings.Departmentid.items}"
                           id="selectItems1"/>
          </af:selectOneChoice>
          <af:selectOneChoice value="#{bindings.Employeeid.inputValue}"
                              label="Employee"
                              id="selectOneChoice2"
                              partialTriggers="selectOneChoice1">
            <f:selectItems value="#{bindings.Employeeid.items}"
                           id="selectItems2"/>
          </af:selectOneChoice>

Right click on the page and go to page definition.
Right click on Bindings -Select 'Insert Inside Bindings' - Select 'Generic Bindings' - select 'Action'

Select EmployeeListVO from data collection
Select Iterator as EmployeeListVOIterator
Select Operation as ExecuteWithParams
Set the value of parameter 'DeptId' as #{bindings.Departmentid.inputValue}
Click OK

Right click on executables - Select 'Insert Inside executables' - select 'InvokeAction'

Give one meaningful id 'InvokeExecuteWithParams'.
Set 'Binds' as 'ExecuteWithParams'
Set 'Refresh' as 'RenderModel'
Click Finish

Drag InvokeExecuteWithParams above EmployeeListVOIterator

Run the page.

  <bindings>
    <action IterBinding="EmployeeListVOIterator" id="ExecuteWithParams"
            InstanceName="HRAppModuleDataControl.EmployeeListVO"
            DataControl="HRAppModuleDataControl" RequiresUpdateModel="true"
            Action="executeWithParams">
      <NamedData NDName="DeptId"
                 NDValue="#{bindings.Departmentid.inputValue}"
                 NDType="oracle.jbo.domain.Number"/>
    </action>
  ..........
  ..........
  </bindings> 
  
  <executables>
    <invokeAction id="InvokeExecuteWithParams" Binds="ExecuteWithParams"
                  Refresh="renderModel"/>
    <iterator Binds="EmployeeListVOIterator" RangeSize="-1"
              DataControl="HRAppModuleDataControl" id="EmployeeListVOIterator"/>
   ...........
   ...........
  </executables>

Read more...

How to implement drop down list in ADF

In this how-to example I am defining a department drop down list, which shows a list of departments.

Add the following code in the ADF page.

          <af:selectOneChoice label="Department"
                              value="#{ModelData.department}">
            <f:selectItems value="#{DepartmentOptions.departments}"/>
          </af:selectOneChoice>

In ADF, selectOneChoice is used for drop down list.

selectOneChoice picks the list of values from 'selectItems' tag.

You can define a managed bean to bind an ArrayList of SelectItem objects to 'selectItems'. or can define a view object and bindings. In this example I have defined a managed bean which provides an ArrayList of SelectItem objects.

Department list Backing bean code.

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

import javax.faces.model.SelectItem;

public class DepartmentOptions {
    private List departments;
    
    public DepartmentOptions() {
        departments = new ArrayList();
        SelectItem department = new  SelectItem("10", "Electric");
        departments.add(department);
        department = new  SelectItem("20", "Mechanic");
        departments.add(department);
        department = new  SelectItem("30", "Computer");
        departments.add(department);
    }

    public void setDepartments(List departments) {
        this.departments = departments;
    }

    public List getDepartments() {
        return departments;
    }
}

Read more...

Oracle ADF Faces Documentation

Oracle ADF Faces Documentation can be found here.

Read more...