Creating a Databound Drop Down List in Oracle JDeveloper 10g

Written by Duncan Mills, Oracle Corporation
April 2004

Introduction

In a Struts / JSP application JDeveloper 10g provides a simple way of creating bound input forms, allowing you to drag the basic form from the relevant collection in the data control palette. Furthermore you can render individual input fields in a variety of ways, in this case we'll look at creating a databound drop down list step by step.

In this example we'll be using a screen created with a basic input form based on the Employees table from the Oracle standard HR demo schema. The model project for this example uses ADF Business Components to expose record collections for the Employees (the basis of the form), and a second record collection containing all Departments which will be used to populate the pop-list.


So in this tip we'll go through the steps required to replace the circled Department ID number field with a bound drop down list that contains the names of all the Departments and populates the underlying attribute in the employees table.

Steps to Create the Databound Pop List

  1. Delete the existing field (This can just be done in the JSP visual editor).

  2. Open the Data Control palette, expand the EmployeesView collection and select the DepartmentId attribute.  In the Drag and Drop As selection list at the bottom of the Data Control Palette select the control type Single Select List.
    Selecting a list widget in the Data Control Palette

  3. Drag the selected DepartmentId attribute from the palette into the space vacated by the DepartmentID field that you have just deleted.  You should see it dropped as a pop-list widget.

  4. Now click on the UI Model Tab ( Image of the UI Model tab in the structure pane) of the Structure Pane on the page you will see the following structure:
    UI Model for databound page
    Notice the DepartmentId1 attribute at the bottom of this list - this is the binding for new list item that you just created.

  5. Double click (or choose Edit from the context menu) on this new binding. The List Binding Editor will appear:
    Initial view of the list binding screen
     

  6. Use the List Binding Mode: list at the top of the dialog to change the mode to LOV Mode:
    LIst Binding dialog LOV mode screen
    This dialog has a Source Data Collection which will be a record collection (e.g. a Business Components View Object) which will provide the valid list of values.  The Target Data Collection is pre selected and represents the data collection that the input form is based on.

  7. So the next task is to create a source iterator on the source collection for the list. Expand the data control and select the correct collection.  In this case there is a View Object DepartmentsListView already set up:
    Setting the source collection
  8. Press the New button to create a new LOV Source iterator, accept the default name:
    New Iterator creation dialog
  9. Set the Select LOV Source Iterator drop down to this new iterator (DepartmentsListViewIterator), the Add button on the dialog will then enable.  Press the Add button and set the join attributes (i.e. DepartmentId = DepartmentId).  Your dialog should now look like this:
    List Binding screen with the mapping complete
  10. The next step is to define what data the pop-list should display, click the LOV Display Attributes tab on the dialog and shuttle the DepartmentName field into the Attributes to Display list:
    Selecting the poplist display columns in the list bindings editor
  11. The drop down list is now ready to run, but if you do so you will notice that only the first 10 records in the department list are shown. This is default iterator range size used when you created the DepartmentsListViewIterator. In most cases you'll want to change this range size to cause all records to appear in the list. To make this change, click on the UI Model Tab ( Image of the UI Model tab in the structure pane) of the Structure Pane again and select the DepartmentsListViewIterator in the structure. Bring up the property inspector if it is not visible and change the Range Size property from the default value of 10 to the value -1 which will cause all records to be displayed.
  12. The setup of the pop-list is now all complete, and when run, the Data Page will look like this:

Summary

List bindings provide a essential tool in building effective user interfaces, and are simple to implement in a declarative manner. Although the example shown here has been concerned with creating a list binding for drop down lists, the same method is used to create bindings for other list selection User interfaces such as T-Lists, radio groups, and check box groups. For a larger range of examples see the DataBound Lists using ADF sample on OTN ( http://otn.oracle.com/sample_code/products/jdev/index.html), which provides a workspace containing several different list binding implementations.

The basic technique shown for creating a list binding is also applicable for use with alternative user interface technologies in ADF such as ADF UIX or ADF JClient. In both cases the user interface elements bound to the list bindings will be different, but the creation of the actual binding is identical.