# 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.

TIP

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
                        }
                    ]
                }
            ]
        }
    ]
}