Dashboard Elements

Every desktop dashboard consist of elements. Each element is opened in a separate sub-window within dashboard window. Element properties include:

• Title and location of element's window
• Type and properties of the element itself
• Validity expression that allows to exclude certain elements if target context (i.e. context for that a relative dashboard is opened) doesn't match specific criteria

The following dashboard element types are supported:

• Widget
• Data Table
• Properties
• Event Log
• System Tree
• Report
• Dashboard
• Class Instance Fields
• Class Instance List
• HTML Snippet

This element opens a widget. If the widget is relative, it's started for the same context for those the dashboard is being opened.

Element properties:

• Widget. The path of widget context.

This element evaluates an expression that should evaluate to a Data Table. The Data Table's data is shown in a Data Table Editor as a part of the dashboard.

Data Table element is ideal for showing query results within a dashboard.

Element properties:

• Data Expression. Expression to be evaluated to get data that will be displayed by the component. It must return a Data Table.

• Refresh Period. Period of expression re-evaluation, i.e. data refresh rate.

First Expression evaluation is performed by the server, and pre-constructed table is sent to Iotellect Client or other Iotellect Server user interface. Further evaluations (i.e. every Refresh Period) are performed on the side of Iotellect Client or other user interface.

• Read Only. Defines whether the data will be editable or not.
• Enable Popup Menu. Defines whether the popup menu will be shown or not.

• Icon ID. ID of the icon to show in the title of element's window.
• Help ID. ID of the help article that the element should refer to.
• Help. Text of a multi-line informational message that will appear on the top of Data Table Editor component.
• Show Toolbar. Defines whether Data Table Editor toolbar will be visible.

• Show Header. Defines whether Data Table Editor header will be visible. Undefined value enables optimal table-specific default behavior.
• Show Line Numbers. Defines whether line numbers will be visible in Data Table Editor. Undefined value enables optimal table-specific default behavior.
• Horizontal Scrolling. Defines whether horizontal scrolling will be turned on by default. Undefined value enables optimal table-specific default behavior.

Shows a Properties Editor inside a dashboard.

Element properties:

• Context. Context those properties to show.
• Group. Group of properties to show, or NULL to show manually specified properties.
• Properties. List of properties to show if Group is NULL.
• Simple Mode. Use Properties Editor's simple mode.
• Initially Read-Only. Lock the editor upon startup. It will be necessary to click Unlock toolbar button to start editing.

Shows an Event Log inside a dashboard.

Element properties:

• Event Filter. Context path of event filter to use.
• Events. List of specific events to show in the log, specified by "Context Path - Event Name" pairs. This option is active if no filter is specified.
• Current Events. Flag indicating whether or not to show Current Events section of the log.
• Event History. Flag indicating whether or not to show Event History section of the log.
• Preload Event History. Enables/disables loading event history upon Event Log startup.
• Show Context Names. Controls visibility of Context column.
• Show Event Names. Controls visibility of Event column.
• Show Event Levels. Controls visibility of Level column.
• Show Event Data. Controls visibility of Data column.
• Show Event Acknowledgements. Controls visibility of Acknowledgements column.

Shows a custom-rooted System Tree component inside a dashboard.

Element properties:

• Root. Path of the tree's root context.
• Related Actions. Flag that controls visibility of Related Actions pane.
• Context Menu. Flag that controls visibility of Context Menu.

• Show Toolbar. Defines whether System Tree toolbar will be visible.
• Node Click Expression.This expression is evaluated when any node in the System Tree is clicked.

• Node Filter Expression. This expression sets a custom filter for nodes displayed in the System Tree. If this expression evaluates to true, the node is displayed in the System Tree. Otherwise, the node is not displayed.

Shows a report viewer inside a dashboard.

Element properties:

• Report. Path of a report context.

Not every report is supported in the Web UI version. The report will be opened in a new browser tab or downloaded depending on the selected report format.

Opens another dashboard inside this dashboard's window.

Element properties:

• Dashboard. Path of a dashboard context.

Shows contents of the web page inside dashboard.

Element types:

• Frame. Displays URL address of a web page.
• HTML. Displays HTML page. Supports CSS elements.

You can enable or disable html check using the Validity HTML Check option.

• Expression. Evaluates string expression to HTML page and shows it inside dashboard.

You can execute custom expression from HTML snippet element using this link: <a onclick="<e>{users.admin.dashboards.db2:open!}</e>" href="javascript:;">Click Me!</a>

ReactJS Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p><p>React is loaded as a script tag.</p>
<p>This is the first comment.<div class="like_button_container" data-commentid="1"></div></p>
</body>

<script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script type="text/javascript">
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}

render() {
let isLiked = localStorage.getItem("likedState") || this.state.liked;
if (isLiked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => { localStorage.setItem("likedState", true); this.setState({ liked: true })} },
'Like'
);
}
}

