Anatomy
Learn about the individual parts of Playbook modals.
Cancel playbook modal
- Reason for cancellation box: Required entry field for user to type reason for cancelling a playbook; user must confirm the cancelation
Add optional activity modal
- Optional activity: Optional activities that are available for the user to select and add to a playbook appear here
Usage
Playbook modals support features in playbook that need to be surfaced to the user in a modal without requiring you to set up multiple, different modals to accomplish your goals.
Configurations
Learn how to customize playbook modals by configuring the available properties.
Presets and controllers
This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.
Note: If the playbook controller is present on the page, it applies right away. However, if there’s no controller, you’ll be asked if you want to add the playbook controller. You should add it. If you don’t, the configuration data and event binding the component needs to function will be missing from your page.
Optional activities
To enable the user to add an activity to a running process, you can configure optional activities that show up in the optional activities modal.
Cancel activities
You can specify which running playbook the cancel modal cancels for the user.
Playbook ID
You can specify the ID of the playbook experience you want to load.
Design recommendations
Learn how to apply playbook modals in your design.
Alignment and positioning
The playbook modals component has to be in the the body section of a UI Builder page. Placing it at the top is recommended.
Usability
Playbook modals complies with all internationalization and accessibility requirements - with the current exception of re-flow.
Internationalization
When this component is used in a platform configured for a right-to-left (RTL) language, it flips in its orientation.
Playbook modals doesn't change for right-to-left (RTL) languages.
Accessibility
Learn how to access the actionable elements of playbook modals through keyboard interactions and screen readers.
Playbook modals doesn’t have any specific accessibility interactions.
Cancel playbook modal tab order
Add optional activity modal tab order
Keyboard interactions
You can access the actionable elements of playbook modals with these keyboard keys:
- Tab: Shifts focus to the button starting with the most important UI action; tab order continues in order of importance
- Space or Enter: Launches the action in focus
Screen readers
When you apply ARIA labels to a component, screen readers announce the controls and content of playbook modals in the prescribed tab order.