Build responsive operator dashboards .with automatic layout adaptation

How-to → Pillars → Operator → Displays → Canvas Dashboard | Tutorial | How-To Guide | Reference

Creating a Dashboard

New

Building Dashboard Displays

Overview

This guide walks you through creating responsive Dashboard displays that automatically reorganize content based on screen size. Dashboards provide at-a-glance views of KPIs in a compact, accessible format.

Prerequisites:

• Tags configured for data display
• Understanding of KPI requirements
• Components for visualization (charts, gauges, grids)

Creating Your First Dashboard

Dashboard Display

1. Navigate to Displays → Draw
2. Click Create a New Document
button
3. In the New Display Dialog:
4. Configure: • Name:
Your dashboard
5. Dashboard name
6. • Engine: Portable (
works for both
7. .NET and HTML5)
8. • Template:
Select "
9. BasicDashboard
"
11. Click OK

Dashboard Architecture

Layout

Block-Based System

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

• Each element is contained in a "block"
• Blocks automatically arrange based on screen size
• Responsive layouts intelligently resize for viewing device

How to Add Elements

1. Select element from Components Panel
2. Drag it into the page
3. Drop when highlighted rectangle appears
4. Element automatically creates a block

To remove: Select element and press Delete To move: Drag element to new location

Dashboard Components

Available Elements

From the Components Panel, you can add:

• Grids - DataGrid for tabular data
• Trend Charts - Time-based data visualization
• Pie Charts - Proportional data display
• Bar Charts - Comparative data
• Gauges - KPI indicators
• Symbols - Any Symbol Library object (built-in or custom)

Creating Visual Blocks

To enhance visuals:

• Create Symbols with multiple items in a specific block
• Group items to control responsive behavior separately
• Use Symbol Library for consistent design

Configuring Dashboard Blocks

Block Properties

Dashboard elements have a Title property accessible through the panel on the left side of the Draw Editor.

Dashboard Styling

Dynamic Block Titles

The Title supports Tags and Solution Objects using curly brackets:

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

Curly brackets allow runtime to handle the element as a Solution variable instead of text.

Advanced Customization

CodeBehind Callback

Modify dashboard item properties through CodeBehind:

.NET:

csharp

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

HTML5:

javascript

this.OnDashboardCustomizeItem = function(item)
{
    //item.TitleElement.FontSize = 18;
};

Runtime Features

In runtime, users can:

1. Maximize elements - Click button (1) shown in runtime
2. Resize elements - Drag button (2) shown in runtime

These features provide flexibility for operators to focus on specific data.

Dashboard Capabilities

? Responsive layouts - Automatically resize based on device ? Drag & drop panels - Easy arrangement of components ? Symbol Library integration - Add any built-in or custom symbol ? Group controls - Manage responsive behavior for item groups ? Cross-platform - Create for both .NET and HTML5 from same environment ? Solution Themes - Quick styling with built-in themes

Best Practices

Design Considerations

• Place most important KPIs prominently
• Group related information together
• Test responsive behavior across devices
• Use consistent styling via themes

Performance Tips

• Limit number of trend charts (resource-intensive)
• Consider update rates for different components
• Test with actual data volumes

Common Patterns

KPI Dashboard

• Top row: Key metrics in gauge blocks
• Middle: Trend chart spanning multiple columns
• Bottom: Data grid with detailed information

Operations Dashboard

• Status indicators using symbols
• Real-time trends
• Alarm viewer
• Production data grid

Troubleshooting

Blocks not aligning properly

• Check margin and padding settings
• Verify theme is applied consistently

Poor responsive behavior

• Test at different screen sizes
• Adjust block sizes and arrangements
• Consider grouping related items

Performance issues

• Reduce number of complex components
• Check update frequencies
• Optimize data queries

Next Steps

• [Smart Symbols →] Create custom symbols for dashboard blocks
• [Graphical Elements →] Explore available components
• [Display Themes →] Customize dashboard appearance

This revised version strictly uses only the information from your provided documentation, avoiding any assumptions or external knowledge about dashboard features not mentioned in your references.

M

In order to enrich teh pages, lets an interaction you look the previous page yo ucreated, going beyond my documetas, as ask me that applies or not our product, if not I will explain how that works in our product to decise if we should add the doc. Go ahead, ask!

Looking at the dashboard guide I created, let me ask about some features I mentioned that weren't explicitly in your documentation:

Questions about Dashboard Features:

