Integration of a Browse and Collect Pane

[Former Member]

This document will guide you through the process of creating and configuring a Browse and Collect Pane for use.

A Browse and Collect Pane allows the user to browse a list of items, select items from this list, and collect them in another list by either moving or copying them. The list that holds the collected items allows the user to reorder or modify these items to the extent possible in a List Pane. A Browse and Collect Pane can be configured to be either horizontal (image below) or vertically (the two lists are positioned one beneath another). Front-end scripting is used to facilitate the movement/copying of items.

1. In the UI Designer drag the Browse and Collect Pane into your screen.

2. As you would with a AdvancedListPane set up the Elements and Query.

3. Create a new Event Handler (in the Controller tab) called 'MoveItemRight'

4. Once you've made the Event Handler you can now add the first operation. Click on the Add Operation button, then select List from the drop-down box.   Now select Add Row from the Operation drop-down box and then select /Root/Datalist1 from the Target List.

5. Add another Operation and set the Operation Type to Script.

6. Add the following code to the source (change the datalist names where necessary)

LeadIndex = $data.DataList.LeadSelectedIndex

Row = $data.DataList1.RowCount - 1

$data.DataList1.Get(Row).Statement = $data.DataList.Get(LeadIndex).Statement

$data.DataList1.Get(Row).Description= $data.DataList.Get(LeadIndex).Description

7. Add another Event Handler called 'DeleteItem'.

8. Add 2 Operations to the Event Handler as shown below.

         Code:

LeadIndex = $data.DataList1.LeadSelectedIndex

$data.DataList1.Delete(LeadIndex)

9. Configure the properties of the Browse and Collect pane to allow the items to be moved using the Event Handlers you created earlier.

10. Success!