Responsive Dashboards

Overview

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

A data dashboard is the most efficient way to track multiple data sources because 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.

Creating a Display

To create a Dashboard page, you need to navigate to the Draw Editor and click on the Create Display button.

In the popup window, you enable the Dashboard checkbox, fill in the parameters as desired, and click on OK.

Available Elements

The following elements are available in Dashboard Displays.

• Symbols: All of the built-in symbols from the Symbol library as well as user made Symbols can be used in dashboard displays.

To use default graphic elements (such as buttons, textboxes, checkboxes, etc), a custom-made symbol with the desired elements is required.

• Components: External Components listed below

• Alarms: Alarm Window and Alarm Area
• Trend: Trend Window and Drilling
• DataGrid: DataGrid
• Groups: Group different elements into a single 

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 onto the page. You should see a highlighted rectangle in the location where it will be placed.

Elements can easily be deleted (select the element and hit delete on the keyboard) or moved (select and drag the element).

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

Dashboard Features

 Themes

Dashboards can have their appearance modified by applying different Themes. On Run-Extension-Themes,

you can create and customize many different themes to change the look and feel of your Dashboard elements.

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

CodeBehind Callback (Only for Advanced Customization)

Dashboard items can have their properties modified through the callback added to the CodeBehind using the syntax below:

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

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

Using the .Net callback described above, our Titles would look something lieke this in Runtime.

Title in runtime.

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

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

Project Object in title.

With the Project running, the elements can be maximized clicking on the button at (1) or resized at (2).

Project in runtime.