The Select Item component is used to add and remove items from a record (For example, add/remove roles from a User). The component contains two lists and buttons in between the lists. The left grid will list all the possible items that can be assigned, the right grid will list all the items currently assigned to the record. The two buttons are used to either add or remove the selected items.
Targets
To properly use the component the fields in its field definition must be populated. It requires 1 stored procedure and two targets.
- Load Possible Options – Returns a list of items that could be assigned, does not show any items already assigned
- Load Selected Options – Returns a list of all the items currently assigned
- Add/Remove Stored Procedure – A procedure that either adds or removes the selected items
The stored procedure that adds or removes selected items will be passed an AdditionalParameters parameter that will only be “A” for add or “R” for remove. The AdditionalParameters is populated depending on which arrow button was selected by the user. Moving items from left to right (or top to bottom) is considered adding and the AdditionalParameters with contain an “A”, the opposite with populate AdditionalParameters with an “R”.
Below is the parameter list for the Add/Remove stored procedure that needs to be created:
- AddRemove
- SessionGUID
- UserGUID
- CurrentInstanceGUID
- TargetInstanceGUID
- AdditionalParameters
The result of the Load Selected and Load Possible Options target calls should contain two columns for each item:
- InstanceGUID
- InstanceName
Component code
The first section of the code contains all the variables required for the component to function. Below are the components methods and their purpose.
OnParametersSetAsync()
This method is called when the component is initialized and when the parent component is updated. Its purpose is to assign variables their values and to refresh the data of the lists.
Task<List<ListBoxItem>>GetData(string targetFieldName)
This method is responsible for calling the target to get data for the specified list based on the targetFieldName argument. Once the call is complete it will return a list containing ListBoxItems to be used to populate the appropriate list.
Task<IEnumerable<ListBoxItem>>UpdateSelectedItems(string targetFieldName)
This method is called typically when the data for a list has been refreshed, it’s purpose is to correctly set the list of items that are currently selected in the list.
OnListBoxTransfer(ListBoxTransferEventArgs<ListBoxItem> args)
This method is called when items from one list are transferred to another by selecting one of the transfer buttons. Its purpose is to call the Add/Remove Stored Procedure in the field definition to add or remove each selected item in the list.
OnListBoxDrop(ListBoxDropEventArgs<ListBoxItem> args, string originID)
This method is called when an item is dragged and dropped from one list into another. It’s purpose is to call OnListBoxTransfer() to add or remove the item that was dragged and dropped on the list.
FilterData(string newValue, string listboxToFilter)
This method is called when the value of the filter text boxes change. Its purpose is to filter the data for the appropriate list using the value in the filter text box. A contains filter will be applied to the data so if the filter text box contains the value “abc” then the list will be filtered down to only show items that contain the text “abc” in its name.
