- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
UI Builder Essentials Part 6
Table of Contents
Articles Hub
Want to see all of our other articles and blogs related to UI Builder and Workspaces?
You can copy the link above and share it!
Overview
Xanadu
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.
Step 2: Create a Page
1. In the Experience Editor, find Pages and variants. Click the + (plus) icon next to it.
5. Select Build Responsive
6. Click Create.
Step 3. Add a Two-Column Layout
1. In the Content Tree, Under the Body container, click the + Add content button.
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.
Step 5: Add a Client Parameter
1. At the bottom-left corner, select Client State Parameters.
- Name: counter
- Type: Number
- Initial value: 0
Step 6: Bind the Counter Value to the Text
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.
Step 7: Connect the Button to the Text
counter
pill to the top data binding box.
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.
Step 8: But Wait! Theres More!
- Component label: Button
- Component ID: button
- Component label: Increment
- Component ID: increment
Step 9: Test Your Application
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
- 857 Views
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.