Set up a UI Builder page and start configuring your modular Playbook Custom Layouts components for custom layouts in Playbook Experience.

Before you begin

About this task

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.

Procedure

  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, see Configure how users interact with your applications in UI Builder.
  3. In your UI Builder experience, you can:Create a page from scratch, create a page from a Standard record template, or create a page from a Playbook Experience template.
    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. The controller automatically populates all the provided components with data.
    Note: 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.
    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 left corner of your new page, open the Data resources panel .
    2. Select + Add.
    3. Search for "Playbook".
    4. Under Data resources, select Playbook Custom Layout UI Controller and click Add.
  6. Configure the Playbook Custom Layout UI Controller.
    1. In the Data resources panel, under Local data resource instances, select UI Controller Record Page.
    2. Under the Config tab, add the Parent SysID or Parent Table.
      You can enter context.props.table in the Parent Table field, and context.props.sysId for the Parent SysID field.
      Note: Make sure whatever table or record you enter has a playbook.
    3. Add the Playbook Experience you want to use.
    4. (Optional) Enter values for the other fields, if needed.
    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 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.
      A confirmation message is displayed, and the component inputs and events under the Events tab in the stage picker panel is auto-populated.

    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. To allow users to create a new record in this customized Playbook Experience instead of the standard new record form, open interaction on the upper left, update the sysID field to -1, and click Apply.
      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.
    20. 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.