Key Points Covered:
- How to Use List Selector Component
- Event Mappings of List Selector
Overview
List Selector in Workspace is like Slush Bucket in Classic UI.
A Slush Bucket allows users to move items between two lists:
Left Side → Available items
Right Side → Selected items
In the same way List Selector Component in Workspace is the modern version of the Slush Bucket.It provides a dual-
list interface where users can:
1. View Available Items (left side)
2. View Selected Items (right side)
Now-a-days, agents mostly use Workspace, and the challenge is that the Slush Bucket is not available for use in
Workspace.For custom requirements, the appropriate alternative is to use the List Selector component.
Use Case
Cloning an event means duplicating all the information from a previously completed event—including all
participating users—with a single click in Workspace.
Created a pop-up that displays all the information from the previously completed event, giving users full flexibility to review and adjust the details before creating the new cloned event. To make this process easily accessible, I added a button in UI Builder that opens the pop-up with a single click.
- Inside the pop-up, I included key event fields such as the event name, start date, end date, city, and event type, allowing agents to update or fine-tune any of these values. Additionally, I implemented a checkbox option that lets agents instantly select all travellers from the previous event.
- For cases where the agent wants to include only specific travellers, I used the List Selector component to allow individual traveller selection. Since Workspace does not support the traditional Slush Bucket used in the classic UI, the List Selector serves as the modern and fully compatible alternative for multi-record selection.
- Overall, this design provides a smooth, Workspace-friendly event cloning experience with both flexibility and ease of use.
LIST Selector Component:
This is how the list selector component and the json of this component will be look like:
Basically, the List Selector component is designed to display the columns of a specific table based on the provided JSON. However, in this case, I customised that JSON to display the users associated with the current event.
How I customised the JSON:
- First, I used a Data Resource to fetch the users of the event. For those who are new to UI Builder, a Data Resource works similarly to a GlideRecord query, but it is built directly into UI Builder and can be used without writing server-side code.
- If we use a Data Resource, we get the output in a different structure than the one required. In other words, the JSON format returned by the Data Resource does not match the format expected by the component.
- In such scenarios, what we did was use Client State Parameters along with Event Handlers. So Create one client state parameter type as JSON.
- For the data resource there is an event called Data Fetch Succeeded attach an event handler named as Update Client State Parameter for that event.
- In those Update Client State parameter ,Select script to add :
- Use the following Script:
function evaluateEvent({api, event}) {
var users=api.data.event_users.results;
var results = {
"sys_user": {}
};
users.forEach(function(user){
results.sys_user[user.sys_user.value] = {
label: user.sys_user.displayValue + (user.sys_user._reference.title.displayValue? " - "+user.sys_user._reference.title.displayValue:"")
};
});
return {
propName: "usersWhileCloning",
value: {results }
};
//here the propName represents the Client State Parameter Name what we give during creation.
- Finally bind this Client State Parameter with the List Selector Component. On the Configuration panel of the list selector component we will see the Items field bind that with the Client State Parameter and change the Items Root Field Value as sys_user.
- That's it finally our Slush Bucket in Workspace is ready we will able to see the List Selector Component as:
- As of now, the configuration of the List Selector component is complete, but the real challenge is adding only the users selected in the List Selector component.For this Create One more client state parameter to store the selected travellers from the list selector component.
- There is a Event Mapping for list selector called Item Selected. For this event add Event Handler as Client Script to run which whenever an agent select the user from the list selector a client script will execute. In those Client what we are doing is the Storing the Selected Users in a Client State Parameter Separated by Comma and if the user deselected from the component we are removing that user from the Client State Parameter.
- The Client Script Looks like this:
/**
* @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 users = api.state.cloneEventTravellers || "";
if (event.payload.selected) {
api.setState('cloneEventTravellers', users + event.payload.item[0].id + ",");
} else {
// Remove user ID if it exists
var idToRemove = event.payload.item[0].id + ",";
var updatedUsers = users.replace(idToRemove, "");
api.setState('cloneEventTravellers', updatedUsers);
}
}//here cloneEventTravellers is the client state parameter name
Now we will see the fully functional List Selector component in Workspace, working just like the Slush Bucket in the Classic UI.
