Skip to content

Dashboards collapsible sections #1954

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions explore-analyze/dashboards/arrange-panels.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,30 @@ products:

# Organize dashboard panels [arrange-panels]

## Arrange panels in collapsible sections [collapsible-sections]
```{applies_to}
stack: ga 9.1
serverless: ga
```

Organize your dashboard panels into collapsible sections to improve readability and navigation, especially for dashboards with many panels. Collapsible sections also help dashboards load faster by only loading the content from expanded sections.

To add a collapsible section:

1. Open the dashboard and make sure that you are in **Edit** mode.
2. Select **Add panel** and select **Collapsible section**. The collapsible section is added at the end of the dashboard.
3. Optionally, edit the label of the section.
4. Drag and drop any panels you want into the section.
:::{tip}
The section must be expanded in order to place panels into it.
:::
5. Just like any other panel, you can drag and drop the collapsible section to a different position in the dashboard.
6. Save the dashboard.

Users viewing the dashboard will find the section in the same state as when you saved the dashboard. If you saved it with the section collapsed, then it will also be collapsed by default for users.

![Collapsible sections](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt8c368aecdd095010/685e8fcb9c34ed3c353812a5/collapsible_panels.gif)

## Move and resize panels [resizing-containers]

Compare the data in your panels side-by-side, organize panels by priority, resize the panels so they all appear immediately on the dashboard, and more.
Expand All @@ -28,18 +52,18 @@ In the toolbar, click **Edit**, then use the following options:

## Copy and duplicate panels [duplicate-panels]

To duplicate a panel and the configured functionality, use the clone and copy panel options. Cloned and copied panels replicate all of the functionality from the original panel, including renaming, editing, and cloning.
To duplicate a panel and its configured functionality, use the clone and copy panel options. Cloned and copied panels replicate all of the functionality from the original panel, including renaming, editing, and cloning.


#### Duplicate panels [clone-panels]
### Duplicate panels [clone-panels]

Duplicated panels appear next to the original panel, and move the other panels to provide a space on the dashboard.

1. In the toolbar, click **Edit**.
2. Open the panel menu and select **Duplicate**.


#### Copy panels [copy-to-dashboard]
### Copy panels [copy-to-dashboard]

Copy panels from one dashboard to another dashboard.

Expand Down
3 changes: 2 additions & 1 deletion explore-analyze/visualize.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ $$$panels-editors$$$
| | [Field statistics](visualize/field-statistics.md) | Add a field statistics view of your data to your dashboards |
| | [Custom visualizations](visualize/custom-visualizations-with-vega.md) | Use Vega to create new types of visualizations |
| | | |
| Annotations and navigation | [Markdown text](visualize/text-panels.md) | Add context to your dashboard with markdown-based **text** |
| Annotations and navigation | [Collapsible sections](dashboards/arrange-panels.md#collapsible-sections) | Organize your dashboard into sections that can be collapsed and save loading time |
| | [Markdown text](visualize/text-panels.md) | Add context to your dashboard with markdown-based **text** |
| | [Image](visualize/image-panels.md) | Personalize your dashboard with custom images |
| | [Links](visualize/link-panels.md) | Add links to other dashboards or to external websites |
| | | |
Expand Down
Loading