Page History

The Dashboard component exposes layout capabilities to end users in a Perspective session so they have the ability to customize their dashboard layout for their individual needs. Widgets are configured in the Designer by designers and made available to Perspective session users. The Dashboard component uses a grid system based off of CSS grid specifications to position and place widgets.The Property Editor of the Dashboard component is where the designer controls the general layout of the grid by specifying the responsive mode: fixed or stretch, if the dashboard is editable, and if each widget is configurable and available in a Perspective session.

End users can choose from a list of pre-configured widgets to configure their dashboards in a Perspective session. They can add, remove, resize, move around, and configure widgets, including the ability to interact with widgets in a session such as entering text in a text field, displaying/hiding components in a widget, and even use parameters to pass a property to a specified view.

To learn more, refer to Configuring a Dashboard.

Properties

Perspective_property

Name Description Property Type

pack

New_in

Version	8.1.4

Enables widget packing algorithm. When disabled, widgets can be placed anywhere on the Dashboard and the component will not try to rearrange them in an optimal layout.

boolean

grid

The grid layout mode defines the responsive behavior of the grid and its cells: fixed and stretch.

Expand

title	Click here to see grid modes

Name	Description	Property Type
fixed	In fixed mode, the grid’s dimensions can be greater or less than the full dimensions of its containing element, and its cells are given a static size, effectively creating a scrollable grid when cells overflow beyond the containing elements dimensions.	value: string
stretch	In stretch mode, the grid’s dimensions are restricted to the full dimensions of its containing element, and its cells consume one free unit of space, effectively growing and shrinking with the containing element.	value: string

object

isEditing Controls the runtime edit mode of the dashboard component. Stays in sync with the edit/play toggle control located at the bottom of the component. boolean

editingToggle

Whether to display the dashboard editing toggle option. When disabled, hides the built in edit/play toggle control located at the bottom of the component. Disable this if you’d like to implement your own toggle that updates the isEditing prop in a controlled fashion. Default is true.

boolean

fixed

Visible when the grid mode is fixed .

Expand

title	Click here to see fixed properties

Name	Description	Property Type
cellSize	Width and height of a grid cell. Exclusively for fixed mode.	numeric
rowCount	The number of rows in the grid.	numeric
columnCount	The number of columns in the grid.	numeric
rowGuttersize	The gap size between grid rows.	numeric
columnGutterSize	The gap size between grid columns.	numeric

object

stretch

Visible when the grid mode is stretch .

Expand

title	Click here to see stretch properties

Name	Description	Property Type
rowCount	The number of rows in the grid.	numeric
columnCount	The number of columns in the grid.	numeric
rowGutterSize	The gap size between grid rows.	numeric
columnGutterSize	The gap size between grid columns.	numeric

object

widgets

An array of configuration objects for widgets currently in use the dashboard display.

Expand

title	Click here to see widget's properties

Name

Description

Property Type

name

The unique widget name.

value: string

viewPath

The current configuration view path of the widget.

value: string

viewParams

Parameters being passed to the view.

New_in

Version	8.1.4

As of 8.1.4 a dropdown list of parameters is available when the user clicks the Add Object Member icon. This makes it easy to add parameters from the rendered view.

object

isConfigurable

Whether this widget is configurable during runtime. If enabled, dashboard is in edit mode, the toggle becomes available when the widget is selected which is used to configure the widgets view. When toggled on, the configuring view parameter will be true.

value: boolean

header

Configuration object for the widget header.

Expand

title	Click here to see header properties

Name	Description	Property Type
enabled	When enabled, renders the widget header.	value: boolean
title	The header title to display.	value: string
style	Style to be applied to the widget header. Full menu of style options is available. You can also specify a style class.	object

object

body

Configuration object for the widget body.

Expand

title	Click here to see body properties

Name	Description	Property Type
style	Style to be applied the widget body. Full menu of style options is available. You can also specify a style class.	object

