Customize a playbook in UI Builder
Use UI Builder pages and modular components for custom playbook layouts to customize the end user's Playbook Experience in a configurable workspace, Service Portal page, or mobile web page.
Before you begin
- If you don't have a playbook to apply custom layouts to, build a playbook. To learn more, see Building Playbooks.
- Install the latest version of the Playbook Experience and Playbook Experience Component apps from the ServiceNow Store. See Playbook Experience apps.
Role required: ui_builder_admin, admin
About this task
After creating a UI Builder page, you can customize Playbook Experience pages to your needs. Page templates include controllers that can be used with component presets, including the playbook templates. See for more information.
Procedure
Navigate to All > Now Experience Framework > UI Builder.
Open the UI Builder experience that you want to work in, or create a new experience.
The Playbook Experience Builder experience was built for you to customize Playbook Experience. For more information on how to create an experience, see Configure how users interact with your applications in UI Builder
In your UI Builder experience, you can:
- Create a page from scratch,
- create a page from a Standard record template,
- or create a page from a Playbook Experience template. Using a Playbook Experience template speeds up the development process, because the Playbook Custom Layout UI Controller and components are already added to every page, including record generators as of version 25.2. The controller automatically populates all the provided components with data.
Note: You can still create and add custom components when you use a template.
Customizable Playbook templates in UI Builder.
If you're using a Playbook Experience template, Create your page.
- Set up the page details.
| Name | The name of your page. |
| URL Path | The URL path that users navigate to, to access the page. |
2. Review the testing parameters for your page.
| table | Name of the parent table for the playbook. |
| sysID | Sys_id of the record. For a record that doesn't exist, the value is -1. |
| experience | The experience you want to load. |
| selectedPlaybook | The playbook the agent or fulfiller is in. |
| selectedStage | The stage the agent or fulfiller is in. |
| selectedActivity | The activity the agent or fulfiller is in. |
3. Set up your default page variant.
| Name | The name of your page variant. |
| Audiences | The users that can see your page variant. They can be defined by:- Role - Group - User - Company - Department - Location - Script |
| Conditions | Conditions that determine when the page variant is shown. |
4. Open the default page variant you just created.
The new Playbook Experience layout already includes controllers and components populated with data, but there are a few more configurations to make. To make the remaining configurations, go to step 6.
If you used the Standard record template or created your page from scratch, add the Playbook Custom Layout UI Controller to the page.
- From the bottom corner of your new page, select the data icon (
Data icon.\)
2. Select **+ Add**.
3. Search for "Playbook".
4. Under **Data resources**, select **Playbook Custom Layout UI Controller** and click **Add**.
5. Exit the **Data resources** panel.
Configure the Playbook Custom Layout UI Controller you just added.
To allow users to create a new record in this customized Playbook Experience instead of the standard new record form, select a test value pill in the upper left.
The test values popover opens.
Make sure the sysID test value is set to -1, and select Apply.
Test values for your playbook experience, with the table and sysID.
A record generator form is available when you open the preview. You should be able to test the record generator form and confirm that new records are created.
3. You can also update the **table** name or any of the optional parameters:
4. If you want to hard-code the test values instead, navigate back to **Data** > **Data resources panel** > **Local data resource instances**, and select **UI Controller Record Page**.
5. Under the **Config** tab of the controller, add the **Parent SysID** or **Parent Table**.
In the test values popover, these are the **sysID** and **table** fields.
You can enter **context.props.table** in the **Parent Table** field, and **context.props.sysId** for the **Parent SysID** field.
**Note:** Make sure whatever table or record you enter has a playbook.
6. Add the **Playbook Experience** you want to use.
7. Enter values for the other fields, if needed.
| Activity View Mode | View mode used to render Playbook activities in stacked or focused mode |
| Record Generator Query | Encoded Query string to optionally override the query provided for a record generator |
| Selected Playbook Context ID | Optional context ID of selected playbook for deep linking |
| Selected Stage Context ID | Optional context ID of selected stage for deep linking |
| Selected Activity Context ID | Optional context ID of selected activity for deep linking |
8. In the Outputs column, you can select the values you want to hard-code.
The controller is configured and you're ready to add playbook components.
Add playbook components.
In the component tree, select the Main Tab.
The Main Tab panel opens on the right.
In the Main Tab panel, select + Add.
A modal asking "How do you want to build this tab?" displays.
Select Start from an empty container and click Next.
A Tab Settings modal displays.
Give your tab a name and an icon, and click Create.
The tab is added to the component tree and a blank canvas displays.
In the component tree, under your new tab, select + Add component and search for "resizable".
Select the Resizable panes component, give it a name, and click Create.
In the component tree, open the new Resizable panes component you just created.
The panel for your new Resizable panes opens on the right.
Configure as needed, and click Save in the upper right corner.
To add the stage picker, find your new Resizable panescomponent in the component tree, and select + Add component under left.
In your component tree, select the new stage picker.
The panel for your new stage picker opens on the right.
Select the preset for this component from the Playbook Custom Layout UI Controller, and click Save in the upper right corner.
Choose a preset for the component.
A confirmation message is displayed, and the component inputs and events under the **Events** tab in the stage picker panel is auto-populated.
Component configuration.
12. To add the **Playbook Activity Viewer**, find your **Resizable panes**component in the component tree, and select **+ Add component** under **right**.
13. Repeat steps 7j and 7k.
14. To add the **Playbook Modals**, find the tab you created under the **Main Tab** in the component tree, and select **+ Add component**.
15. Repeat steps 7j and 7k for the **Playbook Modals**.
16. Navigate back to the **Playbook Stage Picker**, and determine the orientation of your stage picker.
17. In the upper right corner, click **Open** to preview the playbook layout.
18. Return to UI Builder.
19. Navigate back to your stage picker in the component tree, and determine the orientation of your stage picker in the panel that opens on the right.
Related topics