Playbook page templates

  • Release version: Xanadu
  • Updated August 1, 2024
  • 7 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Playbook Page Templates

    Playbook page templates enable ServiceNow customers to build configurable pages and page variants within Customer Service Management (CSM) Configurable Workspace. These templates provide agents with horizontal or vertical playbooks to guide them through tasks and case resolution efficiently. Available with the Playbooks for Customer Service Management application, these templates are modular and customizable but are inactive by default and require activation before use.

    Show full answer Show less

    Available Templates and Layouts

    • Case playbook: horizontal stages – Features a horizontal stage picker at the top and a persistent left panel. Suitable for workflows with multiple stages displayed across the top.
    • Case playbook: vertical stages – Features a vertical stage picker on the left side, displaying stages and activities in a vertical list. Useful for tracking overall progress in a vertical view.

    Considerations include managing stage name lengths to prevent truncation in the horizontal layout.

    Key Components

    The templates include modular components designed for quick assembly in UI Builder. These components enhance agent productivity and include:

    • Page header: Displays key record information such as short description, priority, state, and contact/consumer details; customizable fields.
    • Action bar: Contains context-sensitive actions like creating records, composing comments/emails, saving, and additional actions based on user role and case state; configurable for tailored workflows.
    • Playbook name: Displayed prominently above the stage picker (horizontal) or at the top of the vertical stage picker.
    • Stage picker: Horizontal or vertical display of playbook stages with status icons (complete, current, locked) allowing agents to navigate stages and view activities.
    • Activity picker: Lists activities within the current stage, showing status indicators and allowing expansion/collapse to focus on relevant tasks.
    • Activity viewer and activity cards: Main workspace for agents to complete tasks such as filling forms, managing checklists, and handling attachments.
    • Contact or consumer lookup: Enables search, linking/unlinking, editing, and quick access to contact details, email composition, and phone calls directly from the playbook.
    • Case summarization: Allows agents to summarize case details and post to activity streams; requires Now Assist for CSM.
    • Record details: Collapsible sections for case notes, closure info, and related records, with form personalization and data export options.
    • Contextual side panel: Provides tabs for activity stream, agent assist, search, related items, attachments, response and email templates, and record information to support issue resolution.
    • Activity stream: Displays detailed or summarized views of case activities, supporting transparency of case progress.
    • Modeless dialogs: Used on horizontal pages for composing comments, work notes, and emails without disrupting workflow.

    Advanced Features

    Multiple form controllers allow page authors to add multiple form components to UI Builder templates, enhancing page flexibility and performance. This feature supports inline tabs, custom component bundles, and modals with forms that communicate updates back to the main page. It is supported in both horizontal and vertical playbook templates.

    Practical Benefits for ServiceNow Customers

    • Enable agents to follow structured, visual playbooks that improve task completion and case resolution.
    • Customize pages and actions to fit organizational workflows and agent roles.
    • Use flexible UI components to display relevant case and customer information in context.
    • Leverage modeless dialogs and multiple form controllers to streamline agent interactions and enhance UI responsiveness.
    • Integrate case summarization and lookup tools to improve customer engagement and case documentation.

    Use playbook page templates to create pages and page variants for use in CSM Configurable Workspace. These pages and page variants provide agents with either horizontal or vertical playbooks that they can use to complete tasks and resolve cases.

    The following page templates are available with the Playbooks for Customer Service Management application [com.sn_csm_playbook]. For more information, see Playbook plugins.
    Table 1. Playbook page templates
    Page template Description
    Case playbook: horizontal stages Includes a horizontal stage picker that displays across the top of the UI and shows persistent information in the left panel.
    Case playbook: vertical stages Includes a vertical stage picker that displays in the left panel. This stage picker can track overall progress on the UI in a vertical view.
    Considerations for using these page templates include the number of stages that appear in the picker and the length of the stage names. For example, longer stage names in the horizontal playbook can be truncated.
    Note:
    By default, the playbook page templates are not active. To activate a page template, see Activate a playbook page or page variant.

    Case playbook: horizontal stages page template

    The Case playbook: horizontal stages page template includes a horizontal stage picker across the top of the page and an activity picker on the left side. For details about the components included in this template, see Playbook template components.

    Figure 1. Case playbook: horizontal stages page template
    Case playbook: horizontal stages page template with a stage picker that displays across the top of the user interface

    Case playbook: vertical stages page template

    The Case playbook: vertical stages page template includes a vertical stage picker on the left side of the page. For details about the components included in this template, see Playbook template components.

    Figure 2. Case playbook: vertical stages page template
    Case playbook: vertical stages page template with a stage picker that displays on the side of the user interface

    Playbook page template components

    The playbook page templates include modular components that enable you to quickly build playbook pages in UI Builder.

    Table 2. Case playbook page template components
    Component Description
    Page header The page header includes record information that is displayed in the primary and secondary fields:
    • The primary field displays the short description of the record.
    • The secondary fields display the additional record information such as the priority, state, and contact or consumer details.

    You can configure the fields that appear in the page header. For more information, see Customize the page header for a playbook page.
    Action bar The action bar contains the actions that are available to users while working on case records. The available actions are determined by factors such as the user role, case state, and other attributes.
    • Record Details: Displays the record details.
    • Playbook Details: Displays the playbook details.
    • In-progress actions: Provides a list of minimized modeless dialogs and includes a badge that displays the number of items in the list. From this list, an agent can select an item to open the minimized comment, work note, or email.
    • Create: Create records such as requests, incidents, and work orders.
    • Compose: Compose comments, work notes, and emails in modeless dialogs.
    • Save: Save changes to the case record.
    • More Actions: Perform additional actions such as proposing a major case or reporting a knowledge gap.

    You can configure the actions that are included in the action bar. For more information, see Customize UI actions for a playbook page.
    Playbook name In the Case playbook: horizontal stages template, the playbook name appears in the form header above the horizontal stage picker.

    In the Case playbook: vertical stages template, the playbook name appears at the top of the vertical stage picker.
    Stage picker The playbook templates include either a horizontal or vertical stage picker, which gives the agent a complete view of the playbook and where they are within the playbook.
    • The horizontal stage picker displays the playbook stages across the top of the record page below the page header. Select a stage to see the activities in the activity picker.
    • The vertical stage picker displays the playbook stages and activities on the side of the record page. Select a stage to expand the stage and display the included activities.
    The stages in the stage picker include icons that indicate the stage status:
    • A check mark Check mark image. indicates that the stage is complete.
    • A pen icon Pen image. indicates the current stage.
    • A lock icon Lock image. indicates that a stage is locked and can’t be started until the previous stage is complete.
    Activity picker The activity picker displays the activities for the current stage. Each activity has an indicator that shows the activity state:
    • Completed
    • In progress
    • Remaining

    With the horizontal stage picker, you can expand or collapse the list of activities for the current stage.

    With the vertical stage picker, you can expand each stage to see the activities within that stage.

    Selecting an activity displays the details in the activity viewer.
    Activity viewer The activity viewer displays the selected activity. This is the main work area where an agent performs the work necessary to complete the current activity.
    Activity cards Activity cards display the details about the current activity in the activity viewer. Depending on the type of activity, the activity cards can display information such as form data, task status, SLA timers, or attachments.

    Agents use the cards to complete the work for each activity, such as filling in forms, completing checklists, completing tasks, or adding attachments.
    Contact or consumer lookup The lookup component enables agents to look up contact or consumer information and display that information in a record card. These cards display customer information and provide quick access to details such name, email, and phone. The contact record card also includes account information.
    Agents can use the lookup component to do the following:
    • Search for a contact or consumer.
    • Link or unlink a contact or consumer record.
    • Edit and save the information in a linked contact or consumer record.
    • Select a reference field on a record card, such as a contact or consumer name, to open the reference in a sub-tab.
    • Select an email address on a lookup card to open a draft email in the email composer in a sub-tab.
    • Select a phone number on a lookup card to make a call.
    For more information, see Playbook lookup component.
    Case summarization The case summarization component appears below the lookup component. When an agent opens a case record, the component is collapsed and in the default state.
    Agents can use this component to do the following:
    • Summarize case details.
    • Post the summary to the activity stream.
    • Refresh the summary.

    The case summarization component requires the Now Assist for Customer Service Management (CSM) application to be activated and configured. For more information, see Playbook case summarization component.
    Record details The case details component includes collapsible sections for:
    • Case
    • Notes
    • Closure Information
    • Related Records

    This component also includes a menu with additional form actions, such as personalizing the form, exporting data, and copying the URL.

    Agents can view case details by selecting the Record Details button in the action bar.
    Contextual side panel The contextual side panel component includes different tools that agents can use to research and resolve customer issues. The contextual side panel in the Case playbook: horizontal stages page includes the following tabs.For more information about the tabs in the contextual side panel, see Playbook contextual side panel component.
    Activity stream The activity stream component displays a list of activities occurring on a case record. This list can be collapsed to provide a quick view of case activities or expanded to provide more detail about individual activities.
    For more information, see Playbook activity stream component.
    Note:
    The Case playbook: horizontal stages page uses modeless dialogs for composing comments, work notes, and emails.
    Compose email and Compose comments modeless dialogs A modeless dialog is a window that overlays the main window content. You can use modeless dialogs to create and post comments and work notes to the activity stream and to compose and send emails as you work through the stages and activities in a playbook. For more information, see Playbook modeless dialogs.

    Using multiple form controllers

    The multiple form controller feature enables page authors to add multiple form components to UI Builder templates. This feature is available with the following playbook page templates:
    • Case playbook: horizontal stages
    • Case playbook: vertical stages
    With this feature, page authors can:
    • Integrate inline tabs with forms that utilize dedicated form controller instances, eliminating the need for page collections and enhancing UI Builder usability and runtime performance.
    • Enhance record pages with custom component bundles that include a form controller.
    • Incorporate modals containing forms into record pages, facilitating the transmission of notifications and form updates back to the main page.

    For more information about using multiple form controllers, see Add forms to UI Builder pages.