Configure a record page for a workspace in App Engine Studio (AES). Use containers and components to guide a user through an experience. Each record page is linked to only one data table.

Before you begin

Role required: sn_app_eng_studio.user or delegated_developer. For more information, see Delegate developers using AES.

About this task

Components are the building blocks of your page. Add components to your page to build or customize your workspace experience. For example, add a button component to your page that lets users submit requests.

A container is a type of component that can contain other components. Containers have layout properties applied to them. Change the page layout and visual styling to make the record page a unique experience.

Note: Starting with workspaces built after the AES Workspace UI Template v22.0.3 release, you can work with record pages in Workspace Builder. For older workspaces, you must edit the record pages in UI Builder.

If you don't see the record page for a table you configured for the workspace, see this Knowledge article for more information.

Procedure

  1. Navigate to All > App Engine > App Engine Studio.
  2. From the My Apps page, open your application.
  3. Next to the workspace you created, select the additional actions icon (Additional actions icon) and then select Edit.

    You can also select the bar that lists the workspace in the Experience section of your app.

    Figure 1. Edit a workspace
    Select to edit a workspace
    The workspace appears in Workspace Builder.
  4. Create a record page.
    AES automatically generates record pages for the tables that you selected when you created the workspace.
    1. In the Workspace Builder header, from the Record pages menu, select + Create new.

      Create a new workspace from the Record pages menu.

    2. On the form, fill in the fields.
      Table 1. Record page settings
      Field Description
      Name Brief name that identifies the purpose of the record page.
      Table Table that the record page is linked to and updates.
      The following rules apply:
      • If you're using a table that you or someone at your organization created, the table must contain at least one new field or column. Otherwise, the form view and the record for the table can't be created.
      • You can link each table to only one record page.
      You can select from two sections: Tables that are already available in your app, and all tables outside the app scope.
    3. Select Create.
    4. Select View record page.

      View record page button highlighted in the Create a record page modal.

    The page appears in the preview panel. You can select the page from the Record pages menu.
  5. Edit the record details for the record page.
    1. In the navigation panel, select Record details.

      Record page details

    2. In the Form details section of the configuration panel, select Edit form and fill in the fields.

      Configuration panel with form details section highlighted.

      Table 2. Form details for record page
      Field Description
      Form details Select the Edit form link to edit the form in a Table Builder tab inside AES.
      Note: After you leave the record page in the Table Builder tab, a dialog prompts you to Reload this page.

      For more information on editing forms for a record page, see Forms in Table Builder.
      Activity stream Option to enable the Activity stream for the record page.

      The Activity stream enables your workspace users to communicate with requesters and make internal notes about the work done on a record. For more information on the Activity stream, see Activity streams.
  6. Configure the related information in the Related information section of the configuration panel for the record page.
    Related information includes tables that are related to the record, which appear as tabs, such as Child Incidents. For more information on configuring related information, see Related lists.
    Note: You can't create a table for the related information in a record page. The table must exist in ServiceNow AI Platform.
    1. If no related lists exist yet, add a new related list by selecting + Add tabs in the Releated information section.

      Configuration panel with related information section highlighted

      If related lists exist for the record page, select the Manage related information link in the configuration panel.

    2. In the form that appears in a new tab within AES, move the related list that you want to appear as a tab from the Available panel to the Selected panel.
    3. Use the arrow buttons to move the selected lists into the order you want them to appear.
    4. Select Save and return to the Workspace Builder tab within AES.
    5. View the changes that you made by selecting Reload this page in the dialog box that appears.
    Each related information component has an information icon (Information icon) that, when selected, displays its related table.
  7. Provide fulfillers with visibility into cross-business workflows and the actionable tasks used to complete these workflows by specifying the playbook.
    For more information on playbooks, see About Playbook Experience.
    Note: You must have the Playbook Experience plugin installed. If you used a template to create the app, you can't add a playbook to the record page. For details on how to add a playbook for workspaces created from templates, see this knowledgebase article.
    1. In the Playbook section of the configuration panel, select Add a playbook.
    2. On the form, fill in the fields.
      Table 3. Playbook details
      Field Description
      Tab name Label for the record tab that contains the playbook.
      Playbook experience Existing playbook to add to the record.
      Note: You can choose only from the playbooks that are available for the table.
    3. Select Add.
    4. Update the playbook by selecting the settings icon (Icon to edit playbook settings), making the change, and then selecting Update.
      Note: If you want to make additional changes to the playbook, you must open and edit the playbook in Playbooks.
    5. Delete a playbook from the workspace by selecting its delete icon (Icon to delete a playbook from a workspace) and selecting Delete on the confirmation dialog.
  8. Configure the contextual side panel for the record page, which contains the icons for the tools that appear on the right side of the page.
    The contextual side panel contains icons that enable agents to research and resolve issues using various ServiceNow AI Platform tools. If your organization created any custom right tab components in UI Builder, you can add them as well. For more information, see Tabs sidebar.
    Note: If you used a template to create the app, you can't add a contextual side panel to the record page.
    1. In the navigation panel for the record page, select Contextual side panel.

      Contextual side panel for a record page

    2. In the Context side panel settings, select the toggle switch for each component and ribbon component that you want to appear on the record page.
      For example, you can include Agent assist and attachments for the record. Attachments and templates are enabled by default, though you can disable them by deselecting their toggle options.

      To see the ribbon components, set the Ribbon component toggle to on.

      Components side panel with the Ribbon component toggled on.

      To add pre-existing custom components, edit the workspace in UI Builder.
      Table 4. Contextual side panel components
      Tool Type Description More information
      Active SLA Ribbon component Display active Service License Agreements (SLAs) for the case, including time remaining, the SLA state, and any breaches. SLA ribbon
      Agent assist Component Display automatic search results that show possible solutions for records that agents open. Agent Assist
      Attachment Component Add attachments to the record, such as images and PDFs. Attachments
      Configuration Management Database (CMDB) Timeline Ribbon component Display a chronological summary of case activities, including state changes and interactions between the agent and the requester (usually the customer). The ribbon also displays how much time that the fulfiller and requester spent on the case. Timeline ribbon component
      Customer 360 Ribbon component Display customer information, such as the contact or consumer name, email address, and phone numbers. Customer 360 ribbon component
      Ribbon Component Display the contextual side panel ribbon, which contains tools to help agents resolve issues.

      Ribbon components can have additional components added to them.

      		 Viewing ribbon information in the contextual side panel
      Template Component Display templates that help reduce the time agents spend responding to requesters by automatically filling in record fields. Form templates
      The selected tools appear in the record page preview canvas.
    3. In the configuration panel, drag the components to rearrange them.
    4. (Optional) Complete any additional configuration for components by selecting the settings icon (Settings icon for contextual side panel components).
      For example, Customer 360 requires that you specify additional settings before the component works on the record page.
    Workspace Builder automatically saves the changes to the contextual side panel.
  9. Complete any additional changes and configurations.
    OptionDescription
    Update the name of the record page
    Note: You can't change the table that a record page is linked to after you create the page. To change the table for the record page, you should create a separate record page.
    1. From the Record pages menu, select the page that you want to edit.

      A preview of the record page appears.

    2. In the navigation panel, select Settings.
    3. In the Record page settings configuration panel that appears, enter the new page name.
    4. Select Save.
    Preview the record page in a new browser tab Select Preview in the Workspace Builder header.

    The record page appears in the workspace. If no data exists for the table, AES displays a page where you can add data to the table.
    Delete a record page
    1. From the Record pages list, select the page.
    2. In the navigation panel, select Settings.
    3. At the bottom of the configuration panel, select Delete record page.
    4. On the confirmation dialog, select Delete.