Versions Compared

Key

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

Easy Heading Macro
headingIndent40
navigationTitleOn this page
selectorh2,h3
wrapNavigationTexttrue
navigationExpandOptiondisable-expand-collapse

Info
iconfalse
titleIntroduction

The following document describes the usage of the Responsive Dashboard Displays. 

How to Use

Overview

A dashboard is a type of graphical user interface which often provides an at-a-glance views view 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.

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

To create a Dashboard pagedashboard display, you need to navigate to the Draw Editorand click on the Create Display button.


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

...

The following elements are available in Dashboard Displays.displays:



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

To use default graphic Graphic elements , such as buttons, TextBoxes, CheckBoxes, etc), a custom-made symbol with the desired elements is required.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. Components: External Components listed below

Bar Chart

CalculatorWeb Browser
Pie ChartCircular PanelAssets/RemoteAssets Configuration

Advanced Pie Chart 

File ExplorerChild Display
3D Pipe ViewerExternal DLLsPage Selector
Report PreviewXPS/PDF Viewer
Map/GMap ControlReport Viewer
  • Alarms: Alarm Window and Alarm Area
  • Trend: Trend Window and Drilling
  • DataGrid: DataGrid
  • Groups: Group You can combine different elements into a single single Group. 


Display Editor

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

...

Elements can easily be deleted (select by selecting the element and hit hitting delete on the your keyboard) , or moved (select and drag the element)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.


Dashboard Features

 Themes

Dashboards can have their appearance A dashboard's appearance can be modified by applying different Themes. On Run-Extension-Themesyou can create and/or customize many Themes that will be applied to Dashboard different themes to change the look and feel of your dashboard elements.


This feature is enabled To enable this feature, select the Enable Theme checkbox in the left Panel CheckBoxpanel. 

CodeBehind Callback (Only for Advanced Customization)

The Dashboard properties of dashboard items can have their propertied be modified through the callback added to the CodeBehind using the syntax below:

...

Using the .Net callback described above, our Titles would titles look something lieke like this picture in Runtimeruntime.

Title in runtime.


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

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


Project Object in title.

 

With the Project runningIn runtime, the elements can be maximized by clicking on the button at indicated by the (1) below or resized at by dragging the button indicated by the (2) below.


Project in runtime.