1. Block resize handles and maximize buttons - I mentioned that blocks have "resize handles at corners" and a "maximize button for full-screen view". Your documentation shows runtime buttons (1) and (2) for maximize/resize, but are these actually corner handles or specific buttons? How exactly does the resize mechanism work?
2. Responsive breakpoints - I created a table showing specific pixel breakpoints (Desktop >1920px, Tablet 768-1366px, etc.) and how many blocks per row at each size. Does your dashboard actually have defined breakpoints, or does it continuously reflow? What's the actual responsive behavior?
3. Block reordering - I mentioned users can "reorder" blocks at runtime. Your documentation doesn't mention this - can users actually drag blocks to different positions during runtime, or are positions fixed once designed?
4. Update rates configuration - I suggested configuring different refresh rates for components (Critical KPIs: 1 second, Trends: 5-10 seconds). Is there actually a way to set individual update rates for dashboard blocks, or do they all use the same refresh cycle?
5. Mobile-specific visibility - I mentioned using underscore (_) to hide blocks on mobile. Is this actually how you control mobile visibility in dashboards, or does this only apply to Layouts?
6. Grid system details - I described it as "grid-based" but your documentation just says "blocks". Is there an actual grid system with defined columns/rows that developers work with, or is it more freeform?
7. Groups for responsive control - Your documentation mentions "Create groups to control responsive behavior for the entire group" but doesn't explain how. How exactly do groups work in dashboards for controlling responsive behavior?

Please clarify these points so I can create accurate documentation that reflects how your dashboard system actually works!

System

The dashboard automatically switches between Grid and StackPanel based on display width, ensuring optimal layout on all devices.

Block Controls

Adding Dashboard Elements

Available Components

• DataGrid - Tabular data with sort/filter

1. On Designer the two buttons we have are for delete and move (see image). For Resizing, int both designer and runtiem, you drag the gridline separator. In runtime only you have a maxime button (see image), that makes that nlock full scrren, and button show to put it back.
2. We are using a smpler criteria now, if the displays width gest smaller than 400, we swith from a GRID control to a VERTICAL Statck Panel or oganize the blocks
3. Y,es then can using the button I mention on item 1
4. Our displays are EVENT DRIVEN, all variables theh displasy uses, are subscribed to teh server, and the displsy will receive event-driven message with data changes in eral time. That happens in around 100ms to 100+, typically less than one second alwasy, as it event driver, rare excdptoin to disalsy of losts of teabls and data chaign all times.
5. Mobile-specific visibility: I LOVED your ideia, I am adding the product today, by mobile it meas the STACK version for the dahsboard, which alawy the entry mponit for mobilen, Inteasd of using (_) to hide the blockes, the block will have the right side (the properites side bar) a check box, default off, to Hide Block on Mobile, YOu can keep on the documentions.
6. It is GRID, in fact orignally we callsed the dipslsy CANVAS adn GRID to make reference to the underly WPF model used to render the pages, BUT, as the dashboard will chage dynamics form a GRID to vertical stackpnale for mobile, we decided to keep naimg dashboard displays. This tech eexplatin is not a secret, we can it cinclude in the documenat (either here, or concept, ore ference, or all)
7. We have a group Icon on the tool bar see attached, that drops a goup container, so objects patesd there remains alwasy as one block (see image)
8. It not on the documetnion bue we addeed coll conternias also StackPanel Horizonta, StackPanel Vertical, and Wrapanel, see (image).

M

please continue

Thank you for these clarifications! This is very helpful. Let me revise the dashboard documentation with this accurate information:

Building Dashboard Displays (How-to Guide)

Overview

This guide walks you through creating responsive Dashboard displays that automatically reorganize content based on screen size. Dashboards provide at-a-glance views of KPIs in a compact, accessible format.

Prerequisites:

• Tags configured for data display
• Understanding of KPI requirements
• Components for visualization (charts, gauges, grids)

Creating Your First Dashboard

Step 1: Create Dashboard Display

1. Navigate to Displays → Draw
2. Click Create a New Document button
3. In the New Display Dialog:
   • Name: Your dashboard name
   • Engine: Portable (works for both .NET and HTML5)
   • Template: Select "BasicDashboard"
4. Click OK

Understanding Dashboard Layout

Grid-Based System

Dashboards use a Grid control for layout (based on WPF Grid model):

• Elements are arranged in blocks within the grid
• Grid automatically switches to Vertical StackPanel when width < 400px (mobile view)
• This responsive behavior ensures usability across all devices

Block Controls

Each dashboard block has controls:

• Move button (?) - Reorder blocks in runtime
• Delete button (?) - Remove block in Designer
• Maximize button - Full screen view (runtime only)
• Resize - Drag gridline separators between blocks

Adding Dashboard Elements

Basic Components

From the Components Panel, drag and drop:

DataGrid - Tabular data display
• Trend Charts - Real-time time series
• Pie/Bar Charts - Data visualization
• Gauges - KPI indicators
• Symbols -
Custom or library symbols
• Library or custom components

