UI Builder Essentials Part 10

Table of Contents

• Open UI Builder
• Create a Page
• Adding a Layout and Data Visualization Component
• Creating the List Page
• Configuring the List Component
• Linking Pie Chart to the List Page
• Testing and Previewing

Article Directory

Part 1 - Six Fundamental Features You Need to Know Part 2 - Navigating UI Builder Part 3 - Dynamically bind List with Data Visualization Part 4 - Implementing Popovers Part 5 - Updating Component's Data with a Button Part 6 - Simple Counter Application Part 7 - Interactive List and Form Configuration Part 8 - Modals and Modeless Dialogs Part 9 - Troubleshooting Part 10 - Data Viz to Custom List Page

Overview

In this tutorial, you will create a dynamically filtered list - a Pie Data Visualization that redirects you to a filtered list.

Family Release: Xanadu

UI 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. Create a Page

1. In the Experience Editor, find Pages and variants.

2. Click the + icon next to it.

3. Select Create from scratch instead.

4. Enter the page name "Viz-Filtered". The URL path auto-populates.

5. Click Continue, then Looks good on the next screen.

6. Leave the variant name as Default or rename it.

7. Select Build Responsive.

8. Click Create.

You should now have an empty Page, that's ready to be built upon, so let's add a layout.

Step 3. Adding a Layout and Data Visualization Component

1. In the Content tree, under Body, click Add Content or click the +Add content button on the stage panel.

2. Select Single Column.

3. Under Column 1, click + Add Content.

4. Search for Data Visualization and select it.

5. Navigate to the Component Configuration Panel on the right, click on the component name above the Preset Menu to edit it.

6. Change Component Label : Filtered Pie

7. Change Component ID: filtered_pie

8. Click Apply.

9. Under the Configure tab, set Data Visualization type to Pie.

10. Under Data Sources , click + Add Data Source button.

11. In the Search Sources menu, search for incident and select it.

12. Click Add this Source.

13. Back in the page editor, notice that under the Configure tab, a predefined Metric property and a Group By property that's set to Active, which allows you to categorize active and inactive incident records.

Remember to SAVE your changes at the top-right corner!

Step 4. Creating the List Page

1. Click the dropdown at the top-left of the page editor (next to the workspace name) and select Experience.

2. Click the + sign next to Pages and Variants, then select Create a New Page.

3. Choose Create from Scratch.

4. Enter the Page Name: Filtered List.

5. Click Continue, then Looks Good.

6. Leave the Variant Name as Default or rename it.

7. Select Build Responsive, then click Create.

8. In the Content Tree, under Body, click + Add Content.

9. Select Single Column Layout.

10. Under Column 1, click + Add Content (or use the + Icon on the stage panel).

11. Search for 'list' and select Record List Bundle Component.

12. In the Content Tree, navigate to Column 1 > Record List > Presentational List.

13. In the Component Configuration Panel, click the Component Name above the Preset Menu to edit.

14. Change Component Label: Filtered List.

15. Change Component ID: filtered_list.

Step 5. Configuring the List Component

1. Navigate to Data and Scripts > Data Resources and select List Controller.

2. In the modal, click the Configure tab.

3. Unde*r* Data > Table, enter incident.

4. Click the Cylinder Icon in the top-left to edit the List Page Parameter - listID.

5. On the listID menu add - params.query (the client state parameter created earlier which stores the filtered query for the data visualization component ).

6. Click Apply.

7. Navigate back to List Controller under Data Resources.

8. In the Configure tab, click Edit Fixed Filter button.

9. Click the Bind Data icon next to Edit Fixed Filter button.

10. In the modal, select Page Properties > Props > listId.

11. Double-click listId .

12. Click Apply.

You now have a list that will dynamically update based on the filtered query!

Step 6. Linking the Pie Chart to the List Page

1. Return to the Pie Chart (Viz Filtered) page by selecting it from the Dropdown on the top-left hand corner of page editor.

2. On the Component Configuration Panel , navigate to the Events tab.

3. Click Add Handler, then choose Link to Destination (this will navigate to the filtered list page).

4. Click Continue.

5. Under Select Destination choices, choose Pages in Current Experience.

6. Select the Filtered List page.

7. A side panel appears— to set the Path for the List Page.

8. On the listId menu, click the Bind Data icon.

9. In the modal, under Data Types, select @payload.params.query (Event Payload > params.query).

10. Double-click to add it.

11. Click Apply, then click Select.

12. Check the Open in New Tab checkbox to open the filtered list in a separate tab.

12. Click Add.

Click SAVE at the top right corner!

Step 7. Testing and Previewing

1. Click the Preview drop-down menu and select Open URL Path in the top-right corner.

2. Click True on the right of the Pie Chart → should navigate to a filtered list of active incidents.

3. Click False on the left of the Pie Chart → should navigate to a filtered list of inactive incidents.

Troubleshooting

Don't Panic! If the functionality doesn’t work as expected, try clearing the UI Builder cache:

• Within your page variant editor in UI Builder, select the menu above the content tree and

Go to the Developer → Clear UI Builder Cache.

Conclusion

Congratulations! 🎉 In this article, we've created a list page that is dynamically filtered and opened when clicking on a data visualization.

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