For the complete documentation index, see llms.txt. This page is also available as Markdown.

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


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

Last updated

Was this helpful?