Views

Views provide a structured layout of dashboard components with enhanced responsiveness for display on screens of various sizes, including mobile devices. Views also support flexible navigation between dashboards and allow you to add pop-up windows with detailed breakdowns of indicators to dashboard components.

A view has no length limit and can be scrolled vertically.

Flexible navigation is supported when working with views. For example, you can open one view inside another using a placeholder or use a click action in the Button widget.

Working Area

The view working area consists of the following elements:

• Top panel:
  • View and YAML editor buttons
  • Data model button
  • Exit button to leave edit mode
  • Publish button to publish the dashboard
• Dashboard panel:
  • Views tab with the view hierarchy panel
  • Dashboard indicators tab (working with elements in this tab is described on the page Global dashboard indicators)
• View/widget settings panel:
  • Common view settings tab
  • Common widget settings tab

Views Tab

This tab displays a hierarchical list of all views and their components created in the dashboard.

When a dashboard is created, a default view is automatically added and set as the home view. The home view is displayed in Browse mode.

Views in the list are sorted alphabetically in the following order: 0–9, A–Z, a–z.

Adding a View

To add a new view, click + in the top-right corner of the views panel.

By default, the view is named New view. If a view with this name already exists, a sequential number in parentheses is appended to the new view’s name.

View Settings Panel

The panel consists of two tabs: one for common view settings and another for common widget settings.

Common View Settings Tab

This tab allows you to modify view settings.

Name

You can use system variables, dashboard variables, and input values in the view name using the format {inputs.Variable name}. For example, to pass an employee’s name (Ivanov Ivan), you could use: Employee: {inputs.Employee name}. In this case, when the view opens in a side or modal window, the name Employee: Ivanov Ivan appears above it, and the window may contain detailed information about this employee.

You can specify the view name either directly in the field or via the Rich Markdown Editor.

When you change a view’s name, it is also updated in the views panel.

Key

In this field, you can view and edit the view key. The view key is used when creating links between views in the YAML editor—for example, for navigation.

Max Width

The Max width parameter sets the maximum pixel width to which the view can expand. By default, the view stretches to fill the entire window width.

Dividers Height

The Dividers height parameter sets the default height for dividers added to the view:

• px — fixed height in pixels
• % — height dynamically calculated relative to the screen displaying the report

Corner Radius

When corner rounding is enabled, the setting applies to all widgets in the view. All corners of the containers holding the widgets are rounded.

If corner rounding is enabled for widget containers but Spacing in the view are disabled in the view, only the outer corners of the containers appear rounded in Browse mode.

Spacing in the View

When the Spacing in the view toggle is enabled, small gaps appear between components after the view is published, improving readability.

Background Color

You can configure the background color:

• Auto mode — uses the default color
• Solid mode — allows selection of any color via palette or HEX code

The selected background color appears in both view and edit modes.

Auto-Update

When enabled, data in Browse mode refreshes at the specified time interval. The default interval is 5 minutes.

Input Values

Input value variables can be used in widget formulas within the view. Detailed instructions on working with these variables are provided on the page Variables.

Predefined Filter

Click + Filter to add a predefined dimension-based filter applied to all widgets in the view. Predefined view filters:

• Affect all view components, including widget and event filters
• Affect views opened in side or modal windows via the Open view click action
• Are not visible in Browse mode

Action Buttons

Action buttons are buttons displayed at the bottom of a view opened in a side or modal window via a click action. Clicking an action button runs a dashboard script.

Action buttons are configured separately for each view. You can add up to 2 such buttons per view.

Action button settings:

• Name
• Type: Primary, Secondary, or Link
• Run script field — click to see a list of available dashboard scripts and select one
• Auto-update — triggers after script execution. You can refresh data in all widgets and placeholders in the view or disable this option

To configure parameters for the script linked to the button, select an input method: Variable or Set by aggregation.

Using Action Buttons

