Introduction:
Displaying pending approvals for the logged-in user is a common requirement in ServiceNow. In this article, we’ll build a custom UI Builder page that dynamically shows approval records from the 'sysapproval_approver 'table—ideal for managers, approvers, or any user involved in approval workflows.
Step 1: Create the Workspace Page
First, navigate to UI Builder and create a new page in your workspace.
1. Open UI Builder: Go to Now Experience Framework > UI Builder
2.Select Experience: Choose the workspace where you want to display the approvals. 3. Create Page: Click + Page, give your page a name like 'My Approvals' and set the layout as desired
Step 2: Add a Data Resource for Approval Records
You need a data resource that pulls approval records assigned to the currently logged-in user.
- Click on + Add Data Resource and choose Look up multiple records.
- Select the table as 'Approval(sysapproval_approver) ', Click on Edit conditions and write the condition as State is Requested and Approver is (dynamic) Me. Return fields sys_id, document_id, sysapproval
This ensures the data resource returns only the current user's active approval records.
Step 3: Add a Repeater Component
Now, display the approvals using a Repeater
- Drag a Repeater component onto the canvas
- Inside the Repeater, drag in a Card Base Container. This ensures each approval record is visually grouped like a card, improving readability and layout.
- Within the Card Base Container, add the following:
- A Stylized Text component to display values. Bind its value to the repeater item.
- Add A Column Layout to organize buttons like Approve and Reject
Step 4: Configure the "Approve" Button to Update the Approval Record
Once you've added the Approve button inside the Card Base Container, follow these steps to make it functional:
1. Select the Approve Button inside the Repeater.
2.In the Configuration panel, scroll to Events and click + Add Event Handler.
3.Select the Update Record Data source and give the table name as 'Approval(sysapproval_approver)' and Record from the repeater and click on Edit field values and add 'state is approved'.
Step 5 : Set Up Client State Parameters
1. RejectedReason - Stores the rejection comments.
2. RejectedRecord - Stores the sys_id of the rejected record. 
Step 6: Configure the "Reject" Button to Show a Pop-Up and Capture Rejection Details
1. Add a Modal Pop-Up to the Page
- In the UI Builder page structure, drag a Custom Modal component to the page (outside the Repeater).
- Inside the modal, add:
- A Text Area , add an event Update Client State parameter
Inside the same modal, add a Button component.
Label:Submit.
Now configure two Event Handlers for this button:
Event Handler 1 – Update Record choose script.
/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
*/
function evaluateEvent({api, event}) {
return {
table: "sysapproval_approver",
recordId: api.state.RejectedRecord,
templateFields: "state=rejected^comments=" + api.state.RejectedReason,
useSetDisplayValue: null
};
}
Event Handler 2 – Open or close modal dialog.
1. Choose the Custom model that you have created and uncheck the Open modal dialog checkbox.
Step 7 : Add an Update Data Resource and configure the event to refresh the data.
Step 8 : Add the page to your workspace
1. Add the page to your workspace by configuring it through the View Experiences settings on the top right side within the workspace.
Step 9 : Test the Page functionality
Now verify the page — it displays pending approvals of the logged-in user
Click on the Approve button. Verify in the 'sysapproval_approver' table that the state has been updated to "Approved",, and the corresponding card is removed from the view.
Click the Reject button. A pop-up will appear—enter the rejection reason and click Submit to continue.
Verify in the 'sysapproval_approver' table that the state has been updated to "Rejected", the rejection reason is logged in the activity stream, and the corresponding card is removed from the view
