Hide move all/remove all buttons from SelectManyShuttle component

In one of the earlier post, I explained how to implement SelectManyShuttle component. In this post, I will show how to hide move all/remove all buttons using skinning.

Generally SelectManyShuttle component looks like:

The skinning to hide move all/remove all buttons is:

af|selectManyShuttle::moveall-horizontal,
af|selectManyShuttle::moveall-vertical,
af|selectManyShuttle::removeall-horizontal,
af|selectManyShuttle::removeall-vertical{display:none}

The SelectManyShuttle component after skinning:

Use case of Inlinestyle & ContentStyle

In this post, I will explain a use case of InlineStyle and ContentStyle on ADF UI components.

In one of my project I had a requirement where in I have to display few rows of table in bold if a specific criteria is met. The other rows where criteria is not met should be displayed as normal.

- Select columns in the table which you want to display in bold.

- Select the Style tab for the selected output text in the property inspector and set the inline style as below:

- Here the criteria is Salary should be greater than 10000. The column code looks like.

UI

If you want to apply similar style for the content of an InputText component, then make use of ContentStyle property rather than InlineStyle property as shown

Here in addition to bold, the content of InputText is right aligned.

UI

Defining a tool tip message on Table column label

In one of my earlier post, I explained how to define tool tip for Table Column Filter. In this post, I will explain how to define tool tip message/short description on a table column label.

- Select the column in the table for which you want to define tool tip.

- Expand Column facets node for that column and select header facet.

- Inside the header facet add an Output Text component and set it's value property same as column header text as shown:

 - The custom tool tip for the table column label can now be set on the shortDesc property of Output Text. After this modification, the column code looks like:

UI

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.