Utah: Adding a Playbook Record Page Tab to a Workspace Record

[Jon G Lind]

Demonstrate how to add a Playbook Experience tab in a Utah or greater Record Page.  Prior to the new Record Page templates released with Utah it used to be much more difficult (thanks @Arnoud Kooi!), but for new record pages the tabs are configured within UI Builder (UIB).  The new pages will not use the old configurations for rendering tabs, and the old pages cannot use this technique so you will need to determine which solution is correct for your situation.

Verify your version by opening your workspace Record page in UI Builder

People have been attempting to use the prior technique of creating new sys_ux_screen_type, sys_ux_screen and routes and found that it does not work at all in newer Utah record pages but it's not clear why.  This is because a completely different component, which does not use those records, is used to render and edit the tabs.

Record pages created with the Standard Record Page template (and App Engine Studio) in Utah+ should use this new technique.

Should I use the technique described here?

1. Open your Record page in UIB.
2. Verify that you can use this technique by finding “Resizable panes > left > Main Tab” component.  If you have this component, and the page is not read-only, you may proceed with the instructions in the next section.
   
3. If you do NOT see this component, or if your page is read-only, either create a new Record Page variant using the Standard Record Page (afterward making sure that it’s order is the lowest, e.g. -100, so it is the default), or add the tab to the existing page using the old instructions.
   

Add Process Automation Experience Demo Plugin

“System Definition > Plugins”

Process Automation Experience Demo: (sn_pad_demo): Load demo data: True

While not necessary if you already have playbooks configured, it is a good way to get a sample configuration to generate playbook instances so that you may skip (almost) straight to adding the new tab to your workspace.

Generate a Playbook for an Incident Record

If using the Process Automation Experience Demo plugin you can easily generate a new Playbook for an experience record which we will later use in our custom workspace to demonstrate the Playbook tab in action.

Note: If you have already configured your playbooks and have them generated on records you may skip this section.

1. Reload your browser.
2. Open Workspaces > Playbook Workspace Demo from the top header nav.
   
3. On the home page select “Incident” then “Launch Playbook”.
4. Click “Continue” on the first panel of the playbook then save the record.  This is a preview of the Playbook tab which we will add to our own record page later.
5. Copy the table name and sysId from the URL.
   

Open the Record page in UI Builder

1. Return to the record page within UIB and select the “Main Tab” component.
2. Add a new Tab using the “+ Add” link in the Tabs section of the config panel.
3. Choose “Start from an empty container”.
4. Select Tab label of “Playbook” with no icon.
5. Reorder the tabs by dragging them so that Playbook is first.
   
6. Click on the new Playbook tab to activate it in the canvas, where you should now see it next to “Details” and “RelatedList”
7. Use the “+” in the middle of the tab in the designer to add a new Playbook component.
   
8. If it prompts to use presets just select the defaults, then save the page.

Configure the Playbook Component

The playbook component is probably not functioning correctly.  We need to adjust the settings to get it to work.

1. Select the Playbook 1 component you just added. 
2. Set the following two properties using the little database icon then save the page:

Parent table	@context.props.table
Parent Sys ID	@context.props.sysId

3. You may notice that there are no playbooks available for this record.  Fix that by clicking on the little pills in the top left of the canvas next to the Erlenmeyer flask to set the table to “incident” and the sysId to the value you saved earlier.  The form should be rendering in the canvas again.
4. Use the “Open” button in the top right to view the page with the new Playbook tab included.  That's it!
   

[UIB Whisperer]

@Jon G Lind Thank you for this article, it was really helpful to understand how Playbooks can be added moving forward. I would also add to this process the creation of a "Record has Playbook" data resource to determine which records have Playbooks so the "Playbook" tab can be hidden if they don't.

For everyone, the process of adding this data resource is the following:

• Creating the Data Resource: Create a new Transform data resource, called "Record has Playbook", with the following properties and script. Also, don't forget to create an ACL for this new data resource.

// Properties
[
	{
		"name": "table",
		"label": "Table",
		"description": "Should have the name of the table for the selected record",
		"fieldType": "string",
		"mandatory": true
	},
        {
		"name": "sysId",
		"label": "Sys ID",
		"description": "Should have the sys_id of the selected record",
		"fieldType": "string",
		"mandatory": true
	}
]​

// Script
function transform(inputs) {
	if(!inputs.table || !inputs.sysId) return false;

    var grPlaybookCheck = new GlideRecord(inputs.table);
    if (inputs.sysId == -1) {
		grPlaybookCheck.newRecord();
	} else if (!grPlaybookCheck.get(inputs.sysId)) {
		return false;
	}

    return sn_playbook.PlaybookExperience.parentRecordContainsPlaybook(grPlaybookCheck);
}

• Adding the data resource: Refresh UI Builder if you have it open and add the data resource to the page by searching for it.
• Hiding the Playbook Tab: On the "Main Tab" component, under the "Settings" pane, for the "Playbook" tab, click the settings icon and turn the "Hide Tab" property into a data resource one. After that, simply add the following code (If you change the name of the data resource, this might be different!).

!@data.record_has_playbook_1.output​

[chrisperry]

@UIB Whisperer I have been looking for exactly this! Thank you so much

[Christophe_E]

@UIB Whisperer Thanks a lot, very usefull!

Additional guidance to create an acl for the Data resource here (I refer to this part of the post of Martin "Also, don't forget to create an ACL for this new data resource."):

Exercise: Create a Data Resource | ServiceNow Developer

I hope that this whole "Display playbook only if there is one" will become standard in future versions as this definitively make sense and all customer that use playbook need it.