Container Types

Use toolbar buttons to add containers:

Using Groups

1. Click Group icon in toolbar
2. Drop
group
3. container on dashboard
4. Place related items inside
- they stay together
6. Group moves/resizes as one
block
7. unit

Configuring

Blocks

Block Properties

Property	Default	Description
Title	-	Block header (supports tags)
Margin	4	Space around block
Padding	0	Space inside block
Width/Height	Auto	Size control
Hide on Mobile	Unchecked	Hide in stack view

Dynamic Titles

// Use curly brackets for real-time values
Title: {Tag.ProductionRate} units/hr
Title: {Client.DateTime}
Title: Line Status: {Tag.LineStatus}

Dashboard Styling

Appearance Options

• Themes - 12 built-in themes (light/dark)
• Fill - Block background color
• Font - Text styling

CodeBehind Customization

.NET:

Select any block to configure in right sidebar:

Cell Properties:

• Title: Block header text (supports dynamic values)
• Margin: Space around block (default: 4)
• Padding: Space inside block (default: 0)
• Width/Height: Auto or fixed size
• Hide Block on Mobile: New checkbox for mobile visibility

Dynamic Titles

Use curly brackets for real-time values:

Title: {Client.DateTime}
Title: {Tag.MyTextTag}
Title: Production: {Tag.ProductionRate} units/hr

Dashboard Styling

Appearance Settings

CodeBehind Customization

For advanced styling:

.NET:

csharp

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

HTML5:

javascript

this.OnDashboardCustomizeItem = function(item)
{
    item.TitleElement.FontSize = 18;
};

Responsive Behavior

Automatic Layout Switching

Mobile Optimization

Configure blocks for mobile:

Keeps dashboard focused on essential KPIs
Real-Time 
 Data 
 Updates
Event-Driven Architecture
Dashboard updates are fully event-driven:
All 
 displayed variables are subscribed 
tags automatically subscribe to server
Changes trigger 
 real-time 
immediate updates
Typical latency: 100ms - 1 second
No polling or 
 fixed 
 refresh 
 rates 
configuration needed
This ensures
Benefits:
Minimal network traffic
Instant value updates
 when values change
Efficient resource usage
Mobile Optimization
Responsive Behavior
Dashboard detects display width
At ≤400px, switches to StackPanel
Blocks stack vertically
Hidden blocks don't render
Mobile Configuration
Check "Hide Block on Mobile" for non-essential KPIs
Test at 400px width during design
Prioritize critical information at top
Runtime Features
User Controls
In runtime, operators can:
Operator Controls
Maximize
 blocks
 - 
 Click maximize button for full screen
Full screen focus on block
Restore
 view
 - Return from maximized
 state
Resize
 blocks
 - Drag 
 gridline separators
gridlines between blocks
Reorder
 blocks - Use move button to rearrange
Interactive Elements
Within blocks, users interact with:
Charts (zoom, pan, select ranges)
Grids (sort, filter, scroll)
Controls (buttons, inputs, selections)
Best Practices
Layout Design
? Use groups for related items that should stay together ? Test at 400px width to see mobile layout ? Hide non-essential blocks on mobile ? Place KPIs prominently at top ? Use consistent themes across dashboards
Performance Optimization
? Leverage event-driven updates - No manual refresh needed ? Limit complex visualizations per dashboard ? Use symbols for repeated elements ? Test with real data volumes
 - Move blocks to new positions
Common Dashboard Patterns
Operations Dashboard
 with Groups
[Group: Production Status]
  - Line 1 Gauge | Line 2 Gauge | Line 3 Gauge
[Trend Chart - Full Width]
[Group: Alarms and Events]
  - Active Alarms Grid | Event Log
KPI Dashboard
 with Containers
[Horizontal StackPanel: Key Metrics]
  - Revenue | Costs | Efficiency | Quality
[Group: Trends]
  - Production Trend | Quality Trend
[DataGrid: ShiftDetail DetailsData]
Troubleshooting
Blocks not resizing properly
Check if Width/Height set to Auto
Verify gridline separators are visible
Test in both grid and stack modes
Mobile view issues
Preview at <400px width
Check "Hide Block on Mobile" settings
Verify essential blocks remain visible
Data not updating
Confirm tags are properly subscribed
Check event-driven connections
Typical update within 1 second
Next Steps
[Smart Symbols →] Create reusable dashboard components
[Container Types →] Master StackPanels and WrapPanels
Best Practices Checklist
Design
 Use groups for related items
 Test at 400px for mobile view
 Place critical KPIs at top
 Apply consistent themes
Performance
 Leverage event-driven updates
 Limit complex visualizations
 Test with production data volumes
[Graphical Elements →] Explore all available components

In this section...