Page History

Introduction to Dashboards

Dashboards quickly convey volumes of data in a compact and easily accessible format.

• Responsive layouts allow your dashboard to intelligently resize based on your viewing device.

• Easily drag & drop panels to display Grids, Trend Charts, Pie Charts, Bar Charts, Gauges, and more.

• Add any Symbol Library object – built-in or one of your own creation.

• Create groups to control responsive behavior for the entire group of items separate from the overall page.

• Create dashboards for both .NET and HTML5 clients from the same engineering environment.

• Supports our new Solution Themes for quick styling!

Image Removed

Two Approaches to Responsive Design

1. Grid Dashboards (This Page)

• Block-based layout
• Auto-arranging cells
• Mobile stack switching
• Container-based design

2. Responsive Canvas

• Vector drawing with anchoring
• Proportional scaling
• Position locking
• Mixed fixed/responsive elements

See → Display Settings → OnResize → Responsive for canvas responsiveness

Creating Dashboard Displays

1. Navigate to Displays → Draw
2. Click Create New Document
3. Select BasicDashboard template
4. Design in grid mode

Dashboard template automatically enables:

• Grid-based editor
• Block arrangements
• Responsive behavior
• Mobile optimization

Dashboard Editor Interface

Drawing Mode Changes

When Dashboard selected:

• Vector tools disabled
• Grid blocks enabled
• Drag-drop positioning
• Container management

Available Operations

• Add Elements - Drag from Components Panel
• Move Blocks - Drag to reposition
• Create Rows/Columns - Auto-grid expansion
• Delete Elements - Select and Delete key
• Configure Properties - Right panel

When mouse is over the borders, it will highlight that when dropping a component, a new row or column is created 

Dashboard Elements

Components

From Components Panel:

• Charts (Trend, Bar, Pie, XY)
• Gauges (Circular, Linear)
• Data displays (Grid, Table)
• Custom symbols
• Input controls

Containers

Special layout elements:

• Group - Grid within grid
• Vertical Stack - Column layout
• Horizontal Stack - Row layout
• Border Panel - Framed content
• Expander - Collapsible section

Dashboard Properties

Block Configuration

Styling Options

• Theme - Apply color schemes
• Borders - Block outlines
• Shadows - Depth effects
• Corners - Radius settings

Responsive Behavior

Desktop Mode

• Grid maintains columns/rows
• Blocks resize proportionally
• Minimum sizes respected
• Aspect ratios preserved

Mobile Mode

• Switches to stack panel
• Single column layout
• Touch-optimized spacing
• Scroll-enabled

Breakpoints

Automatic switching based on:

• Screen width
• Device type
• Orientation
• User settings

Advanced Features

Dynamic Titles

Support for runtime values:

Title: {Client.DateTime}
Title: {Tag.Temperature} °C
Title: {Server.Status}

Runtime Interactions

• Maximize - Full-screen block
• Resize - Drag corner handle
• Collapse - Minimize block
• Reorder - Drag to rearrange

CodeBehind Customization

csharp

Display Editor

The Drawing toolbar for Dashboard provides tools for creating, editing, and organizing visual elements. Users can select and modify dashboard components, adjust properties, and manage text inputs and outputs. The toolbar supports layout adjustments through grouping, borders, and placeholders, enabling structured and interactive dashboard interfaces that enhance user interaction and data presentation.

When the dashboard option is enabled, the Draw Editor's layout is configured in blocks.

To insert an element, select it and drag it into the page. You should see a highlighted rectangle in the location where it will be placed.

Elements can easily be deleted by selecting the element and hitting delete on your keyboard, or moved by selecting the element and dragging it to the desired location.

Dashboard elements have a property called Title that can be accessed through the panel on the left-side of the Draw Editor.

Image Removed

Dashboard Styling 

Below are the main configurations you can use to style your dashboard:

Item

Description

Appearance → Theme

To change the color of the blocks that make up a dashboard, you need to change the theme. We offer twelve different themes, available in both light and dark variations.

Appearance → Fill

You can change the color of the inside of the block by adjusting it here.

Dashboard Item → Title

Change the Title of the block.

Dashboard Item → Margin

Change the margin of the block relative to the border.

Dashboard Item → Padding

Change the padding for the itens inside the block.

Dashboard Features

CodeBehind Callback (Only for Advanced Customization)

The properties of dashboard items can be modified through the callback added to the CodeBehind using the syntax below:

public void OnDashboardCustomizeItem(TCell item)
{
    item.TitleElement.TextAlignment = TextAlignment.Center;
    item.TitleElement.FontStyle = FontStyles.Italic;
    item.TitleElement.FontSize = 20;
    item.TitleElement.Foreground = Brushes.Black;
}

Responsive Canvas Alternative

For mixed vector/responsive designs:

1. Create standard Canvas display
2. Set OnResize to Responsive
3. Check layout anchors per element
4. Combine fixed and responsive objects

Benefits:

• Precise positioning
• Vector graphics
• Selective responsiveness
• Complex layouts

Dashboard vs Canvas Comparison

Best Practices Checklist

•  Choose Right Approach - Grid for data, Canvas for graphics
•  Plan Breakpoints - Test mobile early
•  Use Containers - Group related items
•  Set Minimum Sizes - Prevent crushing
•  Test Scaling - Verify all sizes
•  Optimize Mobile - Simplify for small screens
•  Consider Hybrid - Mix approaches when needed

Troubleshooting

Blocks not arranging:

• Check grid settings
• Verify container nesting
• Review minimum sizes
• Test breakpoints

Mobile view issues:

• Preview in mobile mode
• Check stack settings
• Verify touch targets
• Test orientation

Performance problems:

• Limit chart complexity
• Optimize update rates
• Reduce container depth
• Simplify mobile view

In this section...

Using the .NET callback described above, our titles look something like this picture in runtime.

Image Removed

The Title also supports Tags and Solution Objects by placing them between curly brackets. Curly brackets are used so runtime can handle the element as a Solution variable, instead of as text. See some examples below.

Title: {Client.DateTime}
Title: {Tag.MyTextTag}
Title: {Server.ComputerName}

In runtime, the elements can be maximized by clicking the button indicated by the (1) below or resized by dragging the button indicated by the (2) below.

Image Removed

In this section: