Workspaces are now the preferred interface for agents working on resolving the issues. Thanks to their multi-tab and compact layout, they offer an intuitive, seamless experience with all the related actions within reach without switching contexts.
These are developed and configured within UI Builder. Repeater Tab is one of the most powerful features, which allows us to configure tabs dynamically based on data - typically Related records, etc. However, beginners tend to find it difficult to configure them. This article guides you through it.
Use-Case: Display case tasks of a particular case in separate, dynamically generated tabs with their own labels.
Step 1: Add a Data Resource to fetch case tasks:
- In UI Builder, Create a Data Resource.
- Choose Lookup Multiple Records.
- Select the table that stores case tasks (sn_customerservice_task)
- Add condition (eg, parent.sys_id = props.sys_id)
Step 2: Add a Repeater Tab:
- In the UI Builder editor, select the Main Tab component.
- Click on the +Add button.
- Choose "Use a repeater".
4. Enter Repeater Details in the Repeater Settings.
5. Bind the results array (from data resource) to the Data array.
Now, you would see that the tabs are dynamically generated for each case task.
But the tabs don't show labels and icons. This is because Tab components look for Label and Icon fields within the object - but the case task records don't have these fields.
We will need to dynamically add these fields.
Step 3: Add Label and Icon Properties to Data Array:
- In the UI Builder editor, select the Repeater Tab component.
- Click on the bind icon for the Data Array.
3. Toggle the binding to script (in the top-right corner).
4. Add code as follows
Now, the labels and icons for the repeater tabs are configured. This method can be used to configure any other component in the UI Builder that looks for specific field values.
Thanks for going through this article. Comment on your views about this article.
