Smart List of Values

We can use two wonderful components for working with the lists of values :  Input List Of Values and Input Combobox List of Values. But my users got used to too much comfort and they want to input department's ID manually in one field and see automatic reflection of the department's name in another field. And they want to choose the department's name from some list and to have reflection of its ID automatically.
In order to match this requirement I need to do some trick in my model. I've got EmployeesView VO with DepartmentID and DepartmentName fields. The trick is to create two LOV's on Departmentid and Departmentname as well. The LOV for Departmentid:

 Note, that DepartmentName field is also mapped. And the LOV for DepartmentID:

It uses the same viewaccessor and has mapping for DepartmentID as well.

On my page I'm going to put one InputText for DepartmentID and one ComboBox List of Values for DepartmentName. It's needed to link them with each other as partial targets and mark DepartmentID as an autosubmitted field. 
Both fields are put on a horizontal layout panel within Panel Label and Message:

<af:panelLabelAndMessage label="#{bindings.DepartmentId.label}" id="plam1">
  <af:panelGroupLayout id="pgl1" layout="horizontal">
    <af:inputText value="#{bindings.DepartmentId.inputValue}"
                  required="#{bindings.DepartmentId.hints.mandatory}"
                  columns="#{bindings.DepartmentId.hints.displayWidth}"
                  id="deptid" partialTriggers="departmentNameId"
                  autoSubmit="true" simple="true"/>
    <af:inputComboboxListOfValues id="departmentNameId"
          popupTitle="Search and Select: #{bindings.DepartmentName.hints.label}"
          value="#{bindings.DepartmentName.inputValue}"
          model="#{bindings.DepartmentName.listOfValuesModel}"
          required="#{bindings.DepartmentName.hints.mandatory}"
          columns="#{bindings.DepartmentName.hints.displayWidth}"
          shortDesc="#{bindings.DepartmentName.hints.tooltip}"
          partialTriggers="deptid"
          simple="true">
      <f:validator binding="#{bindings.DepartmentName.validator}"/>
    </af:inputComboboxListOfValues>
  </af:panelGroupLayout>
</af:panelLabelAndMessage>

The working page looks like this:

In my next post I'm going to show how to create ADF declarative component in order to use this approach in your application as a standard one.