- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Declarative Actions - List Actions
Table of Contents
- Step 1. Open UI Builder
- Step 2. Open UI Builder and get the Parent Macroponent
- Step 3. Create a UX Action Configuration
- Step 4. Create a Page Property under Customer Support Workspace UX Application
- Step 5. Creating an Action Assignment
- Step 6. Add a UX-Add On Event Mapping
- Step 7. Create Event and Configure Event Hanlder in UI Builder
- Step 8. Creating a Client Script
- Step 9. Testing and Previewing
Articles Hub
Want to see all of our other articles and blogs related to UI Builder and Workspaces?
You can copy the link above and share it!
Overview
- Renaming the UI Builder page variant and component
- Creating a UX Action Configuration and Page Property
- Assigning the action to the Incident list
- Mapping the action to an event using UX Add-On Event Mapping
- Channeling the Event using a client script to open a record in a specific related tab
Prerequisites
Before starting this tutorial, ensure you've completed the necessary prerequisites to follow along smoothly. Here are some key articles you might need to reference:
- How to make a workspace from scratch: In this article, we created the Customer Support Workspace.
Troubleshooting
If at any point something isn't working, try clearing the UI Builder cache.
Within your page variant editor in UI builder, click the hamburger menu icon at the top-left, go to Developer > Clear UI Builder Cache. You can also try clearing your local browser cache.
What are Declarative Actions?
Features
|
UI Action
|
Declarative Action
|
Where They Work
|
Core UI + Workspaces
|
Only in Workspaces & UI Builder
|
Supported Areas
|
Lists, Forms
|
Lists, Forms, Playbooks, Catalog Wizards, Kanban Boards, etc.
|
Implementation Options
|
Client Script, Server Script
|
Client Script, Server Script, UXF Client Action
|
- Client Script – Runs code on the user's browser (e.g., opening multiple records in new tabs).
- Server Script – Runs code on the server (e.g., approving a record by updating a related approval table).
- UXF Client Action – Triggers actions within UI Builder, handled by event handlers (e.g., opening a record in a sub-tab or modal).
Step 1. Open UI Builder
1. In your ServiceNow instance, use the Application Navigator to go to Now Experience Framework > UI Builder.
2. When UI Builder opens, you should see the UI Builder Home screen.
3. Select Experiences Tab at the top of the screen.
Step 2. Open UI Builder and get the Parent Macroponent
1. In the Experience Editor, find Pages and Variants.
2. Locate the Customer Support List page in the list of pages.
3. Under the existing Default page variant, click the Settings link on the right.
6. Right-click and save, then copy the name (Custom List) to a notepad for later use. (This name will be used as the Parent Macroponent in a later step).
7. Navigate back to the UI Builder page variant editor for Customer Support List.
8. In the content tree, click on Record List Header.
9. In the Component Configuration Panel, update the following:
- Component Label: Custom List Header
- Component ID: custom_list_header
Step 3. Create a UX Action Configuration
1. In the All Navigator, type Action Configs, Click it under Declarative Actions > Action Configs.
- Name: Custom List Action
Step 4. Create a Page Property under Customer Workspace Support UX Application
Creating the UX Page Property
1. On the new UX Page Property record, set:
- Name - actionConfigId
- Suffix - actionConfigId
- Type - String
- Value - fd30dc2b81a650e82bf6046e91bfe2 (paste the sysId of the Custom List Action)
Step 5. Creating an Action Assignment
1. Search for List Actions in the All Navigator, Select it under Declarative Actions > List Actions.
2. Click the New button to create a new list action assignment (this becomes the button).
3. Set the following fields:
- Action Label - Check SLA
- Action Name - (Auto-populates)
- Implemented As - UXF Client Action
Create a new Client Action
1. Click the magnifying glass on Specify Client Action field, then click New button.
- Key - check_sla_payload
- Label - Check SLA Payload
- Applicable To - List
- Payload:
{
"recordSysId": "{{sysIds}}"
}
recordSysId is the key name that will be referenced in event mappings.
{{sysIds}} is a variable automatically filled with the selected record(s) in the list view
- Table: Incident
- Icon: accessibility-fill
- Record Selection Required: True
- Order: 100
Setting the Action Configuration
1. Scroll to the Action Configuration related list.
2. Click the Edit button.
3. Search for and select Custom List Action.
Step 6. Add a UX Add-On Event Mapping
1. In the Related Lists, go to UX Add-On Event Mappings and click the New button.
- Event Mapping Name - Check SLAs
- Source Element ID - custom_list_header
- Parent Macroponent - Custom List
- Source Declarative Action - auto-populated
Create Target Event
1. Click the magnifying glass next to Target Event field, then click New button.
- Label - Customer Workspace - Open record in tabs
- Event Name - custom_wrks_open_record_tabs
- Properties -
[
{
"fieldType": "string",
"label": "Record Sys Id",
"name": "recordSysId"
}
]
{
"container": {
"recordSysId": {
"binding": {
"address": ["recordSysId"]
},
"type": "EVENT_PAYLOAD_BINDING"
}
},
"type": "MAP_CONTAINER"
}
Step 7. Create Event and Configure Event Handler in UI Builder
1. Go to UI Builder > Customer Support Workspace.
2. Navigate to the Customer Support List Page, then click the Default page variant.
3. In the content tree, click on BODY.
4. Navigate the Component Configuration Panel, go to the Events tab.
5. Click + Add under Handled Events.
6. In the modal that pops up, set the following fields:
- Event Label: Record Open Tab
- Event Name: (Auto-populated)
- Name - record_id
- Label - Record ID
- Name - tab_id
- Label - Tab
Step 8. Creating a Client Script
1. In the bottom-left corner of the variant editor, click the + next to Client Scripts.
2. Set the script name: Open SLA in new tab
let sys_id = event.payload.recordSysId;
let payload = {};
payload.record_id = sys_id;
payload.tab_id = "id=relatedLists^index=0";
api.emit("RECORD_OPEN_TAB", payload);
Gets the selected Incident sys_id and Opens the record with the Task SLA tab (first related tab)
Add Event Mapping (Client Script)
1. Click Add Event Mapping button.
2. Select: Customer Workspace - Open record in tabs.
Add Event Mapping (Record Open Tab)
1. Click the Add Event Mapping button.
2. Select: Record Open tab
Step 9. Testing and Previewing
1. Click the Preview drop-down and select Open URL Path,
- Or go to ServiceNow homepage, Workspace Navigator > Customer Workspace
2. Click on the List outline.
3. Select any Incident record.
4. The Check SLA button should appear.
Troubleshooting
- Click on settings in the middle of the page variant editor.
- Click on the Open Records dropdown menu and select Page Definition.
- Scroll down to the Handled Events field and click the lock key icon.
- Search for: Customer Workspace - Open record in tabs, select it, then click the lock key.
- Click the Update button or Right Click and Save.
If at any point something isn't working, try clearing the UI Builder cache.
Within your page variant editor in UI Builder, click the hamburger menu icon at the top-left, then go to Developer > Clear UI Builder Cache. You can also try clearing your browser cache.
Conclusion
🎉 Congratulations! You have successfully created a reusable and dynamic UX Action that lets users quickly access related Task SLAs directly from the Incident List!
If you found this guide helpful, consider sharing it with peers or teams looking to elevate their UI Builder skills. If you like this type of content, please mark the article "Helpful" leave us your topic ideas in the comments, and fill in the survey at the top!
Keep an eye out for future tutorials where we’ll dive deeper into crafting immersive, data-driven experiences. Until then—happy designing, and stay curious!
Check out the Next Experience Center of Excellence for more resources.
- 1,619 Views
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.