In this article, I’ll guide you through the steps to dynamically display cards in a ServiceNow Workspace for child records, such as incidents, with actionable buttons like Assign to Me, Resolve, and more.
Step 1: Create a New Experience
Navigate to All → UI Builder → Experiences, and click New to create a new experience. Provide the required details and save it.
Step 2: Add a List Page
Add a new page using any existing template (e.g., Simple List). Specify the table name you want to show the list of records from, such as incident. This page will show records in a list view.
Note: By default, clicking on a record number won't navigate to the detailed record page. We’ll configure that next.
Step 3: Create a Record Page
Create another page using the Standard Record template. This page will show the details of a selected record. Add a new tab named Overview to display cards related to child incidents.
Step 4: Configure Data for Cards
To fetch related child records, such as child incidents:
- Create a Lookup data resource.
- Set the condition: Parent Incident = sys_id of current incident.
- In the "Fields to return" section, include fields like Short Description, Caller, etc., which you want to display on the cards.
Step 5: Add Cards Using Repeater
- Drag and drop a Repeater component onto the Overview tab.
- Bind the data array of the repeater to the result array of the child incidents data resource.
- Inside the repeater, use Stylized Text, Label-Value, or Stacked Containers to display relevant fields.
Step 6: Add Action Buttons (e.g., Assign to Me)
To enable interactivity, such as assigning a record to the current user:
- Add a Button component inside the repeater (e.g., “Assign to Me”).
- Create a Client State Parameter named childIncident to store the sys_id of the child incident when the button is clicked.
- Create an Update Record data resource.
- Map the button’s click event to update the corresponding child incident. Use:
- Table: incident
- Record Sys ID: row_data.sys_id (from the repeater row)
- Assigned To: session.user.sys_id (available in page properties)
Step 7: Add Additional UI Components
You can further enhance the layout by:
- Adding Attachments and Activity Stream (both available as OOB containers).
- Placing all components inside a Tab Container to ensure alignment and clean navigation.
Step 8: Add a "Resolve" Button with a Modal for Resolution Details
Since resolving an incident requires both a Resolution Code and Resolution Notes, we’ll use a modal to capture this information.
Add a Modal:
Create a new modal and add the following components inside it:
A Container Select to display the Resolution Code choices.
A Text Area to capture the Resolution Notes.
Two buttons: Resolve and Cancel.
Open the Modal on Button Click:
Place a Resolve button inside the repeater (alongside "Assign to Me").
Map an Open/Close GlideModal event to this button.
Ensure the "Open Modal" checkbox is checked.
Specify the modal ID you've created.
Also update a Client State Parameter (childIncident) to store the sys_id of the selected child incident when the modal is triggered.
Fetch Resolution Code Choices Dynamically:
To populate the choices in the resolution code dropdown dynamically, create a Custom Data Resource:
Click the + icon next to Data Resources → Click Create → Select Transform.
Use the following sample script to fetch choices from any table and field
- After creating the data broker add it to the page by clicking on '+' icon in the data resource. Specify the table name and field name.
Store User Input in Client State Parameters:
Create two client state parameters: resolutionCode and resolutionNotes.
When the dropdown and textarea values change, map their onChange events to update these parameters accordingly.
Handle "Resolve" and "Cancel" Button Actions:
For the Resolve button inside the modal:
Map an Update Record data resource to update the selected child incident.
Use the childIncident client state parameter for the sys_id.
Set the following fields:
close_code = resolutionCode
close_notes = resolutionNotes
state = Resolved
After update, add an event to Close the Modal.
For the Cancel button:
Simply map the event to Close Modal, without updating anything.
Conclusion
By following the above steps, you can dynamically display related records as cards in ServiceNow Workspace and add interactive functionality through buttons like Assign to Me and Resolve. This not only enhances the agent experience but also streamlines record updates directly from the workspace.
Additionally, if you want to hide a button after it's clicked (for example, hiding the "Assign to Me" or "Resolve" button once the action is performed), you can do so via the Configure tab of the button component:
Under the Visibility section, add a condition that returns true or false based on your logic.
Output:
Happy Learning,
Likitha
