UI Builder Essentials: Link to Destination Opens a List Page That Is Filtered by Clicking a Data Viz

[Maria Gabriela]

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. Under 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

[Community Alums]

hello was folllowing this tutorial

 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 ).

Please I am stuck here. where do we edit the lisID?

[sophiasemga]

List ID is an optional parameter located at the top left hand corner of the list page variant editor and that’s where you edit the list ID

[Community Alums]

Thank you!! I'll check it out. Would you by any chance have tutorials for when we want to make the table also dynamic? same list page being used for multiple pie charts for example?

Appreciate the help in advance.

Thanks,

Shreya

[Maria Gabriela]

Hi Shreya! I don't think we have that on our list, but i've gone ahead and added the use case. Thank you! If you'd like to submit more article ideas, please feel free to fill out our survey: https://sn.works/BytesSurvey 

[beccintech]

Hi @Maria Gabriela & @sophiasemga , thank you for this guide! I followed these steps with the same type of data visualization (pie), created the list page, etc. When I click on the pie, a new tab does open with the list but it shows ALL the records from my data source - not the filtered records based on the pie section I clicked. Also the list opens in a new browser tab - I thought this would open in a new tab within the workspace. Any guidance is appreciated!

[beccintech]

One more question, @Maria Gabriela & @sophiasemga - does this work for saved data visualizations added to a page or only for visualizations that were built from within UI Builder? I have tried to add the link to destination handler for a saved visualization and the correct data pill (params.query) isn't appearing when attempting to bind the data.

[sophiasemga]

@beccintech 

If the visualization was created outside UI Builder (like in Performance Analytics or Reports), it doesn’t inherit the context or parameters from the UI Builder page because it’s not truly “aware” of the page-level data state or bindings like “params.query”.

The reason “params.query” doesn’t show up is because saved visualizations aren’t built to accept dynamic input from the UI Builder page. They already have a fixed query from when they were created outside UI Builder, so they don’t know how to respond to things like “params.query”.

If you want to use dynamic filters or pass values like “params.query”, you need to build the visualization directly in UI Builder like this example. That way, it can connect to the page’s data and respond to whatever values you pass in.

[bodireddyud]

Thanks