- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
Checklist - Basic configuration
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
admin
You will:
- Create a Workspace Experience using UI Builder.
- Add a Checklist component.
- Configure its parameters.
Step 1. Getting Started
- Log in to your ServiceNow instance.
- Navigate to Now Experience Framework > UI Builder in the filter navigator to open the UI Builder interface.
Step 2. Adding Page
- Select the plus button next to Pages and Variants
- Select Create from scratch instead
- Update Name to "My Checklist"
- Click Continue
- Select Looks good
- Leave variant name as Default then select Continue
- Select Build responsive
- Select Create
Step 3. Adding the Checklist Component
- In the content tree, underneath the Body, select Add content > Components > Content > Checklist > Add
Step 4. Create Checklist Data
- Under Data and scripts > select Client state parameters
- Create the parameter as such:
- Name: checklistData
- Type: JSON
- Initial value: select Edit, then change mode to JSON.
- Copy and paste JSON from below:
[
{
"itemId": "checkbox_1",
"label": "This is item 1",
"checked": false,
"order": 0
},
{
"itemId": "checkbox_2",
"label": "This is item 2",
"checked": false,
"order": 10
}
]
itemId
, label
, checked
, and optionally order
.Step 5. Bind Checklist Data to Component
- On the Component configuration panel navigate to: Configure > Data and display > hover over Checkbox items until you see the stacked circles icon (Bind data) > select the icon
checklistData
changes.Step 6. Capture Users Interaction
- Create a client script: go to Data and scripts > Client scripts > select the small + to the right
/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({ api, event, helpers, imports }) {
// Make a copy of the existing checklist array so we don’t mutate state directly
const clData = [...api.state.checklistData];
// Find the checklist item matching the clicked item and update 'checked'
clData.find((item, i) => {
if (item.itemId === event.payload.itemId) {
clData[i] = { ...clData[i], checked: event.payload.checked };
return true;
}
return false;
});
// Write the updated array back into state to trigger UI updates
api.setState("checklistData", clData);
// Optional: Persist the updated status to backend here
}
Save and Test!
- Select the Save button in the upper right corner of the screen.
- Select Preview to open the preview panel.
- You should now see the two checklist items that were created and be able to select one or both.
Troubleshooting
Conclusion
Congratulations! 🎉 You now have a fully functional and interactive Checklist component within your Workspace. Stay tuned for Part 2 where we cover advanced configurations for the Checklist component!
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.