Display of action buttons can be enabled when configuring the Open view click action. When selecting In side panel or In modal window, the Action buttons toggle becomes available.

In some cases, action buttons are hidden under a context menu button — for example, if the button name is too long or the view size is too small to display all buttons. To run the script in such cases, click the context menu button and select the desired action.

Common Widget Settings Tab

This tab allows you to modify settings applied to all widgets in the view:

• Paddings
• Title size
• Title color
• Title weight
• Text size
• Filter mode
• Ignore filters toggle
• State

Detailed descriptions of these settings are available on the page Widgets.

View Actions

View actions are performed via the context menu. To open it, click the three-dot icon to the right of the view name.

Available actions:

• Make home — makes any view the home view; the current home view loses this status
• Duplicate — creates a full copy of the view and its contents, assigns a new key, and appends a sequential number in parentheses to the parent view’s name
• Delete — permanently removes the view

You can expand a view in the list to see its structure and nested components by clicking the arrow to the left of the view icon.

To collapse the list, click the icon again.

Editing a View

A view’s structure is based on rows and columns forming a grid. You can add various components—such as widgets or placeholders—to rows and columns.

A new view is initially empty. To start populating it, click + Create row.

After creating a row, a column is automatically added to it.

When hovering over a column in a row, + buttons appear. The top and bottom buttons add new rows.

The side buttons add new columns.

When a column is selected in the view, it is automatically highlighted and expanded in the views hierarchy panel.

You can also edit the view in the YAML editor.

Row Actions

In the Views tab, you can perform the following actions on rows via the context menu:

• Duplicate (fully copies and inserts the row below the original)
• Clear (removes row content, leaving one default column)
• Delete (also deletes all columns in the row)

Column Actions

To perform actions on columns, click the context menu icon to the right of the column name.

Available actions:

• Duplicate (fully copies and inserts the column)
• Clear (if the column contains components)
• Delete (if the deleted column is the only one in its row, the entire row is removed)

Right-clicking a column allows you to paste a previously copied component into it. Select Paste to do so.

Column Settings

Column Height

Column height is set in:

• px — fixed height in pixels
• % — height dynamically calculated relative to the screen displaying the report

When you change the height of one column, other columns with automatic height adjust to match the tallest modified column. Height and width settings are inherited by components placed inside the column and can be further edited in the component’s own settings.

Column Width

Column width is specified in fractional units (fr) or pixels (px).

If the view uses automatic width, editing mode sets width as a fraction of the view area, while Browse mode uses fractions relative to the browser width. With fixed view width, fractions are calculated based on the set width value—if it’s smaller than the view or browser width.

As the browser window narrows, columns shrink. Once they reach their minimum width, they visually wrap to the next line while preserving the view’s row structure—enabling automatic adaptation to mobile screens.

When switching a column’s width mode from fr to px, the column fills the row proportionally to other columns’ widths. For example, if all columns in a row have Auto pixel width, they occupy equal space.

The minimum size depends on column content. For instance, a table’s minimum width is 240 pixels. If a column’s pixel width is set to 150, adding a table overrides this setting, and the column width becomes 240 pixels.

Maximum column width is limited by row width. You can enter any pixel value, but values exceeding the row width are ignored.

View Components

There are 5 components you can use in a view:

• Widgets
• Placeholders
• Tabs
• Rows
• Dividers

Components at the same nesting level can be reordered. For example, you can change the order of tabs or widgets within a row.

To move a component, click and drag it while holding the left mouse button.

Widgets

To see the list of available widgets for adding to a view, click the Widget button.

After adding a widget to a column, the column in the views panel is replaced by the widget key. Each widget is assigned a unique key. If a widget has a title, it appears instead of the key in the views panel.

Available widget actions:

• Copy (right-click the widget in the view and select Copy)
• Paste (only into an empty column)
• Duplicate (fully copies and inserts the widget into the same row; a new unique key is generated)
• Clear (removes the widget from the column)
• Create a nesting (moves the widget into a new column created inside the original)
• Add to tab (moves the widget into a new tabs component)
• Delete (removes both the widget and its column)

