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>