Custom Declarative Component- Multi-Select LOV

 I needed to implement a multi select LOV solution for a requirement and I thought that building a declarative component would be the ideal way to go ..
  Here I will give a sample of that component, you can enhance it according to your needs.

1-Start a new application and add a new generic application
2-From the new gallery pick "JSF Declarative Component"

3-Provide details for the component

4-Edit MultiSelect.jspx and add your components. I will use an inputText and an icon to simulate the LOV. When the icon is clicked I will launch a popup and in the popup I will use a af:query and af:table . LovModel has attributes for af:query and af:table. Those attributes will be utilized to fetch the lov data and search areas.

Make sure you set the Simple attribute to true. Otherwise it wont align well in panelFormLayout

Now we need to add the popup ..

Pay attention to the af table I used here. It is a dynamic table and it forms itself from the lovModel. It is set to allow multi select.

When the OK button is clicked I call a method on the component class.

5-Create a deployment profile to deploy this project as ADF Jar Library and deploy it.

6-Create a test Fusion application and by using File System Connection attach it to your view project. Once you do this you will start seeing your component in the component palette.

7-Create your model and create the LOVs as you do with regular lovs.We will utilize the same lovModel

   
For testing the app I added a transient attribute and I added the Countries Vo as LOV accessor here. Nothing special !!
8-Now create a form on your test page and drag this transient attribute InputTextListOfValues then delete countries field from page source. Make sure that you are not deleting the binding. We need the binding for LOV.
  Now dragNDrop your MultiSelect Component. It will ask two attributes. One for the comma separated list and the other is the LovModel.

Pick the attribute values as here.

You will end up with screen as below.

Now you can launch your app...

Enjoy !

I checked-in the source code on google code . You can get it here(MultiSelectLov.zip).