Placeholders

A placeholder allows you to display another view inside a column.

To add a placeholder to a column, click Placeholder.

Available options:

• Without view (adds an empty placeholder that can be populated in Browse mode via a Click action)
• Created view (any view except the one being edited—the current view is excluded from the list)
• Generated by script (requires selecting a script with a Return data block and YAML description; other scripts return an empty view)

To open the placeholder context menu, click the context menu icon next to its name or right-click the placeholder.

Available placeholder actions:

• Copy (right-click in the view and select Copy)
• Duplicate (fully copies and inserts the placeholder into a new column in the same row)
• Clear (empties the column)
• Create a nesting (moves the placeholder into a new nested column)
• Add to tab (moves the placeholder into a new tabs component)
• Delete (also removes the column)

Placeholder settings:

• Name (must be unique)
• View (None/Created/Generated)
• Width

For details on opening a view in a placeholder, see the Open view click action page.

Placeholder Behavior Notes

When working with placeholders, keep the following in mind:

• A view opened in a placeholder inherits width, color, and Spacing in the view from the parent view
• Placeholder height is inherited from the embedded view; empty placeholders use a default height
• Empty placeholders have no option to assign a view
• Empty placeholders are hidden in Browse mode
• A view cannot display itself (i.e., circular embedding is not allowed)

Tabs

Tabs let you place multiple widgets or placeholders in a single component and switch between them. To add the component, click Tabs. One tab is created automatically.

Component Settings

In the right-side panel, you can configure:

• Width
• Text size
• Alignment
• Background like the view
• Display of a single (only) tab

The Text size setting controls tab name size; it does not affect text inside the tabs.

If Spacing in the view is disabled in view settings, the Background like the view option appears in tab settings. This controls the tab area background in Browse mode:

• When enabled, the tab area inherits the view’s background color
• When disabled, the background is white

The Display a single tab option is useful when you need to indicate in Browse mode that a widget or placeholder belongs to a tabs component rather than being standalone. See the example below.

Tab Settings

You can rename a tab in its settings. Duplicate tab names are allowed.

You can also set a display condition for the tab. Consider how this affects its appearance in Browse Mode.

Creating a Tab

To create a new tab next to an existing one, click the + icon next to the tab name. The new tab is automatically selected.

You can create an unlimited number of tabs. With many tabs, a context menu button appears at the top. Hover over it to select the desired tab.

Actions with Tabs

Use the context menu to perform actions on the component or individual tabs. Click the context menu icon to the right of the component or tab name in the views panel.

Available component actions:

• Duplicate (creates a copy to the right in the same row, including all tabs and content)
• Clear (removes the component but preserves column width and height settings)
• Delete (completely removes the component)

Available tab actions:

• Duplicate (copies all content; the duplicate appears to the right with a sequential number in parentheses)
• Clear (empties the tab, leaving one row with an empty column)
• Delete (completely removes the tab; deleting the only tab clears the column)

Tab Display Condition

Use the Display parameter to set a formula or select a variable that filters tab data. Options:

• Always
• By variable
• By formula

If a tab doesn’t meet its display condition, an icon appears next to its name in edit mode.

Tabs in Browse Mode

In Browse mode, tabs behave as follows:

• If only one tab contains a component, the tab switcher is hidden
• If there’s only one empty tab, tabs are not displayed
• If no tabs meet their display conditions, none are shown

Rows

To add a nested row inside a column, click Row.

You can add multiple nested rows within a column and add new columns inside nested rows.

For columns in a row, you can set alignment: left, center, right, or justified. The visual effect is noticeable only if columns have fixed widths.

Dividers

A divider adds extra spacing between rows, helping to visually separate report sections.

To add a divider to the view, click Divider.

You can set divider height:

• px — fixed height in pixels
• % — height dynamically calculated relative to the screen displaying the report