Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

 This page contains information about responsive dashboards, such as its features and how to use them.

On this page:

Table of Contents
maxLevel3
stylenone


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

    Project

    Solution Themes for quick styling!

Responsive display examplesImage RemovedImage Added

Configuration

Workflow

A dashboard is a type of graphical user interface which provides an at-a-glance view of key performance indicators (KPIs) relevant to a particular objective.

A data dashboard is the most efficient way to track multiple data sources since it provides a central location for businesses to monitor and analyze performance. The data is displayed in the form of tables, line charts, bar charts, and gauges.

Responsive dashboard displays have the ability to respond dynamically to any display size, which means the display will rearrange to format content based on the size and shape of the user's display. 

Creating

a Display

Dashboards

To create a dashboard display, you need to go to the Displays/Draw Editorand click the Create a New Document button.

Button localizationImage Removed

In the popup window, enable the Dashboard checkbox, fill in the parameters as desired, and click OK.New Display Dialog, select the BasicDashboard template.

Image AddedImage Removed

Info

Dashboards are available for both .NET and HTML5 display types.



Available Elements

On the Components Panel, a variety of graphical elements for designing a new dashboard display are available. These elements include charts for visualizing data trends, gauges for monitoring metrics, and custom symbols for tracking KPIs. Each element can be selected and configured to fit the dashboard's needs. For more details on the available elements in each category, refer to the Graphical Components.

Info

To take your visuals to the next level, you can create Symbols with the itens that you want in a specific block. Learn more at Smart Symbols


Image Added

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.

The following elements are available in Dashboard displays:

Tools available in the Drawing environmentImage Removed

  • Symbol Library: User-made and built-in symbols, located in the Symbol library, can be used in dashboard displays. 

Graphic elements such as buttons, textboxes, and checkboxes are not available by default in dashboard displays. To use these graphic elements in your dashboard display, you need to create a symbol with these components and use the symbol in your dashboard display. 

  • Components: The external components are listed below. 

External components

Bar Chart

CalculatorWeb BrowserPie ChartCircular PanelAssets/RemoteAssets Configuration

Advanced Pie Chart 

File ExplorerChild Display3D Pipe Viewer

WPF Control

External DLLs

Page SelectorReport PreviewXPS/PDF ViewerMap/GMap/ESRIMap ControlReport Viewer
  • Alarms: Alarm Window and Alarm Area
  • Trend: Trend Window and Drilling
  • DataGrid: DataGrid
  • Groups: You can combine different elements into a single Group. 

Display Editor

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.Image Removed

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.

The Title property is located in the left panelImage RemovedImage Added

Dashboard

Features

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

Themes

A dashboard's appearance can be modified by applying different Themes. On Displays → Theme Colors, you can create and/or customize many different themes to change the look of your dashboard elements.

Themes tab where you can customize your element's colorsImage Removed

Image Removed

To enable this feature, select the Enable Theme checkbox in the left panel. 

Enable Theme checkbox is located in the left panel.Image Removed

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:

Code Block
*	.NET:
public void OnDashboardCustomItemOnDashboardCustomizeItem(TDashboardBorderTCell item)
{
item.TitleElement.TextAlignment = TextAlignment.Center; item.TitleElement.FontStyle = FontStyles.Italic; item.TitleElement.FontSize = 20; item.TitleElement.Foreground = Brushes.Black;
}

*	HTML5:
this.OnDashboardCustomItemOnDashboardCustomizeItem = function(item)
{
//item.TitleElement.FontStyle = 1;
//item.TitleElement.HorizontalAlignment = 1;
//item.TitleElement.FontSize = 18;
};


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


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

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

Image Removed

 

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.



In this section

...

:

Page Tree
root@parent
spacesV10