Opens a side panel on your app's dashboard page.
A side panel slides in alongside your dashboard page and renders the embeddable component you specify in componentId. Use a side panel to show secondary content, such as details, settings, or a short form, while keeping the current page in view.
To pass data to the panel, include it in componentProps. The component reads this data with observeState().
Notes:
componentId must be an embeddable component, the same type you retrieve with getWidget(). Other dashboard extensions, such as pages, modals, and plugins, can't be opened in a side panel.sidePanel.close() from the panel's component code.| Name | Type | Description |
|---|---|---|
options | SidePanelOpenOptions | The component to open and any data to pass to it. |
SidePanelOpenOptions object| Name | Type | Description |
|---|---|---|
componentId | string | ID of the "embeddable component" extension to open in the side panel. This is the same embeddable component you retrieve with getWidget(). |
componentProps | Record<string, Serializable> | Optional. Data to pass to the component. The component reads this data with observeState(). Values must be serializable, so they can't include callbacks or other non-cloneable values. |
void
Note: Don't use relative CSS height units such as vh in the component opened by this method. The host adjusts the component's height automatically. If your component uses relative height units by default, turn them off.
Note: To call this method in self-managed apps, you need to create a client. See the setup guide for more details.
You can access the data passed to sidePanel.open() in your component code using observeState().