Anatomy
Learn about the individual parts of playbook.
- Playbook picker: Shows the active playbook; if only one playbook is available, the dropdown is not available and the playbook name appears as regular text
- Stage picker (in horizontal view): Shows the stages for the selected playbook
- Activity picker (in focused view): A pane that lists activities available for the selected stage
- Activity viewer (in focused view): A pane that shows the details for one selected activity
Playbook picker (multiple playbooks)
Playbook picker (one playbook)
Subcomponents
See the usage guidelines for Playbook stage picker
See the usage guidelines for Playbook activity picker
See the usage guidelines for Playbook activity viewer
Usage
Learn about the playbook component and find out how to use it in your design. You can use the playbook component to reduce visual clutter, keep focus on tasks, provide a flexible workflow, and create an experience that establishes clear context. Some specific use cases can include resolving a claim or onboarding a new patient.
Variants
Learn about the attributes of playbook.
Types
Playbook has variant types: focused view and stacked view.
Stacked view
The stacked view of playbook displays a navigable list of stages on the left and surfaces the corresponding activities for a selected stage on the right panel.
In this example, a declarative action button exists at the record level and within activities.
Focused view
The focused view of playbook displays a navigable list of stages with the corresponding activities listed in an accordion menu. It only shows one activity at a time in the details area to provide a more focused view for users.
In this example, a declarative action button exists at the record level and within activities.
Sizes
The playbook component has 2 sizes: full view and contextual sidebar.
Full view
The playbook full view displays the navigation pane and activity pane together.
Contextual sidebar
The playbook contextual sidebar view displays the navigation pane by default. Users can navigate to the activity pane by selecting one stage from a playbook in the navigation pane.
Configurations
Learn how to customize playbook by configuring the available properties.
Multiple playbooks
Multiple playbooks stacked in the navigation pane can be included in a single record or in several different records. The multiple playbooks can be triggered by declarative action buttons located at the record level or within a playbook activity.
In this example, multiple playbooks are stacked in the navigation pane.
Playbook picker
Playbook picker appears right below the record header in the top of a page. Once selected, it shows the dropdown with different playbooks to chose from. If the user picks another playbook, the whole page resets to show the new playbook.
Activities
Activity cards can feature forms, checklists, lists, attachments, and more.
By default, activities are collapsed except for the initial activity already in progress and ready to be completed. This setting can be configured to open or not open any activity.
In this example, an activity is in a collapsed state.
In this example, an activity is in an open state with a form.
In this example, an activity is in an open state with a checklist.
In this example, an activity is in an open state with a list.
In this example, an activity is in an open state with an attachment.
Design recommendations
Learn how to apply playbook in your design.
Card information should be clear and concise, so a user can easily understand a task and act on it. Alternatively you can use focused view to better support complex content.
When using stacked view, avoid overloading content in a card or combining interactive components like simple lists and form fields.
Keep playbook activity card information short and relevant whenever possible, so users can quickly understand the task at hand.
Avoid large components in activity cards, like simple lists that are not intended for small spaces and extra form fields in the contextual sidebar. Consider using a playbook in a related item tab if your card needs a lot of information.
Use only 1 highlighted value, like SLA (Service Level Agreement), especially if card actions are exposed outside an overflow.
Avoid cluttering the activity header with multiple highlighted values and exposed card actions that can confuse users.
Expose additional card actions like a new comment indicator in an overflow menu.
Avoid large components in activity cards. Lists and forms with numerous fields don’t fit well in the contextual sidebar. If your card needs a lot of information, consider using a playbook in a related item tab.
UI text guidelines
These are some recommendations for using text within playbook:
- Headers and stage and activity titles should be short and precise, or they might truncate
- Use actionable activity titles that start with verbs, such as "Check approval status"
- Keep all text labels informative and short to increase readability and scanning
- Ensure content is contextual and specific to offer guidance and support to the user
- If a component performs or supports an action, label it with a verb (like “Submit”)
- Button text should be concise, actionable, and clearly state what happens when a user makes the selection
Behavior
Learn how playbook behaves when the display changes or a user interacts with the component.
Standard playbook
A standard, default playbook can be configured with single or multiple playbooks.
Canceled playbook
A playbook can be canceled, stopping all activities in progress, while stages with activities pending are also canceled.
States
Playbook has the following states.
Selected
Shows all the activities listed for the selected stage.
Stage on hover
For a stage on hover in the navigation pane, an overflow menu icon appears, where users can take bulk actions.
Collapsed playbook
The vertical Stage Picker/Activity Picker with Stages can be collapsed by clicking on its chevron opposite its name.
Configuration error
If there is a configuration error, playbook is not activated, and an empty state message appears in a full-page view.
No playbook available
Depending on the configuration, some users may not be able to view a playbook, so an empty state message appears in a full-page view.
No filtered results
A playbook with no filtered results appears with the stages disabled. The activity pane displays an empty state message to change the filters. Stages with filters that apply remain interactive.
No activities available
Any stage launched without activities available is disabled. If a playbook has only a single stage without activities, the activity pane displays an empty state message.
Interactions
Learn how playbook responds when a user interacts with it.
Open a playbook
Users can open a playbook by selecting the caret icon next to the playbook title in the navigation pane. If a playbook is currently open, this action will close the playbook.
Actionable icons
Users can interact with any of the actionable icons in the top right corner of the navigation pane, which includes the filter and menu options.
Focused view
In focused view, the user can select a stage to open the list of activity items.
Truncation
When text in a navigation pane and activity name exceeds the width of the container or content area, the text truncates with an ellipsis, and a tooltip shows the full content on hover.
| Content area | Example |
|---|---|
| Playbook header |  |
| Stage title |  |
| Activity name |  |
Usability
Playbook complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the order of importance changes to right-to-left in the navigation panel and stage/activity panel but remains the same from top to bottom.
Accessibility
Learn how to access the actionable elements of playbook through keyboard interactions and screen readers.
Playbook tab order
This is the high-level tab order for playbook.
Note: For tab stop information about sub components of playbooks, see the individual component usage guidelines.
Keyboard interactions
You can access the actionable elements of playbook with these keyboard keys.
- Tab: Moves focus to the next interactive element
- Shift + Tab: Moves focus to the previous interactive element
- Down arrow: Moves focus to another playbook
- Up arrow: Moves focus to the previous playbook
- Enter/return or space bar: Triggers element action
Screen readers
When you apply ARIA labels to a component, screen readers announce the controls and content of playbook in the prescribed tab order.