Dashboard Layout Object

DashboardLayout

Top level object

Properties

Name	Type	Description
`type`	`string`	Layout type. Currently, only `columnar` is supported
`columns`	`DashboardLayoutColumn[]`	Array of columns

Example

{
    type: "columnar",
    columns: [
        ...
    ]
}

DashboardLayoutColumn

Represents a column that may contain a sub-layout of rows and further columns/cells. Usually a Dashboard will contain 1-4 columns.

Properties

Name	Type	Description
`index`	`integer`	Determines the order in which columns are displayed
`width`	`integer`	Column width as percentage
`pxlWidth`	`integer`	Column width as pixels
`cells`	`DashboardLayoutCell[]`	Array of cells (rows)

Example

{
    index: 0,
    width: 50,
    pxlWidth: 720,
    cells: [
        ...
    ]
}

DashboardLayoutCell

Represents a layout cell, which is seen as a horizontal row within a column.

Properties

Name	Type	Description
`subcells`	`DashboardLayoutSubcell[]`	Array of sub-cells (individual widgets in a row)

Example

{
    subcells: [
        ...
    ]
}

DashboardLayoutSubcell

Represents an actual cell within a column and row, that contains a widget.

Properties

Name	Type	Description
`index`	`integer`	Determines the order in which widgets are displayed within the row
`width`	`integer`	Widget width as percentage
`pxlWidth`	`integer`	Widget width as pixels
`elements`	`DashboardLayoutElement[]`	Array of elements (widgets)

Example

{
    index: 0,
    width: 66.66666666666666,
    pxlWidth: 785,
    elements: [
        ...
    ]
}

DashboardLayoutElement

Represents an actual cell within a column and row, that contains a widget.

Properties

Name	Type	Description
`widgetid`	`string`	Widget ID
`height`	`integer`	Widget/subcell height
`minHeight`	`integer`	`minHeight` property taken from the Widget Manifest
`maxHeight`	`integer`	`maxHeight` property taken from the Widget Manifest
`minWidth`	`integer`	`minWidth` property taken from the Widget Manifest
`maxWidth`	`integer`	`maxWidth` property taken from the Widget Manifest
`defaultWidth`	`integer`	`defaultWidth` property taken from the Widget Manifest

Example

{
    widgetid: "5f198c9ebf342a002d120e62",
    height: 384,
    minHeight: 96,
    maxHeight: 2048,
    minWidth: 128,
    maxWidth: 2048,
    defaultWidth: 512
}

Full Example

Below you can find a full example of a Dashboard layout.

Tips

You can retrieve the layout of a Dashboard currently being viewed by opening the developer console and executing the following command: console.log(prism.activeDashboard.layout)

This example is a dashboard with 2 columns, the first containing 2 rows with a single widget each and a third widget is placed in the 2nd column.

{
    "type": "columnar",
    "columns": [
        {
            "width": 50,
            "cells": [
                {
                    "subcells": [
                        {
                            "elements": [
                                {
                                    "minHeight": 96,
                                    "maxHeight": 2048,
                                    "minWidth": 128,
                                    "maxWidth": 2048,
                                    "height": 384,
                                    "defaultWidth": 512,
                                    "widgetid": "5f198c9ebf342a002d120e62"
                                }
                            ],
                            "width": 100,
                            "stretchable": false,
                            "pxlWidth": 528,
                            "index": 0
                        }
                    ]
                },
                {
                    "subcells": [
                        {
                            "elements": [
                                {
                                    "minHeight": 96,
                                    "maxHeight": 2048,
                                    "minWidth": 128,
                                    "maxWidth": 2048,
                                    "defaultWidth": 512,
                                    "widgetid": "5f198ca4bf342a002d120e66",
                                    "height": 384
                                }
                            ],
                            "width": 100,
                            "stretchable": false,
                            "pxlWidth": 1439,
                            "index": 0
                        }
                    ]
                }
            ],
            "pxlWidth": 720,
            "index": 0
        },
        {
            "width": 50,
            "pxlWidth": 719,
            "index": 1,
            "cells": [
                {
                    "subcells": [
                        {
                            "elements": [
                                {
                                    "minHeight": 96,
                                    "maxHeight": 2048,
                                    "minWidth": 128,
                                    "maxWidth": 2048,
                                    "defaultWidth": 512,
                                    "widgetid": "5f198ca2bf342a002d120e64",
                                    "height": "540px"
                                }
                            ],
                            "width": 100,
                            "stretchable": false,
                            "pxlWidth": 720,
                            "index": 0
                        }
                    ]
                }
            ]
        }
    ]
}