document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
</script></html>

Vue.js Example:

<!DOCTYPE html>
<html>
<head>
<title>Vue.js</title>
<meta charset="utf-8" />
</head>
<body>

<div id="app">
<input type="text" v-on:input="setMessage" />
<p>{{message}}</p>
</div>

<script src="https://unpkg.com/vue"></script>

<script>
'use strict';
var app = new Vue({
el: '#app',
data: {
message: localStorage.getItem("vueMessage") || 'Hello Vue!'
},
methods: {
setMessage: function setMessage(event) {
this.message = event.target.value;
localStorage.setItem("vueMessage", this.message);
}
}
});
</script></body></html>

AngularJS Example:

<!DOCTYPE html>
<html lang="en">
<title>AngularJS First Application</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>

<div ng-app>
<p>Enter Some text : <input type="text" ng-model="someText"></p>
<p>Hello {{ someText }}!</p>
</div>

</body>
</html>

This element displays a set or a group of class instance fields in a Data Table Editor component. It's only available for class instance dashboards.

Element properties:

• Read Only. Defines whether the data will be editable or not.
• Storage Context. Defines the storage context to get data from. For classes, should point to a class context.
• View. Defines a view to use.
• Custom Query. Defines an SQL query to execute. Should be only used when Storage Context points to an external database. Available only if View is Custom.
• Class/Table. A class or table to get data from. Available only if View is Custom.
• Field Set Type. Defines whether a pre-defined group of fields or a custom set of fields will be shown.
• Group. Defines which group of fields to display. Available only if Field Set Type is Group.
• Fields. Defines which fields to display. Available only if Field Set Type is Selected Fields.
• Icon ID. ID of the icon to show in the title of element's window.
• Help ID. ID of the help article that the element should refer to.
• Help. Text of a multi-line informational message that will appear on the top of Data Table Editor component.
• Show Toolbar. Defines whether Data Table Editor toolbar will be visible.

• Show Header. Defines whether Data Table Editor header will be visible. Undefined value enables optimal table-specific default behavior.
• Show Line Numbers. Defines whether line numbers will be visible in Data Table Editor. Undefined value enables optimal table-specific default behavior.
• Horizontal Scrolling. Defines whether horizontal scrolling will be turned on by default. Undefined value enables optimal table-specific default behavior.

This element displays a list of class instances in a Data Table Editor component.

Element properties:

• Read Only. Defines whether the data will be editable or not.
• Storage Context. Defines the storage context to get data from. For classes, should point to a class context.
• View. Defines a view to use.
• Custom Query. Defines an SQL query to execute. Should be only used when Storage Context points to an external database. Available only if View is Custom.
• Class/Table. A class or table to get data from. Available only if View is Custom.
• Filter. Configures filtering rules applied to instances. Available only if View is Custom and Custom Query is not specified.
• Sorting. Configures sorting rules applied to instances. Available only if View is Custom and Custom Query is not specified.
• Relation. If the instance list if shown on a Class Instance dashboard of another class, it's possible to show only instances that are linked to the instance displayed on current dashboard. In this case it's necessary to select a relation that will be used to filter instances properly.
• Field Set Type. Defines whether a pre-defined group of fields or a custom set of fields will be shown.
• Group. Defines which group of fields to display. Available only if Field Set Type is Group.
• Fields. Defines which fields to display. Available only if Field Set Type is Selected Fields.
• Icon ID. ID of the icon to show in the title of element's window.
• Help ID. ID of the help article that the element should refer to.
• Help. Text of a multi-line informational message that will appear on the top of Data Table Editor component.
• Show Toolbar. Defines whether Data Table Editor toolbar will be visible.

• Show Header. Defines whether Data Table Editor header will be visible. Undefined value enables optimal table-specific default behavior.
• Show Line Numbers. Defines whether line numbers will be visible in Data Table Editor. Undefined value enables optimal table-specific default behavior.
• Horizontal Scrolling. Defines whether horizontal scrolling will be turned on by default. Undefined value enables optimal table-specific default behavior.
• Add Row Action. Allows to override "Add row" in class instance list dashboards. By default will add new class instance. When overridden, selected action will be executed.
• Add Row Action Show Result. Enable this parameter to show "Add row" interactive actions. The disabled parameter will hide such actions. Refer to Interactive Actions for more details.
• Add Row Action Parameters. Defines Add Row Action parameters.
• Remove Row Action. Allows to override "Remove row" in class instance list dashboards. By default will delete selected class instances. When overridden, selected action will be executed.
• Remove Row Action Parameters. Defines Remove Row Action parameters.
• Editing In New Window. Allows to edit a table row in a separate window.
• Update Row Action. Allows to override "Editing In New Window" action. When overridden, selected action will be executed.
• Update Row Action Parameters. Defines Update Row Action parameters.

Was this page helpful?

Tell us more

Send

Thank you!