Customize a playbook in UI Builder

  • リリースバージョン: Australia
  • 更新日 2026年03月12日
  • 所要時間：11分

    • 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.

    始める前に

    • 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

    このタスクについて

    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 Bind data to UI Builder pages using controllers (advanced feature) for more information.

    手順

    1. Navigate to All > Now Experience Framework > UI Builder.
    2. 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, seeConfigure how users interact with your applications in UI Builder
    3. In your UI Builder experience, you can:
      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.
      注:
      You can still create and add custom components when you use a template.

      Select a playbook template.
    4. If you're using a Playbook Experience template, Create your page.
      1. 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.
    5. If you used the Standard record template or created your page from scratch, add the Playbook Custom Layout UI Controller to the page.
      1. 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.
    6. Configure the Playbook Custom Layout UI Controller you just added.
      1. 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.
      2. 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.
        注:
        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.
    7. Add playbook components.
      1. In the component tree, select the Main Tab.
        The Main Tab panel opens on the right.
      2. In the Main Tab panel, select + Add.
        A modal asking "How do you want to build this tab?" displays.
      3. Select Start from an empty container and click Next.
        A Tab Settings modal displays.
      4. Give your tab a name and an icon, and click Create.
        The tab is added to the component tree and a blank canvas displays.
      5. In the component tree, under your new tab, select + Add component and search for "resizable".
      6. Select the Resizable panes component, give it a name, and click Create.
      7. In the component tree, open the new Resizable panes component you just created.
        The panel for your new Resizable panes opens on the right.
      8. Configure as needed, and click Save in the upper right corner.
      9. To add the stage picker, find your new Resizable panescomponent in the component tree, and select + Add component under left.
      10. In your component tree, select the new stage picker.
        The panel for your new stage picker opens on the right.
      11. 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 panescomponent 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.