Overview
In this guide, you'll create a custom tab in Customer Support Workspace to display related Problems and Changes for an incident's caller. This helps you quickly view and navigate to relevant records without leaving the incident page.
We will cover:
- Creating a new page
- Adding tab to an existing page
- Setting up event handlers
Family Release:
XanaduUI Builder Release: 26.2.59
Roles Required: admin
Authored: @sophiasemga
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.
4. Open the Customer Support Workspace.
Step 2. Creating the Pages
Creating the Related Problem Page
1. In the Experience Editor, click the + icon next to Pages and Variants.
2. Select Create a new page and choose Standard Record Template.
3. Name the page: Related Problem.
4. The URL will automatically populate.
5. Click Continue.
6. Review the URL parameters and select Looks good.
7. Leave the page variant name as Default and click Create.
8. Navigate to the cylinder icon in the top-left corner of the page variant editor.
9. Change the Table Parameter to:
problem. 10. Change the sys_id Parameter by selecting any Problem record.
11. Click Apply.
Creating the Related Change Page
1. Navigate back Customer Support Workspace by clicking on the page drop-down menu in the top-left corner of the page variant editor.
2. Select the Experience link to return to the Experience Editor.
3. Click the + icon next to Pages and Variants.
4. Select Create a new page and choose Standard Record Page Template.
5. Name the page: Related Change.
6. The URL will auto-populate.
7. Click Continue.
8. Review the URL parameters and select Looks good.
9. Leave the page variant name as Default and click Create.
10. Navigate to the cylinder icon in the top-left corner of the page variant editor.
11. Change the Table Parameter to:
change_request.12. Change the sys_id Parameter by selecting any Change record.
13. Click Apply.
Step 3. Adding a Tab to an Existing Page
1. Navigate to an existing page by clicking the page drop-down menu in the top-left corner on the page variant editor.
2. Select the Record Page and choose the Default Page Variant.
3. In the Page Variant Editor, navigate to the Content Tree.
4. Click the three dots beside the Main Tab Component and select Add Tab.
5. In the modal that appears, select Start from an empty container, then click Next.
6. Enter a Tab Label: Related Changes and Problems.
7. The Tab ID property will be auto-populated.
8. Set the Icon Property by searching for Agent Transfer Fill and select it.
9. Click Create.
Step 4. Configuring the New Tab Component
1. In the Content Tree, click + Add Content under Related Changes and Problems (Main Tab > Related Changes and Problems).
2. In the modal pop-up, go to the Layout Tab and select Two Columns layout.
Adding the Related Problem List
1. In Column 1, click + Add Content.
2. Search for List Simple component and select it.
3. In the Component Configuration Panel, click the component name above the preset and edit it.
- Component Label: Related Problem List
- Component ID: related_problem_list
6. Click Apply.
7. Under the Configure Tab, update the Table Property:
problem
8. Click Edit Fixed Filter button, to set conditions.
9. Condition 1: Dot walk to Parent > Incident > Caller.
10. Hover over the third box and click the Bind Data icon, then navigate to: Data Types > Data Resource > Form Controller > Form > Fields > Caller ID > Value.
11. Your display should look like:
@Data.record.form.fields.caller_id.value.
12. Click Apply.
13. Add another condition (AND): Active is true.
14. Click Apply.
Adding Styling
1. Navigate to the Styles Tab
2. Click + icon next to Border Property.
3. Change the Color Property to: Link 3.
4. Click Apply .
Adding the Related Change List
1. In Column 2 (Related Change and Problems>Column Layout>Column2), click + Add Content.
2. Search for List Simple component and select it.
3. In the Component Configuration Panel, click the component name above the preset and edit it
- Change Component Label: Related Change List.
- Change Component ID: related_change_list.
6. Click Apply.
7. Under the Configure Tab, update the Table Property: change_request.
8. Click Edit Fixed Filter button, to set conditions.
9. Condition 1: Dot walk to Parent > Incident > Caller.
10. In the third box, click the Bind Data icon, then navigate to Data Types > Data Resource > Form Controller > Form > Fields > Caller ID > Value.
11. Your display should look like:
@Data.record.form.fields.caller_id.value.
12. Click Apply.
13. Add another condition (AND): Active is true.
14. Click Apply.
Adding Styling
1. Navigate to the Styles Tab.
2. Click + icon next to Border Property.
3. Change the Color Property to: Selection Primary 3.
4. Click Apply.
Step 5. Creating an Event Handler
Configuring Related Problem List Event Handler
1. Click on the Related Problem List Component in the Stage Panel or Content Tree.
2. In the Component Configuration Panel, go to the Events Tab. You have a preconfigured event 'Reference Link'.
3. Click Add Handler.
4. On the modal that pops up, select Link to Destination event handler.
5. Click Continue.
6. Under the Select Destination choices, select Pages in Current Experience.
7. Choose the Related Problem Page.
8. Hover over the Table Property, click Bind Data Icon, Navigate to: Data Types > Event Payload > Table.
9. Double Click then click Apply.
10. For the Sys ID Property, click Bind Data Icon, Navigate to: Data Types > Event Payload > Sys ID.
11. Double Click then click Apply, then Select.
12. Ensure Open in New Tab checkbox is checked.
13. Click Add .
Configuring Related Change List Event Handler
1. Navigate to the Related Change List Component in the Stage Panel or Content Tree.
2. In the Component Configuration Panel, go to the Events Tab. You have a preconfigured event 'Reference Link'.
3. Click Add Handler.
4. On the modal that pops up, select Link to Destination event handler.
5. Click Continue.
6. Under the Select Destination choices, select Pages in Current Experience.
7. Choose the Related Change Page.
8. Hover over the Table Property, click Bind Data Icon, Navigate to: Data Types > Event Payload > Table.
9. Double Click then click Apply.
10. For the Sys ID Property, click Bind Data Icon, Navigate to: Data Types > Event Payload > Sys ID.
11. Double Click then click Apply, then Select.
12. Ensure Open in New Tab checkbox is checked.
13. Click Add.
Step 6. Testing and Previewing
1. In the Page Variant Editor, open the Preview Drop-down Menu and select Open URL Path.
2. Navigate to the new tab- Related Changes and Problems.
3. Click on any Problem or Change record—you should be redirected to the respective record.
Conclusion
Congratulations! 🎉 You have successfully added a custom tab to your Standard Record Page, allowing you to view related Problems and Changes linked to an incident's caller.
If you found this guide helpful, consider sharing it with peers or teams looking to elevate their UI Builder skills with dynamic pages. If you like this type of content, please mark the article "Helpful", and leave us your topic ideas in the comments.
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 Comment
