--- sourceDocument: Australia Customer Service Management sourceDocumentLink: https://www.servicenow.com/docs/r/australia/customer-service-management Release : - australia ft:locale : - en-US ft:publication_title : - Australia Customer Service Management ft:clusterId : - csm bundleId : - csm workflow : - Customer and Industry --- # Page components # Page components {#ariaid-title1} Release version: Australia Updated March 12, 2026 ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) 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 Page components Page components are modular building blocks that compose playbook record pages in ServiceNow, enabling agents to efficiently work through cases. These components---such as stage pickers, activity viewers, and contextual side panels---are included in playbook page templates and can be customized by administrators using UI Builder to tailor the workspace for specific use cases and personas. Show full answer Show less ## Key Components and Their Functions * **Page Header:** Displays primary and secondary record information like short description, priority, and contact details. It is configurable to meet specific needs. * **Action Bar:** Provides context-sensitive actions such as creating records, composing comments or emails, saving changes, and accessing additional actions. Actions depend on user role, case state, and attributes, and are customizable. * **Playbook Name and Picker:** Shows the active playbook and allows selection among multiple playbooks on a record. * **Stage Picker:** Visualizes playbook stages horizontally or vertically with icons indicating status (complete, current, locked) to help agents track progress. * **Activity Picker and Viewer:** Lists activities for the current stage and displays detailed work areas where agents complete tasks, fill forms, and manage attachments. * **Activity Cards:** Present detailed information within activities, assisting agents in completing required work. * **Contact/Consumer Lookup:** Enables searching, linking, editing, and quick access to contact or consumer information, including initiating emails or calls directly from the record. * **Case Summarization:** Allows agents to summarize case details and post to the activity stream. This requires the Now Assist for Customer Service Management (CSM) application. * **Record Details:** Contains collapsible sections for case notes, closure info, and related records, plus additional form actions accessible via the Record Details button. * **Contextual Side Panel:** Offers tabs such as Activity Stream, Agent Assist, Search, Related Items, Attachments, and Templates to support agent research and resolution tasks. * **Activity Stream:** Displays ongoing case activities in a collapsible list for quick status updates or detailed review. * **Related Items:** Provides expandable lists of related records with actions like create and view all. * **Modeless Dialogs for Compose Email and Comments:** Facilitate creating and posting communications without interrupting the main workflow. ## Customization and Flexibility All components come preconfigured in playbook page templates but can be rearranged, removed, or supplemented with custom components using UI Builder. Administrators can configure page variants, headers, UI actions, and contextual side panel tabs to suit organizational and agent requirements. ## Multiple Form Controllers This feature allows page authors to add multiple form components within UI Builder templates, improving integration of inline tabs and modals with dedicated form controller instances. It enhances usability and performance on playbook pages with horizontal or vertical stages and supports embedding custom component bundles with forms. This enables seamless updates and notifications within record pages. ## Practical Benefits for ServiceNow Customers * Provides a structured, modular interface that guides agents through case resolution efficiently. * Facilitates rapid access to critical record information, communications, and related records. * Supports customization to align with unique workflows, roles, and use cases. * Improves agent productivity with intuitive tools like stage and activity pickers, contextual insights, and modeless dialogs. * Leverages advanced features such as multiple form controllers to optimize performance and flexibility in UI design. Page components are the modular building blocks of a playbook record page, including the stage picker, activity picker, activity viewer, and contextual side panel that agents use to work through a case. Playbook page templates include modular components that make up the playbook record pages and enable administrators to build playbook pages in [UI Builder](https://www.servicenow.com/docs/access?context=ui-builder-overview&version=australia&pubname=australia-application-development&ft:locale=en-US). The following components are available on the playbook workspace page. {#csm-playbook-templates__table_rvn_hs3_1xb__entry__2} | 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. {#csm-playbook-templates__ul_y5l_ss3_1xb} You can configure the fields that appear in the page header. For more information, see [Customize the page header for a playbook page](https://www.servicenow.com/docs/EGWFdLvmkz20~JtFTmCxqQ "Customize the page header by defining the primary and secondary fields that are displayed in CSM Configurable Workspace."). | | 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](https://www.servicenow.com/docs/2wQrBj~ZGYg_h1RQPqdP1g "Use modeless dialogs, windows that overlay the main window content, to create and post comments and work notes to the activity stream and to compose and send emails.") 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. {#csm-playbook-templates__ul_acv_bcv_51c} You can configure the actions that are included in the action bar. For more information, see [Customize UI actions for a playbook page](https://www.servicenow.com/docs/IaQcjN4m3W0pOBoR2ETVDA "You can customize the UI actions that appear in the action bar for a playbook page or page variant."). | | 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. | | Playbook picker | A playbook picker can be used to select a playbook in the user interface. A playbook picker is available if there are multiple playbooks on a record. | | Stage picker | A stage picker displays the stages in a playbook and gives the user a complete view of the playbook and where they are within it. A stage picker can be oriented horizontally or vertically. The horizontal stage picker displays the playbook stages across the top of the record page below the page header. The vertical stage picker displays the playbook stages and activities on the side of the record page. The stages include icons that indicate the stage status: * A check mark indicates that the stage is complete. * A pen icon ![Pen image.]() indicates the current stage. * A lock icon indicates that a stage is locked and can't be started until the previous stage is complete. {#csm-playbook-templates__ul_w1x_dt3_1xb} | | Activity picker | The activity picker displays the activities for the current stage. Each activity has an indicator that shows the activity state: * Complete (![circle icon with green check mark symbol]()) * In Progress (![purple filled circle icon with white pencil symbol]()) * Pending (![circle icon with purple lock symbol]()) * Skipped {#csm-playbook-templates__ul_gf4_g13_zjc} The list of activities for the current stage can be expanded or collapsed. Selecting an activity displays its details in the activity viewer. 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/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. {#csm-playbook-templates__ul_ny1_ybw_q1c}For more information, see [Playbook lookup component](https://www.servicenow.com/docs/6leSuoA5XF~C4sjbPRDmcA "The playbook lookup component enables agents to look up contact and consumer records."). | | 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. {#csm-playbook-templates__ul_sr2_zvh_v1c} 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](https://www.servicenow.com/docs/6bs5O0uTP5TKBS4ofRVNYQ "The playbook case summary component provides agents with a summary of a customer service case, including the issue and the actions taken. Agents can generate summaries to understand case context and post summaries to the case work notes."). | | Record details | The case details component includes collapsible sections for: * Case * Notes * Closure Information * Related Records {#csm-playbook-templates__ul_ugg_ccw_q1c} 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. * [Activity Stream](https://www.servicenow.com/docs/hK5lcHXguexk3GgCaP1Oug "The activity stream component displays a list of activities occurring on a case record.") * Agent Assist * Search * [Related Items](https://www.servicenow.com/docs/hnLOOUz_Wdskpd0388GH4Q "The related items component provides access to the case-related lists.") * Attachments * Response Templates * [Email Templates](https://www.servicenow.com/docs/access?context=configure-email-templates&version=australia&pubname=australia-platform-user-interface&ft:locale=en-US) * Templates * Record Information {#csm-playbook-templates__ul_sfk_wcw_q1c}For more information about the tabs in the contextual side panel, see [Playbook contextual side panel component](https://www.servicenow.com/docs/lCc0gf9YBx_N3iKTkLq2iQ "The playbook contextual side panel component provides agents with access to tools and information such as the activity stream, templates, and attachments."). | | 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](https://www.servicenow.com/docs/hK5lcHXguexk3GgCaP1Oug "The activity stream component displays a list of activities occurring on a case record."). Note: The Case playbook: horizontal stages page uses [modeless dialogs](https://www.servicenow.com/docs/2wQrBj~ZGYg_h1RQPqdP1g "Use modeless dialogs, windows that overlay the main window content, to create and post comments and work notes to the activity stream and to compose and send emails.") for composing comments, work notes, and emails. | | Related items | The related items component provides access to record-related lists in an expandable format. Each list shows item cards and supports actions such as Create, View all, and Show more. For more information, see [Playbook related items component](https://www.servicenow.com/docs/hnLOOUz_Wdskpd0388GH4Q "The related items component provides access to the case-related lists."). | | 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](https://www.servicenow.com/docs/2wQrBj~ZGYg_h1RQPqdP1g "Use modeless dialogs, windows that overlay the main window content, to create and post comments and work notes to the activity stream and to compose and send emails."). | [Table 1. Case playbook page template components] {#csm-playbook-templates__table_rvn_hs3_1xb} The components shown above come with the playbook page templates by default. They are a starting point, not a fixed layout. Using UI Builder, administrators can remove components, rearrange them, add custom ones, or create a different page layout for a specific use case or persona. For the full set of customization tasks --- including activating page variants, configuring the page header, customizing UI actions, adjusting the left panel, and configuring contextual side panel tabs --- see [Configure templates and pages](https://www.servicenow.com/docs/VfnJtXtc_WcOy_dXlL8AKw "Use playbook pages in CSM Configurable Workspace so that your agents can view the stages and activities in a playbook, work on activities, and have quick access to in-context information."). ## Using multiple form controllers {#csm-playbook-templates__section_k2j_c5v_xbc} 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 {#csm-playbook-templates__ul_uhp_1wv_xbc} With this feature, page authors can: * Integrate inline tabs with forms that use 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. {#csm-playbook-templates__ul_nlz_bvv_xbc} For more information about using multiple form controllers, see [Add forms to UI Builder pages](https://www.servicenow.com/docs/access?context=add-forms-to-ui-builder-pages&version=australia&pubname=australia-application-development&ft:locale=en-US).