🖊📖...TRICK_AD_103...
Have you ever wondered we can control the check/uncheck of drop down list items on the workspace UI by simply manipulating it's payload, of course the drop down has to be multi select?
For example, we may have a ‘Dropdown’ component used as a filter which has certain list of values for selection (All, item 1, item 2, item 3) and mode of selection of the dropdown is ‘Multi’. In this case OOTB ServiceNow UIB allows users to select one or more items from the dropdown list without any restriction for the user who have access to that dropdown.
However, logically as per requirement, if ‘All’ is selected then other items should not be allowed to select or if other items are selected then ‘All’ should be deselected automatically.
Solution:
A UIB page client script is created and that is called by the appropriate event generated by the component. In this case of above problem statement example, the page client script is called by ‘Dropdown selected items set’ event.
Step 1: Create a page client script: (To read the event payload and process that)
/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
* @Param {any} params.imports
* @Param {ApiHelpers} params.helpers
*/
function handler({
api,
event,
helpers,
imports
}) {
var selectedItem = event.payload.value; //event payload returns array
if (selectedItem.length > 1) {
var index = selectedItem.indexOf("all");
if (index == 0) {
selectedItem.splice(index, 1);
} else if (index > 0) {
selectedItem.splice(0,index);
}
}
}
Step 2: Call the page client script from relevant component event:
Note: After the payload is processed at runtime, we can use the output as an input to other operations/component with help of another client script called by appropriate component event. 🖋📔😊
Thanks,
Animesh Das
Happy learning and sharing!
You may mark this helpful as well if it helps you.
