UI Builder Essentials: Implementing Popovers

[MGOPW]

UI Builder Essentials Part 4

Table of Contents

• Popovers, what are they?
• Create Popover
• Update Rich Text component
• Add Event functionality

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

Overview

In this tutorial, you’ll learn about Popovers and how to implement them in UI Builder!

Family Release: Xanadu

UI Builder Release: 26.2.59

Roles Required: admin

Authored by: @michaelburney

📢

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.
• Dynamically bind List with Data: In this article, we created the Home Base page.

Popovers, what are they?

A popover in UI Builder acts like an overlay or tooltip that appears when a user interacts with a particular UI element. For example, if you're building a dynamic Data Visualization, you might use a popover to display informative details to the end user about interactability (e.g., can filter by click, click to see list updates, etc) when a user hovers over the Data Visualization. This helps maintain a clean UI while making informative or critical information readily accessible.

Scenario

You are building a Data Visualization for your organization's management team. On the page that contains the Data Visualization, you display a list of Incidents. When a user hovers over the Data Visualization, a popover needs to appear alerting the user of additional functionality. This ensures that managers can quickly be notified of additional functionality without any previous knowledge of such.

Lets open our Customer Support Workspace and build it out!

Step 1: Open UI Builder

1. In your ServiceNow instance, use the Unified Navigator to go to Now Experience Framework > UI Builder.

2. When UI Builder opens, you should see the home screen.

3. Select the Experiences tab at the top of the screen.

4. Open the Customer Support Workspace

Step 2. Open Home Base

 

1. Open the Home Base page by selecting the Default variant underneath its page listing.

Step 3. Create Popover

1. In the Content Tree, underneath the Overlays category, select the + (plus icon) next to Popovers, to add a new popover to the page.

2. Select Custom popover.

3. Underneath Container 1, click on the + Add content row.

4. Search for Rich text in the component window.

5. Select Rich text component.

Now the Rich text component has been added to the popover container, so lets give it some content

Step 4. Update Rich Text component

1. In the Content tree, underneath Container 1, select the Rich text 1 component.

2. In the Component Configuration panel, underneath the Configure tab, hover over the Edit HTML button, select the Data Bind icon (stacked circles).

3. In the Bind data to HTML window, navigate to the Formulas tab.

4. Select the  String category on the left.

5. Select the CONCAT formula. Once it's selected, a small arrow should appear. Select the small arrow to move the formula pill to the top of the window.

6. Double click value1 then change the entry to "query invoked: " (including double quotes).

7. Double click the values pill, then navigate to the Data types category on the left, next to Formulas.

8. Select the Client states category.

9. Select queryParam pill, then select the small arrow that appears to add it to the formula.

10. Click Apply.

Step 5. Add Event functionality

1. On the Content tree, underneath Column 1, select the Pie 1 component.

2. In the Component configuration panel, select the Events tab.

3. Click the Add event mapping button.

4. In the Event configuration pop up, select the Visualization Clicked event, then click Continue.

5. In the Choose a handler step, select Open popover then click Continue.

6. On the last section, under Configure, select Choose existing.

7. In the Popover field that appears, select Custom popover 1, then click Add.

Step 10. Save and Preview

1. Click the Save button in the upper-right corner of UI Builder.

2. Click the Preview button, or open the experience in a new tab. 

3. Select the slices of the pie chart, you should see a popover with the query of the slices selection.

Conclusion

Congratulations! 🎉 You've now added a dynamic popover to our interactive data visualization! Now we can get further insight into the mechanics of our visualization in real time!

If you found this guide helpful, consider sharing it with peers or teams looking to elevate their UI Builder skills with dynamic visualizations.

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