Overview
In this tutorial, you’ll configure a UI Builder page to include a button component that dynamically updates the value of the “Description” field in a form component when clicked.
You will:
- Create a new page in UI Builder
- Add and style a button component
- Configure the button to dynamically update the form’s Description field
Family Release:
XanaduUI Builder Release: 26.2.59
Roles Required: admin
Authored by: @sophiasemga
📢
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 Unified 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. Prepare the page
1. In the Experience Editor, scroll down to find Pages and variants.
2. Select the pre-existing page variant under the Record page.
Editing Required Parameters
We need to edit the required parameters for the page to load and display the proper values in the form record:
1. Click on the flask in the top left corner of the screen.
2. Inside the popover, set the Table to
incident and select a random record for the sysID.3. Click Apply, then Save using the button in the top right corner of the page.
Step 3. Adding a Button Component
1. In the Content tree, navigate to the Body container, then go to Top Container > Top Right > Action Bar. You can also select the Action bar component from the Stage panel preview, then click on the three dots on beside the Save button.
2. Click the three dots and select Add After. This will place the button component before the form.
3. Search for the Button component and select it.
Step 4. Styling the Button
1. Select the Button component you just added from the Content tree.
2. On the right, in the Component configuration panel, click on the (i) button next to the component name above the preset menu to edit it.
- Component label: Clicked Button
- Component ID: clicked_button
5. Select Apply.
6. Below the Configure tab, find the Label property. Type Click Me and hit save.
8. On the Styles tab, add small Padding on the right side of the Button component to give it some space.
9. Save your changes.
Step 5. Creating a Client State Parameter
We need to create a client state parameter to store the value for the Description field.
1. In the Client State Parameters section (bottom-left), click the + (plus) icon.
2. Create a new parameter:
- Name: Description
- Type: String (default)
- Initial Value: test
3. Save and close the dialog.
Step 6. Configuring the Button Event
1. Click on the Button component.
2. In the Component configuration panel, select the Events tab.
3. Notice an event has already been preconfigured for us: ‘Button clicked’. By default, this event won’t do anything until we connect it with an event handler that runs the event.
4. Click on Add Handler. A modal will open for us to interact with.
5. In the modal, click on or search for the [Field] Set Value handler and select it.
6. Click Continue.
7. Configure the event handler as follows:
- Field Name: description
8. Bind Value to our client state parameter by clicking on the Bind Data icon on the top right of the field.
9. Under Data types, select Client states, then description.
10. Double-click on it or use the arrow to add it to the upper section, then click Apply.
11. Repeat the same process for Display value, click on the Bind Data icon on the top right of the field.
12. Under Data types, select Client States, then Description.
13. Double-click on it or use the arrow to add it, then click Apply.
14. Click Add then Save to confirm the changes.
Step 7. Testing the Functionality
1. Click the Preview drop-down menu in the top-right corner and select Open URL Path.
2. Test the button. Clicking it should update the Description field on the form to the value set in the client state parameter.
Conclusion
Congratulations! 🎉 You’ve successfully created a UI Builder page with a button that dynamically updates the description field in a form component!
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
1 Comment
