Overview
In this tutorial, you'll configure a UI Builder page to create a side-by-side List and Form view. The goal is to dynamically update the form components data based on the selected record from the list.
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 the 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 +(plus) icon next to it.
3. Select Create from scratch instead.
4. Enter the page name "Home Bundle". 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.
Step 3: Configuring the layout
1. In the Component Tree to the left of the UI Builder stage, click + Add Content or use the button in the center of the stage panel.
2. Under Layout, select Two Columns.
Column 1: Adding the List Component
1. In Column 1, click Add Content or click the + (plus) icon in Column 1 on the stage panel.
2. In the Component Toolbox popover, search for
bundle and select the Record List Component Bundle component.
Column 2: Adding the Form Component
1. In Column 2, click Add Content or click the + (plus) icon in Column 2 on the stage panel.
2. In the Component Toolbox popover, search for
bundle and select the Form Component bundle.
3. When prompted, choose the default configuration and click Done.
Step 4: Configuring the List Bundle Component
1. In the Component Tree to the left, navigate to Body > Column Layout 1 > Column 1 and select the Presentational List component.
2. On the right, in the Component Configuration panel, click on the component name above the preset menu to edit it.
3. Set the fields as follows:
- Component label: Incident List
- Component ID:
incident_list
5. Select Apply.
6. On the bottom left of the page, navigate to Data resources and select the List Controller.
7. Under the Configure tab, navigate to the Data tab then the Table property.
8. Remove the existing configuration and select the Incident table. This change automatically reflects on the Table property in the component configuration panel.
9. Click Save in the top-right corner.
Step 5: Configuring the Form Bundle Component
1. Select the Form Component from the stage panel, or navigate to Body > Column 2 > Form Default in the content tree.
2. On the right, in the Component Configuration panel, click on the component name above the preset menu to edit it.
3. Set the fields as follows:
- Component Label: Incident Form
- Component ID:
incident_form
4. Select Apply.
5. Click the Flask icon in the top-left corner of UI Builder to edit the Required Page Parameters. Set them as follows:
- Table:
incident - Sys ID: (select any record)
6. Click Apply to save changes.
Binding Data to the Form Component
1. With the form component still selected, navigate to Data Resources at the bottom left of the page and select Form Controller.
2. In the modal that opens, under the Configure tab, find the Table property.
3. Click the Bind Data Icon, then in the Bind data modal, navigate to the Page Properties category, click on the props pill, then select the table pill.
4. Next, we will follow the same steps to bind the Sys ID property.
5. Click the Bind Data Icon next to the Sys ID property, navigate to the Page Properties category, select the
props pill, then select the sysID pill.
6. Click Save in the top right corner.
These changes automatically reflects on the Table and Sys ID property in the component configuration panel.
Step 6: Creating a Client State Parameter
1. In the bottom-left panel, under Data Resources, click Client State Parameters.
2. In the modal, fill in the fields as follows:
- Name:
sys_id - Type: String
- Initial Value: (leave empty)
3. Click Save, then close the dialog.
Step 7: Updating a Client State Parameter
1. In the bottom left panel, under Data Resources, click List Controller.
2. Go to the Event tab.
3. Find the Reference Link Clicked event and click Add Handler.
4. In the modal, select Update Client State Parameter and click Continue.
5. Under Client State Parameter Name, select the parameter
sys_id 
6. For Value to Use, bind data: Event Payload >
sys_id.
7. Click Apply, then Save.
Step 8: Editing the Form Component's Sys ID
1. Navigate back to Data Resources on the bottom left of the page and select Form Controller.
2. In the modal that opens, under the Configure tab, bind the Sys ID property to the Client State parameter.
3. Click the Bind Data icon next to the Sys ID property, select the Client States tab, then select the
sys_id pill.
4. Click Apply.
After applying this change, the Sys ID property in the Component Configuration panel automatically reflects the update made in the Form Controller.
Testing and Previewing
1. Click the Preview drop-down menu and select Open URL Path in the top-right corner.
2. Select a record from the List component.
3. Verify that the Form Component dynamically populates on the side with the selected record’s details.
Step 9: Exploring Client State Parameters within Components
What if we want a header to display that prompts users to select a record?
1. Click on the Form component or go to Body > Column 2 > Incident Form, then select the “:” beside it.
2. Click Add Before.
3. Search for the Heading Component and select it.
4. On the right, in the Component configuration panel, click on the component name above the preset to edit it. Set the fields as follows:
- Component Label: Incident Form Heading
- Component ID:
incident_form_heading
5. Select Apply.
6. Under the Configure tab for the heading component, set the Label property to
Select a Record.
7. Click on the Component Visibility dropdown at the top of the right panel, and select the Bind Data icon beside the Hide Component property.
8. Click on the Data Types category, select the Client State category, then select the
sys_id pill by dragging and dropping it to the top, or clicking the up arrow next to it. 
9. Navigate to the Formulas tab, search for
empty, and double-click on it to add it to the data binding box.
10. Add an exclamation mark (!) before
empty in the formula so the header will only show when the sys_id is NOT empty.
11. Select Apply, then save.
12. Click on the Form Component Bundle by navigating to Body > Column 2 > Incident Form in the Component Tree panel.
13. Under the Configure tab, hover over the Hide Component property and select the Bind Data icon.
14. Remove the existing data in the top of the Bind data modal window.
15. In the Formulas tab, search for
empty and double-click on the formula pill to add it to the data binding box.
16. Under the Data Types tab, go to the Client State category, then select the
sys_id pill. Double-click to add it, and select Apply.
This configuration ensures that if the
sys_id is empty, the Form Bundle Component will be hidden.Once you hit save, re-test and preview your changes to ensure everything works as expected. You should see the "Select a Record" heading in the top right. Clicking on a record from the list should populate its form on the right.
Conclusion
Congratulations! 🎉 You've successfully created a dynamic List and Form view in UI Builder, allowing form components to update in real-time based on the selected record from the list.
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
6 Comments
