Auto-populating fields
Use templates and pre-configured information to automatically fill in fields in the main record based on the selected option in the side panel. For example, when a user selects a specific product category in the side panel, the system could automatically populate fields related to that category in the main record.
Reviewing contextual information
Knowledge base articles
Displays related knowledge base articles to provide users with additional context or solutions.
Calendar side panel
You can hide or display the contextual side panel for each selected calendar view. Add content to your side panel that includes information appropriate to the calendar, such as work schedules or time off requests. By default, there is an agenda list available that lists events chronologically as cards for the selected date and by context, if applicable. For days with numerous scheduled events, the agenda list is the only way to access all the events for the month view. For this reason, you shouldn't disable the agenda list for the month view.
Displaying data and visualizations
Visualize key performance indicators and other metrics in a side panel for easy reference.
KPIs
This is an example of using cards to show KPIs. It can be used to display target values, set targets, or modify existing targets.
Data visualizations
Data visualization container where visualizations can be combined to showcase on the contextual side panel.
Scores
Data visualization container and score can be combined to showcase on the contextual side panel.
Working with attachments
Allows users to manage attachments directly within the contextual side panel. See attachments usage guidelines.
Interacting with forms
Contextual side panel can be used to house the form as it is connected to a record and is used to show details of a record type (like case, incident, problem, or change) in a simple layout. It can also allow an user to either complete or update a record using the inputs.
Messaging and loading
Notifications and alerts
The alert component provides a message to the user as helpful information or a warning. It's used for confirmation of an action or the change of a state in context of where the action was performed. It can be used within the contextual side panel.
Message or empty state
The message component allows you to create messages using standard interactions, patterns, behaviours, and styles for various scenarios, including empty states, boolean feedback, and confirmation messages.
The message component's size should scale proportionally with the panel's size. When the panel is at its default width, display the small empty state as shown below. Maximum size used within contextual side panel is medium.
Loading
An example of load experience in a contextual panel. It's important to select the appropriate size of the loader based on the size of the component
Filtering
Filters can be added to the contextual side panel to apply filters contextually on the page. It can be used only when the “filter button and panel” type of filter isn’t used anywhere on the page to avoid confusion. Because there is no limit to the number of filters, this type of filter is especially suitable when many filters are needed. It also has functionalities like applying an available filter, adding an advance filter, resetting filters to default, and managing filters.
