Configure obligation review for the playbook

Create a page in UI Builder that uses a viewport component to dynamically load obligation review content in the playbook.

Before you begin

Role required: admin

Procedure

Navigate to All > Now Experience Framework > UI Builder.
Select the Experiences tab.
Open your workspace.
Create a new page by selecting the + icon.

[Omitted image "cmpro-new-page-uib.png"] Alt text: Add pages and variants on an experience page in UI Builder.
Select Create from scratch instead.
On the form, enter the Review Obligation List in the Name field.

The URL path will be automatically updated with review-obligation-list.
Select Looks good.
Complete the remaining steps to create the page.

For more information, see Create a page in UI Builder.
Add a viewport component for the page.

For more information on adding a viewport, see Add a viewport component to your page.
1. In the configuration panel, select + Add to attach the ServiceNow Otto for Contract Management Pro page collection.
2. Select Apply default configuration with added URL parameters and then select done.
Create a client script for the page.

For more information on adding a client script, see Define and bind client scripts to components.
1. Select + next to Client scripts.
2. Name your script.
  
  A descriptive name helps you know what the script does. It also makes it easier to find the script later when you add it to an event handler.
3. Add the following script.
  JavaScript
```
function handler({api, event, helpers, imports}) {
api.emit("MACROPONENT_VIEWPORT_LOAD_REQUESTED", {
viewportElementId: 'viewport_1',
route: 'review-obligations',
fields: {
'cntrSysId': api.context.props.sysId,
'diTaskSysId': api.context.props.diTaskSysId
},
params: {}
});
}
```
4. Select Apply.
Select the Body component and then select the Events tab under Page configuration.

[Omitted image "cmpro-page-events-tab.png"] Alt text: Events tab under Page Configuration.
1. Select Add handler under the Page ready section.
2. Select the client script created in step 10.
3. Select Continue.
The client script is bound to the Page ready event. When the page loads, this event handler automatically executes the client script.
If Form Controller is available under Data resources, remove it.
Navigate to the General tab under Settings and verify that table, sysId, and diTaskSysId are available under the Required parameters.

If the parameters are not available, add them manually. For more information on modifying the page settings, see Edit page variant settings.

Parent Topic:Configuring the Playbook tab on contract repository records

title	Configure obligation review for the playbook
description	Create a page in UI Builder that uses a viewport component to dynamically load obligation review content in the playbook.
locale	en-US
canonical_url	https://www.servicenow.com/docs/r/australia/employee-service-management/contract-management-pro/cmpro-add-obligation-playbook.html
release	australia
product	Contract Management Pro
classification	contract-management-pro
topic_type	task
last_updated	2026-09-10
reading_time_minutes	2
breadcrumb	Configure the Playbook tabConfigure CM Pro for your workspaceConfigureContract Management ProLegal and Contract OperationsEmployee Service Management