object

minSize

Specifies the widgets minimum allowable size when determining widget layout. Users may not resize widgets below these dimensions.

Expand

title	Click here to see minSize properties

Name	Description	Property Type
columnSpan	The minimum allowable columns that this widget may span.	value: numeric
rowSpan	The minimum allowable rows that this widget may span.	value: numeric

object

position

The widget position in the dashboard. Whenever a widget is added, resized, or moved the widget position object is automatically updated.

Expand

title	Click here to position properties

Name	Description	Property Type
rowStart	The top position of the widget.	value: numeric
rowEnd	The bottom position of the widget.	value: numeric
columnStart	The left position of the widget.	value: numeric
columnEnd	The right position of the widget.	value: numeric

object

style

Style to be applied the widget. Full menu of style options is available. You can also specify a style class.

object

array

availableWidgets

An array of widgets as configuration objects that are available to the user. When a widget is added to the dashboard via the add widget modal, this configuration object is copied to the widgets in use array, and act as the widgets defaults.

Expand

title	Click here to availableWidgets properties

Name

Description

Property Type

viewPath

The current configuration view path of the widget.

string

viewParams

Parameters being passed to the view at the specified path.

New_in

Version	8.1.4

As of 8.1.4 a dropdown list of parameters is available when the user clicks the Add Object Member icon. This makes it easy to add parameters from the rendered view.

object

isConfigurable

Whether this widget is configurable during runtime. If enabled and the dashboard is in edit mode, the toggle becomes available when the widget is selected which is used to configure the widgets view. When toggled on, the configuring view parameter will be 'true.'

value: boolean

defaultSize

Specifies the widgets default size adding a widget with no size specified.

Expand

title	Click here to see defaultSize properties

Name	Description	Property Type
columnSpan	The default columns that this widget will span.	value: numeric
rowSpan	The default rows that this widget will span.	value: numeric

object

minSize

Specifies the widgets minimum size used when determining widget layout.

Expand

title	Click here to see minSize properties

Name	Description	Property Type
columnSpan	The minimum allowable columns that this widget may span.	value: numeric
rowSpan	The minimum allowable rows that this widget may span.	value: numeric

object

Component Events

Perspective_component_events

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Examples

In addition to the demonstration below, learn more about the Dashboard component on the Configuring a Dashboard page.

Demonstration

This image shows the dashboard in a Perspective Session with one widget.

Property	Value
props.grid	stretch
props.isEditing	true
props.editingToggle	true
props.stretch.rowCount	6
props.stretch.columnCount	14
props.widgets.0.name	Widget 3
props.widgets.0.viewPath	Widget 3
props.widgets.0.isConfigurable	true
props.widgets.0.header.enabled	true
props.widgets.0.header.title	Widget 3
props.availableWidgets.2.viewPath	Widget 3
props.availableWidgets.2.isConfigurable	true
props.availableWidgets.2.name	Widget
props.availableWidgets.2.header.enabled	true
props.availableWidgets.2.header.title	Widget 3

This same example also allows the user to interact with the widget in Edit mode when the 'isConfigurable' property is set to 'true.' The view uses a 'configuring' parameter to go into 'configuring' mode allowing users to configure the widget. It allows the user to show/hide the Thermometer showing the temperature of the Tank by simply checking/unchecking the ShowTemp checkbox.

By unchecking Show Temp, the Thermometer component is removed from the widget on the dashboard in a Perspective Session.

OTHER USER MANUAL VERSIONS

GETTING STARTED

OTHER EDITIONS

LAUNCHERS

MODULES

PLATFORM

APPENDIX

TUTORIALS & HELPFUL TRICKS

PARTNER LINKS

RESOURCES

OTHER USER MANUALS

Offline Ignition Manual

Employees

Versions Compared

Old Version 20

New Version Current

Key

Properties

Component Events

Examples

Demonstration