Using SPARK UI controls, we will build a composite control to move Name Value Pair objects from one array to another. In addition to the move functionality, we will also add a search feature to aid the selection process in situations where the lists are more verbose.
This example is to help developers gain a better understanding of the SPARK UI Toolkit and is by no means exhaustive.
Browser View
Process Designer View
To accomplish this, we need to first create a new Coach View (in this example called “Dual Listbox CV”). Next, we need to set up our variables.
Configuration Options
In a composite control of this nature, one side is the destination list and the other side is a list of remaining items. Since this is subjective (i.e. neither the left nor right side are explicitly the destination), we have created two configuration options for each Name Value Pair list:
Layout
For the sake of reusability, I have created a sub-view called “Search List CV” which is bound to the left or right list of Name Value Pairs (i.e. one for destinationList[] and one for remainingList[]).
Within the Search List CV, there is a Textbox (for the sort) and a Table (with the Control ID “Table1” – not the most creative name). This really only leaves the Icons for the parent view (more on that in The moveBinding Function section)
Search
The search is executed on the On Input event handler on the Textbox control.
Enable Multiple Selection
If you want multiple items to be moved across simultaneously, then you’ll need to make sure the Table is set up in Multiple Selection Mode.
The "moveBinging" Funciton
The shift from left to right, and vice versa, is orchestrated by two icons using the chevron-left and chevron-right characters from Font Awesome.
The actual moveBinding function is stored in the Inline Javascript handler of the CV. This function is called from the On Click event of the icons.
Remember that we built the sub-view “Search List CV” which now appears twice on the surface of our “Dual Listbox CV” with the Control IDs “To_Binding_List_CV” and “From_Binding_List_CV”.
Note that the inputs are the To List table and the From List table, thus the inputs will need to be reversed from one icon to the other.
- Author: Geoffrey Hamm
- Date Created: January 25, 2017
- Date Modified: January 25, 2017
This example will be provided along with the SPARK Showcase in the next upcoming release.
Comments