Customize the layout of your Playbook Experience with base system modular components, templates, and more via integrated UI Builder functionality.

Build custom Playbook Experience layouts with the modular components in the playbook apps. To speed up the development process, add the Playbook Custom Layout UI Controller to pages wherever you want Presets to auto-populate inputs for the provided components. You can also create your own custom components with UI Builder, but Presets can't auto-populate custom components with data.

Determine how to display the following modular components in your Playbook Experience layout:
Playbook stage picker
The stages of a playbook can be displayed horizontally or vertically:
  • The vertical orientation shows:
    • All playbooks for a parent record,
    • The stages of each playbook,
    • How many activities remain to be completed in each stage, and
    • How many activities are in progress for each stage.
    In this example, a playbook named Playbook Experience Demo with stages named Assign, Create, Review and Update is shown. The Assign stage has 2 activities left to complete, with 1 in progress. The Create and Review and Update stages don't have blue numbers next to them, so they don't have any activities that are in progress.
    Figure 1. Vertical stage picker

    Vertical view of a playbook named Playbook Experience Demo with stages named Assign, Create, Review and Update.
  • The horizontal orientation only shows the stages of a selected playbook. To see the activities of a stage, select the stage.
    Figure 2. Horizontal stage picker

    Horizontal view of a playbook named Playbook Experience Demo with stages named Assign, Create, Review and Update.
    Note: The horizontal stage picker only shows you the playbook you are in and its stages, so you can’t navigate between playbooks unless you:
    • Use a playbook template, or
    • Create your own drop-down component with UI Builder.

    All playbook templates include a drop-down component to navigate between playbooks, and is auto-populated when you select the Playbook Picker preset.

Playbook activity picker

The activity picker is where you navigate between activities.

If you're using the vertical stage picker, turning on the activity picker means each stage can be expanded to shows its activities.
Figure 3. Activity picker when viewing stages vertically

Activity picker when you're viewing stages vertically.
If you're using the horizontal stage picker, turning on the activity picker allows you to expand or collapse the entire list of activities for the stage you're in.
Figure 4. Activity picker when viewing stages horizontally

Activity picker when you're viewing stages horizontally.
To toggle the Show Stages flag flag on or off, .
Playbook activity viewer
The activity viewer is where you manage a stage's activities. You can change the way activities are displayed in this space:
  • The Stacked view displays all activities in a stage stacked on top of each other.
    Figure 5. Playbook stacked view

    Activities stacked for the Assign stage. The 1st activity is complete, the 2nd is in progress and can be marked complete or skipped, and the 3rd is pending.
  • The Focused view displays a single selected activity.
    Figure 6. Playbook focused view

    A single activity that you can mark as complete or skip.
Playbook modals
If you want the ability to cancel playbooks and add optional activities, you must add the Playbook Modals component to your pages. If you use a template, this is already included.
Figure 7. Cancel playbook modal

The Cancel playbook modal
Figure 8. Add optional activity modal

The Add optional activity modal

To start setting up components for your customized Playbook Experience, see Get started with custom layouts.