Responsive Dashboards

A dashboard is a type of graphical user interface that provides a quick overview of key performance indicators (KPIs) relevant to a specific goal.

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

Responsive dashboard monitors have the ability to respond dynamically to any screen size, which means that the screen will be rearranged to format content based on the size and shape of the user's screen.

Use Dashboards

• Drag and drop panels easily to display various chart types, such as trend, pie, bars, plus gauges, and more!

• Add any object from the symbol library - whether it's native to Action˳NET or a user-created one!

• Create groups to control your responsive behavior separately from the general page.

• Create dashboards for .NET and HTML5 clients from the same development environment.

• Support our new Project Themes for quick customization!

Creating a display

To create a dashboard screen, you need to navigate to the Draw Editor and click the Create Screen button.

In the pop-up window, activate the check box Dashboard, fill in the parameters as desired and click OK.

The screens of the type Dashboard (panels) are available for display types .Net and HTML5.

Available Elements

The following elements are available in dashboard views:

Symbols: User-made symbols and inline symbols, which are located in the symbol library, can be used in panel displays.

Graphics such as buttons, text boxes, check boxes, etc. are not available by default in dashboard views. To use these graphics on the dashboard screen, you need to create a symbol with these components and use the symbol on the dashboard screen.

Components: external components are listed below.

Alarms: Alarm window and alarm area

Tendency: Trend and drilling window

DataGrid: DataGrid

Groups: You can combine different elements, among the above, into a single group, thus creating a visualization block.

Screen Editor

When the panel option is enabled, the Draw Editor layout is configured in blocks. To insert an element, select it and drag it to the page. You should see a highlighted rectangle where it will be placed.

Elements can be easily deleted by selecting the element and pressing delete on the keyboard, or moved by selecting the element and dragging it to the desired location.

Panel elements have a property called Title that can be accessed through the panel on the left side of the Drawing Editor.

Dashboard features

Color Themes

The appearance of a panel can be modified by applying different themes. In Run-Extension-Themes, you can create and/or customize many different themes to change the appearance of panel elements.

To enable this feature, select the Enable theme check box in the left pane.

Advanced customization

Callback CodeBehind

The properties of a panel's items can be modified through the callback added to 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 look like this at runtime.

Title also supports tags and project objects by placing them in brackets. Brackets are used so that at run time the system can treat the element as a project variable rather than text. See some examples below.

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

In real-time execution, elements can be maximized by clicking the button indicated by(1) below or resized by dragging the button indicated by (2) below.