UI Builder Essentials: Simple Counter Application

[MGOPW]

UI Builder Essentials Part 6

Table of Contents

• Create a Page
• Add a Two-Column Layout
• Add Components
• Add a Client State Parameter
• Bind the Counter Value to the Text
• Connect the Button to the Text
• Changing Component Label and ID

Articles Hub

Want to see all of our other articles and blogs related to UI Builder and Workspaces?

Check out the hub: https://sn.Works/BytesArticles

You can copy the link above and share it!

We Value Your Feedback!

Have any suggestions or topics you'd like to see in the future? Let us know!

Give Feedback

Overview

In this tutorial, you will create a simple counter application in UI Builder. The final app will have a button that, when clicked, increases the number displayed on the page by 1.

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.

📌

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.

Step 1. Open UI Builder

1. In your ServiceNow instance, use the Application Navigator to go to Now Experience Framework > UI Builder. When UI Builder opens, you should see the UI Builder Home screen. 
2. Select the Experiences Tab at the top of the screen.

3. Open the Customer Support Workspace.

Lets create a new page in the Experience Editor.

Step 2: Create a Page

1. In the Experience Editor, find Pages and variants. Click the + (plus) icon next to it.

2. Select Create from scratch instead in the top right corner.

3. Enter the page name "Counter Application". The URL path auto-populates.

4. Click Continue, then Looks good on the next screen. Leave the variant name as Default.

5. Select Build Responsive 

6. Click Create.

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

Step 3. Add a Two-Column Layout

1. In the Content Tree, Under the Body container, click the + Add content button.

2. Search for Two Columns (or select it from the Layouts category).

3. Click to add the Two Columns layout to the page.

Now lets add components!

Step 4: Add Components

1. In the left column, click the + Add content button under the Column 1 container, and search for the Button component. Select it to add it to the page.

2. In the Column 2 container, click the + Add content button and search for the Rich Text component. Select it to add it to the page.

You now have a button in one column and the Rich text component in the other.

Step 5: Add a Client Parameter

1. At the bottom-left corner, select Client State Parameters.

2. Create a new Client State Parameter by clicking the + Add button in the top left and fill in the information as follows:

• Name: counter
• Type: Number
• Initial value: 0

3. Close the Client State Parameters modeless window.

Step 6: Bind the Counter Value to the Text

1. Select the Rich Text component.

2. In the Component Configuration panel to the right, under the Configure tab, hover over Edit HTML until you see the "stacked circles" icon (Data Binding icon).  

3. Click the Data Binding icon.

4. In the Data Binding modal, go to the Data Types tab, select Client States.

5. Drag and drop the counter pill to the top of the Data binding box. You can also press the up arrow that appears on the right side of the pill once you select it.

6. Click Apply.

Step 7: Connect the Button to the Text

1. Select the Button 1 component on the page.

2. In the Component Configuration panel to the right, select the Events tab.  

3. Under the Button Clicked event, click Add handler.

4. Search for update client state parameter, select the card, then click Continue.

5. Under Client State Parameter Name select the counter client state parameter we just created. 

6. Hover over Value to use after triggering event, then select the Bind Data icon (the stacked circles) in the top right corner.

6. In the Data Binding modal, select the Data Types tab if it's not selected.

7. Click on the Client states category, then drag the counter pill to the top data binding box.

8. Select the Formulas tab. Filter the list of formulas by clicking on the Math category.  If you don't see Math in the Formulas tab select the More option. 

9. Select the ADD formula pill and add it to the top data binding box, either by dragging it or clicking the up arrow. Drag the counter pill to the left of the formula, as pictured below.

10. Double-click the text right in the data binding box, enter "1" in to the box. Make sure to include the double quotes to denote this as a string.

10. Click Apply, then click Add.

Step 8: But Wait! Theres More!

As a best practice, you should always update your component and container's names and labels to something appropriate and unique, instead of leaving them with the default name. It's best to do this as you are developing your applications and pages - you really don't want to come back to a page full of Button 3, Container 7, and Rich Text 84... It'll be a pain to figure out what goes where. 

Remember, Component labels should be sentence case, while Component IDs should be lowercase with no spaces, using dashes in-between words.

So to save you the trouble, here's a quick guide on how to do this:

1. Under Column 1, click on the three small dots to the right of the Button 1 component.

2. Click Rename.

3. In the popover that appears, s et the fields as follows:

• Component label:  Button
• Component ID: button

4. Select Apply.

5. For the Rich Text 1 component under Column 2, we now will do the same. 

6. Under Column 2, Select the small dots to the right of the Component name Rich Text 1.

7. Select Rename.

8. Set the fields as follows:

• Component label:  Increment
• Component ID: increment

9. Select Apply.

Step 9: Test Your Application

1. Click the Save button in the upper right corner.

2. Click Preview.

3. Click the button we added to the page, and watch the counter increase!

Bonus round: What's the highest number you clicked to? Leave a comment with your answer! 👀

Conclusion

Congratulations! 🎉  You’ve successfully created the Simple Counter app with a button that dynamically increases a counter, and mastered Data Binding and Formulas in one quick step!

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