Implementation of SelectManyShuttle component

The selectManyShuttle provides a mechanism for selecting multiple values from a list of values by allowing the user to move items between two lists. SelectManyShuttle

Use-Case:

The mapping between two entities should be persisted in a third database entity.

Say, there are three tables in an application, EMP, ROLES & EMP_ROLES. The EMP table is shown as a form layout allowing the user to navigate between the records, create a new record, update an existing record & commit all the changes. The SelectManyShuttle component is used to display all  the ROLES like Manager, President etc. For an EMP record, the user can select multiple roles and shuttle them to the right. 

When a user shuttle any Role to the right for an EMP record,  an entry is made in EMP_ROLES Table and vice versa. The EMP_ROLES table contains all the ROLES selected for an EMP record. And while navigating between the EMP records, the corresponding ROLES saved in the EMP_ROLES db table are displayed as selected.

The UI looks like:

 Steps implemented are:

1. Create a Fusion Web Application using jdeveloper.

2. Create all the required Business Components (EO, VO,VLink AM) for the above data model.
3. Don't forget to create a view link between EmpVO and EmpRolesVO, which will be used to display the pre-selected roles for an EMP record. The data model will be as shown:

4. Drag and drop the EmpVO as a form layout with navigations.

5. Drag SelectManyShuttle UI Component and bind the value property of it to a managed bean property, which evaluates the values to be displayed as selected for an EMP record as shown:

where getSelectedRoles method is:

6. When any Role is shuttle to the right, first it is saved in a pageFlowScope variable, then it is processed in the commit method as shown:

7. When user navigates between the records, getSelectedRoles() method is called, which will fetch the ROLES for an EMP record and then display them as pre-selected in SelectManyShuttle component. Partial triggers is set on the SelectManyShuttle component wrt to the navigation buttons as shown:

8. The user can clear the selection made in the SelectManyShuttle component by clicking the Clear button. The code to clear selection is as shown:

Sample Workspace:
Download the sample work space from here.