Add playbook custom layout bundles to a new or an existing UI Builder standard record page.

Before you begin

Role required: admin, ui_builder_admin

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.
  2. In the upper right, select +Create to create a new experience.
  3. Fill in the fields for your experience.
  4. Select Create.
  5. In your new UI Builder experience, select Create new page.

    The Select a template screen displays.

  6. Choose the Standard record template and select Use template.
  7. Set up the page details.
    Name The name of your page.
    URL Path The URL path that users navigate to, to access the page.
  8. Select Continue.
  9. Add the test URL parameters for your page.
    Note: All playbooks require at least a table and sysId to be hardcoded on the controller or provided through a URL.
    Table 1. Required parameters
    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.
    Table 2. Optional parameters
    query Encoded Query string to optionally override the query provided for a record generator.
    extraParams Pass additional parameters to a page.
    views View mode used to render Playbook activities in stacked or focused mode.
    selectedTabIndex The tab that your page opens to by default.
  10. Setup 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.
    The page and default variant are created.
  11. In the success message, select Open in editor to open your new page in the UIB editor.
  12. In the component tree, select the Main Tab.
    The Main Tab panel opens on the right.
  13. Under the Tabs section in the Config tab, select + Add.
    A modal asking "How do you want to build this tab?" displays.
  14. Select Start from an empty container and click Next.
    A Tab Settings modal displays.
  15. Give your tab a name and an icon, and click Create.
    The tab is added to the component tree and a blank canvas displays.
  16. In the component tree, under your new tab, select + Add component.
    The toolbox opens.
  17. Enter "bundle" in the search bar of the toolbox.
    Available bundles are displayed.
  18. Select the bundle you want to add to your page.

Result

You've added a bundle and all its components, presets, and controller to your new UI Builder standard record page.

If the width of the bundle container is set to the min-width of the component, set the min-width of the container to 100%.

Sizing settings under the bundle container Styles tab

Alternatively, you can set the flex-direction of your new bundle tab to column.


Layout settings under the bundle container Styles tab

What to do next

Edit test values and controller inputs.