Skip to Content
Author's profile photo Former Member

Integration of a Browse and Collect Pane

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.

Capture.PNG


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

Capture.PNG


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

Capture.PNG


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.

Capturegg.PNG

Capture.PNG

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

Capture.PNG


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




Capture.PNG


7. Add another Event Handler called ‘DeleteItem’.

Capture.PNG


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

         Code:


LeadIndex = $data.DataList1.LeadSelectedIndex
$data.DataList1.Delete(LeadIndex)



Capture.PNG

Capture.PNG

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

Capture.PNG


10. Success!

Capture.PNG

BoDLogo.gifSAPGold.gif

Assigned tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Nice work Will

      Author's profile photo Simon Angel
      Simon Angel

      Very useful Will - Well done!

      Author's profile photo Former Member
      Former Member

      thanks Will, useful and great to see how the data gets bound in the UI, always making mistakes here!

      John

      Author's profile photo Simon Angel
      Simon Angel

      Well worth 5 stars

      Author's profile photo Former Member
      Former Member

      Well done Will

      Author's profile photo Former Member
      Former Member

      Wow Awesome Work.

      Thanks for sharing ..... 🙂

      Regards,

      Mithun