Skip to main content
Version: 8.1

Perspective - Dashboard

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
pack
New in 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
gridThe grid layout mode defines the responsive behavior of the grid and its cells: fixed and stretch. Both fixed and stretch values are strings.
  • 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.
  • 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.
  • 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
    fixedVisible when the grid mode is fixed. The following properties are all numeric values.
  • cellSize: Width and height of a grid cell. Exclusively for fixed mode.
  • rowCount: The number of rows in the grid.
  • columnCount: The number of columns in the grid.
  • rowGuttersize: The gap size between grid rows.
  • columnGutterSize: The gap size between grid columns.
  • object
    stretchVisible when the grid mode is  stretch. The following properties are all numeric values.
  • rowCount: The number of rows in the grid.
  • columnCount: The number of columns in the grid.
  • rowGuttersize: The gap size between grid rows.
  • columnGutterSize: The gap size between grid columns.
  • object
    widgetsAn array of configuration objects for widgets currently in use the dashboard display. Click here to see widget's properties.array
    availableWidgetsAn 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. Click here to availableWidgets properties.array

    widgets Properties

    NameDescriptionProperty Type
    nameThe unique widget name.value: string
    viewPathThe current configuration view path of the widget.value: string
    viewParamsParameters for the view. If passing parameters into the embedded view, the names here must match the parameters on that view.

    New in 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
    isConfigurableWhether 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
    headerConfiguration object for the widget header.
  • enabled: When enabled, renders the widget header. Value is boolean.
  • title: The header title to display. Value is string.
  • style: Style to be applied to the widget header. A full menu of style options is available. You can also specify a style class.
  • object
    bodyConfiguration object for the widget body.
  • style: Style to be applied the widget. A full menu of style options is available. You can also specify a style class.
  • object
    minSizeSpecifies the widgets minimum allowable size when determining widget layout. Users may not resize widgets below these dimensions. The following property values are numeric.
  • columnSpan: The minimum allowable columns that this widget may span.
  • rowSpan: The minimum allowable rows that this widget may span.
  • object
    positionThe widget position in the dashboard. Whenever a widget is added, resized, or moved the widget position object is automatically updated. The following property values are numeric.
  • rowStart: The top position of the widget.
  • rowEnd: The bottom position of the widget
  • columnStart: The left position of the widget.
  • columnEnd: The right position of the widget.
  • object
    styleStyle to be applied the widget. A full menu of style options is available. You can also specify a style class.object

    availableWidgets Properties

    NameDescriptionProperty Type
    viewPathThe current configuration view path of the widget.string
    viewParamsParameters being passed to the view at the specified path.

    New in 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
    isConfigurableWhether 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
    defaultSizeSpecifies the widgets default size adding a widget with no size specified. The following property values are numeric.
  • columnSpan: The default columns that this widget will span.
  • rowSpan: The default rows that this widget will span.
  • object
    minSizeSpecifies the widgets minimum size used when determining widget layout. The following property values are numeric.
  • columnSpan: The minimum allowable columns that this widget may span.
  • rowSpan: The minimum allowable rows that this widget may span.
  • 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
    headerWidget header configuration.
  • enabled: Whether the widget header should show. Value is boolean.
  • title: The header title to display. Value is string.
  • style: Style to be applied to the widget header. A full menu of style options is available. You can also specify a style class.
  • object
    bodyWidget body configuration.
  • style: Style to be applied to the widget header. A full menu of style options is available. You can also specify a style class.
  • object
    styleStyle to be applied the widget. A full menu of style options is available. You can also specify a style class.object

    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.

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

    PropertyValue
    props.gridstretch
    props.isEditingtrue
    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.