Workspace/Patterns

Contextual side bar patterns

A container for various component types to be used in the context of a specific record; stateful buttons are stacked vertically as tabs.

Overview

The contextual side bar provides a flexible and efficient way to display and interact with related content within a record.
They’re useful in applications with complex interfaces or a large amount of related content and provide a structured way to navigate and access the related information. They consist of two main components: contextual side bar and contextual side panel container.

Contextual side bar with a contextual side panel open showing a search field and 2 cards.
  1. Contextual side bar: Area that houses stateful buttons that control the display of the panel container
  2. Contextual side panel container: Area that houses content, actionable tabs, subcomponents and action buttons

Contextual side bar

The contextual side bar is always visible and acts as a navigation menu, allowing users to switch between different contextual side panel containers.

Contextual side bar displays 3 iconic buttons with one selected.
  1. Contextual side bar: Area that houses stateful buttons
  2. Primary button area: Area that houses up to 9 primary buttons
  3. Overflow actions menu: Dropdown menu that becomes visible and acts as an overflow for actions when the container is resized
  4. Contextual side bar button: Icons that open or close components within the container when selected by the user
  5. Focused contextual side bar button: Indicates to the user which is the active and open contextual side panel container

Contextual side panel container

The panel container displays the content associated with the option selected in the sidebar.

Contextual side panel container displaying a header, two tabs, a search input field, a slot for custom content and an optional footer for paginated content.
  1. Contextual side panel container: Area that houses the panel container
  2. Panel header: Indicates the purpose of the side panel, helping users understand what information or actions are available. This area is "sticky" and always visible. Can contain action buttons
  3. Tabs (optional): A navigation element that allows users to switch between different content panes within the content area of the UI. If the tabs are also visible, then both header and tabs are sticky.
  4. Search (optional): Allows users the ability to enter keywords to search for specific information within the contextual side panel
  5. Buttons (optional): This optional area houses one or more iconic buttons
  6. Content area: Houses the core content of the panel
  7. Panel footer (optional): Area that houses either action buttons or a pagination control related to the content area. This area is sticky and stays affixed to the bottom of the panel’s bounding area.

Preconfigured panels

To make things easier, there’s a collection of preconfigured contextual side panels available to use. Below is a short list of commonly used panels.

Panel header with four iconic buttons and optional back button.
  1. Agent Assist: Provides a list of resources, related to an open record's short description, to assist the user in task resolution. Assists user in handling the record by providing related articles or cases and provide resolution recommendations. For more information, see usage guidelines for Agent Assist
  2. Attachments: Allows users to preview, add, download, or remove attachments from a related record. The add button will open a window for the user to select a local file to add as an attachment to the record. The user can select one or more attachments to drag and drop into the contextual side panel to upload. The attachments component supports the following attachment file types: GIF, PNG, BMP, PDF, PPT, DOC, XLS, and TXT. For more information, see usage guidelines for attachments
  3. Email quick messages: Text templates a user can insert into the body of an email message. Only use this in workspaces. Enable a user to compose an email message quickly within an experience. With quick messages, a user can insert common email responses into the email composer instead of rewriting the same message. For more information, see usage guidelines for Email quick messages
  4. Form templates: Allows users to automatically fill out the record form using a template. For more information, see usage guidelines for form templates