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

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!

M

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

Container Options

Use toolbar buttons to add containers:

• Group Container - Keeps multiple items as one block
• Horizontal StackPanel - Arranges items horizontally
• Vertical StackPanel - Arranges items vertically
• WrapPanel - Wraps items to next line

To group items:

1. Click Group icon in toolbar
2. Drop group container on dashboard
3. Place items inside - they stay together as one block

Configuring Dashboard Blocks

Block Properties

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:

• Check "Hide Block on Mobile" in properties
• Block won't appear in StackPanel view
• Keeps dashboard focused on essential KPIs

Real-Time Data Updates

Event-Driven Architecture

Dashboard updates are event-driven:

• All displayed variables are subscribed to server
• Changes trigger real-time updates
• Typical latency: 100ms - 1 second
• No polling or fixed refresh rates needed

This ensures:

• Minimal network traffic
• Instant updates when values change
• Efficient resource usage

Runtime Features

User Controls

In runtime, operators can:

1. Maximize blocks - Click maximize button for full screen
2. Restore view - Return from maximized state
3. Resize blocks - Drag gridline separators
4. 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

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: Shift Details]

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
• [Graphical Elements →] Explore all available components