> For the complete documentation index, see [llms.txt](https://academy.any2info.com/any2info-academy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/designertools/dashboard-designer.md).
# Dashboard designer
**Category**: Designer tools
**Version**: 1.0
**Last Updated**: July 9, 2026
**Author**: Any2Info
***
### Description
The Dashboard Designer provides a visual interface for creating, editing, and organizing dashboards within the platform.
The designer consists of multiple integrated areas that work together to simplify dashboard configuration and layout management:
* Menu
* Dashboards
* Toolbox
* Structure
* Toolstrip
* Interactive Designer
* Editing Menu
The designer allows users to visually position controls, configure their properties, organize dashboards into folders, and manage dashboard layouts interactively.
Dashboards support multiple layouts, allowing dashboards to adapt to different screen sizes and display types.
***
## Main Components
***
## Menu
The menu section is located on the left side of the designer and contains multiple tabs used for dashboard management and control selection.
***
### Dashboards
The **Dashboards** tab shows all saved dashboard objects available to the user.
Features include:
* Viewing all existing dashboards
* Organizing dashboards using folder structures
* Creating new dashboards
* Selecting existing dashboards for editing
* Moving dashboards between folders
* Creating new folders for organization
This section is intended for dashboard management and navigation.
#### Layout Selection
Besides dashboards, this section also shows all layouts belonging to the currently active dashboard.
Features include:
* Viewing available layouts
* Selecting layouts for editing
* Switching between layouts
* Managing layout-specific dashboard arrangements
When a layout is selected:
* The Interactive Designer updates to show the selected layout
* The Structure tab reflects the controls available in the layout
* The Editing Menu updates to show layout-specific settings
***
### Toolbox
The **Toolbox** tab shows all available controls that can be added to the dashboard designer area.
Features include:
* Displaying all available dashboard controls
* Grouping controls into categories
* Selecting controls for placement inside the designer
Information and configuration details for individual controls can be found in their dedicated documentation sections.
Typical examples of controls include:
* Charts
* Tables
* Text controls
* Input controls
* Layout containers
* Visualization controls
#### Layout Editing Behavior
When editing a layout, the Toolbox section changes behavior.
Instead of showing all available controls, the Toolbox shows a summarized list of all controls available in the root layout.
This allows controls from the root layout to be added to the currently active layout.
This functionality ensures:
* Layouts reuse controls from the root layout
* Controls remain consistent across layouts
* Layout-specific arrangements can be created efficiently
***
### Structure
The **Structure** tab shows a flat tree representation of the dashboard and all controls currently placed on it.
Features include:
* Viewing all controls in a structured hierarchy
* Quickly locating specific controls
* Selecting controls directly from the tree
* Activating controls inside the designer area
* Searching controls using:
* Control name
* Control ID
Additional indicators shown in the structure tree:
| Indicator | Meaning |
| -------------- | ---------------------------------------------------------- |
| Lightning icon | The control contains one or more configured events/actions |
| Link icon | The control is linked to another control |
Additional functionality:
* Controls can be temporarily hidden
* Useful when multiple controls overlap each other in the designer area
The Structure tab works together with the Interactive Designer:
| Component | Purpose |
| -------------------- | ------------------------------- |
| Structure Tab | Logical/searchable overview |
| Interactive Designer | Visual dashboard representation |
***
## Toolstrip
The toolstrip is positioned above the designer and contains quick-access actions for dashboard editing and layout management.
***
### General Actions
| Action | Description |
| -------- | ------------------------------------------------- |
| Save | Saves the dashboard |
| Help | Shows available designer shortcuts |
| Changes | Opens an overview of historical dashboard changes |
| Undo | Reverts the last change |
| Redo | Reapplies the reverted change |
| Settings | Opens designer settings |
| Copy | Copies selected controls |
| Paste | Pastes copied controls |
***
### Layer Management
The next four buttons are used for changing the visual order of controls inside the designer area.
| Action | Description |
| ------------- | ------------------------------------------- |
| Move Forward | Moves selected controls one layer forward |
| Move Backward | Moves selected controls one layer backward |
| Move To Front | Moves selected controls to the top layer |
| Move To Back | Moves selected controls to the bottom layer |
These actions are useful when controls overlap each other.
***
### Alignment Tools
The final six buttons are used for aligning multiple selected controls.
Supported alignment actions:
| Alignment | Description |
| ----------------- | ------------------------------------- |
| Align Left | Aligns controls to the left |
| Align Right | Aligns controls to the right |
| Align Top | Aligns controls to the top |
| Align Bottom | Aligns controls to the bottom |
| Vertical Center | Aligns controls vertically centered |
| Horizontal Center | Aligns controls horizontally centered |
***
## Interactive Designer
The Interactive Designer displays a visual representation of the dashboard and all controls placed on it.
Features include:
* Visual placement of controls
* Displaying control positions on the dashboard
* Showing selected controls visually
* Reflecting currently edited controls
* Allowing direct interaction with dashboard elements
The designer area represents the actual dashboard layout visually inside a rectangular dashboard workspace.
Additional functionality:
* Clicking a control automatically activates property editing
* Selected controls are visually highlighted
* The designer synchronizes with the Structure tab
* Changes made inside the designer are reflected immediately
The Interactive Designer and Structure tab complement each other:
| Component | Purpose |
| -------------------- | ------------------------------- |
| Structure Tab | Logical/searchable overview |
| Interactive Designer | Visual dashboard representation |
***
## Editing Menu
The Editing Menu contains all editable configuration sections for the active dashboard or selected control.
The menu is context-sensitive:
* The available configuration options depend on the selected dashboard or control
* Different controls expose different editable settings
The Editing Menu contains the following shortcut sections:
| Section | Description |
| ----------- | --------------------------------------- |
| Layout | Dashboard layout configuration |
| Properties | General control or dashboard properties |
| Messaging | User-facing messages and notifications |
| Events | Event configuration and actions |
| Action Flow | Action flow configuration |
| Parameters | Parameter configuration |
| Plugins | Plugin configuration and extensions |
***
### Layout
The **Layout** section is only applicable for dashboards.
This section contains properties related to the dashboard layout currently being edited.
The layout configuration controls the arrangement and positioning of controls shown in the Interactive Designer area.
***
### Properties
The **Properties** section shows all editable properties for the currently active dashboard or selected control.
Important notes:
* The available properties differ per control
* Each control exposes its own configurable settings
* Dashboard-level properties differ from control-level properties
For detailed information about available properties for each control, refer to the individual control documentation.
***
### Messaging
The **Messaging** section contains configuration related to messages shown for the active dashboard or control.
Typical usage includes:
* Success messages
* Error messages
* Warning messages
* Status notifications
These messages are generally displayed when:
* An action succeeds
* An action fails
* A process changes state
* Validation issues occur
***
### Events
The **Events** section shows all available events for the active dashboard or selected control.
Features include:
* Viewing supported events
* Adding actions to events
* Configuring event behavior
* Managing multiple actions per event
Each event can contain multiple configured actions.
Typical examples may include:
* Click events
* Load events
* Change events
***
### Action Flow
The **Action Flow** section is only applicable for dashboards.
This section allows the creation and editing of action flows.
Action flows are used to configure dashboard logic and action execution behavior.
For more information, see the **Action Flow Designer** documentation set.
***
### Parameters
The **Parameters** section is only applicable for dashboards.
This section contains two types of parameter objects:
* Incoming filters
* Fixed filters
These parameters are used to configure dashboard filtering behavior and parameterized dashboard interactions.
For more information, see the dedicated **Parameters** documentation section.
***
### Plugins
The **Plugins** section is only applicable for dashboards.
This section shows all plugins that are currently enabled or added to the dashboard.
Plugins can be used to extend dashboard functionality with additional integrations, behaviors, or custom features.
Features include:
* Viewing enabled dashboard plugins
* Managing plugin configuration
* Enabling or disabling dashboard plugins
* Viewing plugin-related settings
For more information, see the **Tools > Plugins** documentation section.
***
## Dashboard Layouts
Dashboard layouts allow a dashboard to support multiple screen sizes and alternative control arrangements.
A dashboard itself consists of a rectangular design area containing positioned controls.
A layout represents a variation of that dashboard where controls can be rearranged and resized for a different display size or device type.
Layouts make it possible to optimize dashboards for:
* Desktop screens
* Tablets
* Mobile devices
* Embedded displays
* Custom screen resolutions
***
### Layout Behavior
A layout is essentially a relayouted version of the dashboard.
Characteristics of a layout:
* Uses the same dashboard concept and control system
* Can contain any control from the root layout
* Does not require all controls from the root layout
* Allows controls to be repositioned and resized independently
* Supports screen-specific optimization
This allows dashboards to behave differently depending on available screen space.
***
### Root Layout
The root layout is considered the primary dashboard layout.
Best practice is configuring the root layout as the version containing all controls.
In most scenarios:
* The root layout represents the desktop version
* Additional layouts are optimized for smaller screens
Typical layout structure example:
| Layout | Purpose |
| ------------- | ---------------------- |
| Root Layout | Desktop/full dashboard |
| Tablet Layout | Medium-sized screens |
| Mobile Layout | Compact/mobile version |
***
### Layout Sizing
Layout sizing can be configured through the **Properties** section in the Editing Menu while the dashboard is active.
Two groups of properties are important for layout behavior.
***
#### General Section
The **General** section contains:
| Property | Description |
| ------------ | ------------------------------- |
| Width Bound | Maximum supported screen width |
| Height Bound | Maximum supported screen height |
These properties define the upper screen-size limits for which the layout should be used.
Together, these bounds determine:
* Which layout becomes active
* Which screen sizes match the layout
* Responsive layout behavior
***
#### Page Section
The **Page** section contains properties defining the actual design area size.
These properties determine:
* The size of the Interactive Designer workspace
* The available placement area for controls
* The visual layout dimensions during editing
The page size represents the actual editable rectangle on which controls are positioned.
***
### Layout Design Strategy
Recommended layout design workflow:
1. Create the root layout first
2. Add all required controls to the root layout
3. Configure the desktop/full-size version
4. Create additional layouts for smaller screens
5. Reposition or resize controls where necessary
6. Remove unnecessary controls from smaller layouts if required
***
## Usage
Typical use cases for the Dashboard Designer include:
* Building KPI dashboards
* Creating monitoring dashboards
* Designing operational dashboards
* Creating management overviews
* Configuring interactive visualizations
* Organizing reusable dashboard structures
***
## Tips & Best Practices
* Use folders to organize dashboards logically
* Use the Structure tab to quickly locate controls in large dashboards
* Temporarily hide overlapping controls while editing
* Use alignment tools for consistent dashboard layouts
* Use layer ordering tools when controls overlap visually
* Use the root layout as the complete desktop version
* Keep mobile layouts simplified
* Avoid overcrowding smaller layouts
* Use consistent control positioning between layouts where possible
* Remove non-essential controls from compact layouts
* Configure proper width and height bounds for predictable layout switching
***
## Notes
* Layouts are dashboard-specific
* Layouts only affect positioning and arrangement
* Controls can exist in some layouts but not others
* Layout switching is based on configured bounds
* Layouts work together with the Interactive Designer and Structure tab
***
## Changelog
| Version | Date | Change |
| ------- | --------------- | ---------------------------------------- |
| 1.0 | Initial version | Dashboard Designer documentation created |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://academy.any2info.com/any2info-academy/no-code-platform/app-studio/designertools/dashboard-designer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.