- Multiple Item Select

WOW has a built in display component that allows multi-value select by JQuery. In the following example, we will return employees in work departments and allow end users to select multiple departments.

Here is the initial operation:

When an SQL statement contains the "IN" operator, WOW supports multiple values to be selected.

SELECT * FROM PJDATA.EMPLOYEE WHERE WORKDEPT IN ?

Run the application and open the FD manager associated with the department field. In order to limit the multiple field to SELECT only (not update), you will want to create a derived FD for the field used for multiple selection.

Create a COPY of the WORKDEPT FD:

Rename the field name and set the display component to JQuery Multi Value List: Then click "apply" which

will generate the components configuration data and make it available for customization.

In the FD manager, note the new FD ID number of your derived FD.

Now, you must go back and EDIT the original operation. Within the select statement, place the unique FD ID in the search parameter. This will tell WOW not to use the WORKDEPT field in the database but the new Derived Field. (More information on Derived FDs can be found here: https://sites.google.com/a/planetjavainc.com/wow_builders_guide/home/16-wow-features)

Run the application, and click the “employee” operation. You can see that you are provided a drop-down list with check boxes.

I will select 3-4 departments to get the following to return:

As shown above, you can see the different work departments being displayed.

WOW will automatically insert the user defined HTML for a multi-select jQuery option when selecting jQuery Multi Value List as the Display Type within the FD Manager. You can leave as is or adjust the settings as needed. The URL provided within the Display Settings/User Defined HTML in the FD Manager provides additional options available within jQuery and can be changed within the HTML. You may visit the jQuery support page for more information on multi select here: http://www.erichynds.com/blog/jquery-ui-multiselect-widget

If WOW does not auto populate the user defined HTML, you can cut and paste from here:

<script>

/*

See http://www.erichynds.com/blog/jquery-ui-multiselect-widget

*/

$(document).ready(function() {

$("select[name='{inputId}']" ).multiselect({

selectedList:4,

hide:["slide",1500],

show:["slide",500]

});

});

</script>

As an example, by default the selectedList:4, indicates there will be up to 4 departments that will show up in the pick list menu.

If user selects more than 4 departments, this will be displayed in the operation:

This number can be set to whatever makes sense and will be helpful if users have too many selections to comfortably fit on the drop down menu.

TAGS: User Defined HTML, multiple value selection, multi-value, SQL IN , COMBOBOX for multiple selection