Dashboard Displays

How to Use

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 at the Create Display button.

Creating a new display

At the popup window enable the Dashboard CheckBox, fill the other parameters as desirer and click on OK.

Enabling dashboard.

Available Elements

The following elements are available in Dashboard Displays.

Elements in Dashboard displays.

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

To use the 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

The Draw Editor when dashboard option is enabled has its layout configured in blocks.

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

Page Configuration.

Elements can easily be deleted (selecting the element and hit delete on the keyboard) or moved (selecting the element and dragging it).

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

Title Configuration.

Dashboard Features

 Themes

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

you can create and customize many Themes that will be applied to Dashboard elements.

Theme customization.

This feature is enabled on the left Panel CheckBox.

Enabling themes.

CodeBehind Callback (Only for Advanced Customization)

The Dashboard items can have their propertied 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.