You're currently browsing the Ignition 8.0 docs. Click here to view the latest docs.


The following feature is new in Ignition version 8.0.5
Click here to check out the other new features


General

Component Palette Icon:

Description

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

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
grid

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

NameDescriptionProperty Type
fixedIn 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 dropdown
stretchIn 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 dropdown
object
isEditingControls 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
editingToggleWhether 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.

NameDescriptionProperty Type
cellSizeWidth and height of a grid cell. Exclusively for fixed mode.numeric
rowCountThe number of rows in the grid.numeric
columnCountThe number of columns in the grid.numeric
rowGuttersizeThe gap size between grid rows.numeric
columnGutterSizeThe gap size between grid columns.numeric
object
stretch

Visible when the grid mode is stretch.

NameDescriptionProperty Type
rowCountThe number of rows in the grid.numeric
columnCountThe number of columns in the grid.numeric
rowGutterSizeThe gap size between grid rows.numeric
columnGutterSizeThe gap size between grid columns.numeric
object
widgets

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

NameDescriptionProperty Type
nameThe unique widget name.value: string
viewPathThe current configuration view path of the widget.value: string
viewParamsParameters being passed to the 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.

NameDescriptionProperty Type
enabledWhen enabled, renders the widget header.value: boolean
titleThe header title to display.value: string
styleStyle to be applied to the widget header. See style options.object
object
body

Configuration object for the widget body.

NameDescriptionProperty Type
styleStyle to be applied the widget body. See style options.object



object
minSize

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

NameDescriptionProperty Type
columnSpanThe minimum allowable columns that this widget may span.value: numeric
rowSpanThe 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.

NameDescriptionProperty Type
rowStartThe top position of the widget.value: numeric
rowEndThe bottom position of the widget.value: numeric
columnStartThe left position of the widget.value: numeric
columnEndThe right position of the widget.value: numeric
object
styleStyle to be applied the widget. See style options.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.

NameDescriptionProperty Type
viewPathThe current configuration view path of the widget.string
viewParamsParameters being passed to the view at the specified path.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.

NameDescriptionProperty Type
columnSpanThe default columns that this widget will span.value: numeric
rowSpanThe default rows that this widget will span.value: numeric
object
minSize

Specifies the widgets minimum size used when determining widget layout.

NameDescriptionProperty Type
columnSpanThe minimum allowable columns that this widget may span.value: numeric
rowSpanThe minimum allowable rows that this widget may span.value: numeric
object
categoryA category in which to group this widget when displayed in the add widgets modal.value: string
nameA unique name to provide this widget. This is used in the add widget modal. If no name is specified, its value will be blank. This is a required property.value: string
header

Widget header configuration.

NameDescriptionProperty Type
enabledWhether the widget header should show.value: boolean
titleThe header title to display.value: string
styleStyle to be applied the widget. See style options.object
object
body

Widget body configuration.

NameDescriptionProperty Type
styleStyle to be applied the widget. See style options.object
object
styleStyle to be applied to the widget. See style options.object
array

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.

Example

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


PropertyVlaue
props.gridstretch

props.isEditing

true
props.editingToggletrue
props.stretch.rowCount6
props.stretch.columnCount14
props.widgets.0.nameWidget 3
props.widgets.0.viewPathWidget 3
props.widgets.0.isConfigurabletrue
props.widgets.0.header.enabledtrue
props.widgets.0.header.titleWidget 3
props.availableWidgets.2.viewPathWidget 3
props.availableWidgets.2.isConfigurabletrue
props.availableWidgets.2.nameWidget
props.availableWidgets.2.header.enabledtrue
props.availableWidgets.2.header.titleWidget 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.


  • No labels