Skip to content

Manager Display Properties

Here is a subset example of a Display.json file:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
    "version": "1.0.0",
    "description": "Display for Kickstart",
    "theme": {
        "title": "Device Manager",
        "logo": "/images/ioto-logo.png",
        "themes": {
            "dark": { ... },
            "light": { ... },
        }
    },
    "views": [
        { "path": "/", "name": "home" },
        { "name": "Login", "path": "/auth", "component": "Login" },
        {
            "name": "devices",
            "path": "/devices",
            "icon": "devices",
            "sidebar": true,
            "component": "GenericList",
            "table": {
                "model": "Device",
                "subtitle": "Click on a device to explore",
                "fields": [
                    {"name": "product"},
                    {"name": "description"},
                    {"name": "model"},
                    {"name": "id", "title": "Device ID"},
                    {"name": "*", "launch": "/devices/:id/overview"}
                ],
                "actions": {
                    "add": { "count": 0, "launch": "claim" },
                    "release": { "count": 2,
                        "invoke": "DeviceRelease", "confirm": true }
                }
            },
            "panels": [
                {
                    "name": "claim",
                    "component": "DeviceClaim",
                    "button": "Claim Device"
                }
            ]
        },
    ]
}

Manager Properties

description

Name description
Description Textual description of the device.
Synopsis description: "Short, one sentence description"

Example

1
"description": "Display for the Acme Rocket device"

features

Name features
Description Enable features for the display UI
Synopsis features: { "fleet": true | false }
Notes This is currently used to enable multi-device operation by setting the features.fleet to true.

Example

1
2
3
"features": {
    "fleet": true
}

modules

Name modules
Description Declare the VueJS components exported by extension components.
Synopsis modules: { path: [components...] }
Notes This property defines the exported components in an extension component file. Extension components can be defined via the Builder Cloud / Edit panel and are loaded from the AWS S3 bucket when a user opens the Manager site in the browser. For the components file, a corresponding value provides an array of exported VueJS components in that file.

Example

1
2
3
"modules": {
    "./extend/Components.js": ["Fleet"]
}

redirect

Name redirect
Description Redirect the browser to a new location
Synopsis redirect: "URL"
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context.

Example

The :deviceId will be replaced with the selected device ID from the device list.

1
"redirect": "/devices/:deviceId/overview"

theme

Name theme
Description Define the display theme configuration
Synopsis theme: { properties ... }

Example

1
2
3
4
5
"theme": {
    "title": "Acme Rocket",
    "logo": "/images/acme-logo.png",
    "themes": { ... }
}
Name theme.logo
Description The logo displayed in the navigation bar and login screen.
Synopsis logo: "/images/NAME.png"
Notes The logo should be small, square and have a transparent background. 
1
2
3
"theme": {
    "logo": "/images/acme.png"
}

theme.title

Name theme.title
Description The device title displayed in the navigation bar.
Synopsis title: "Few word title" 
1
2
3
"theme": {
    "title": "Acme Rocket"
}

theme.themes

Name theme.themes
Description Set of colors to use for the dark and light UI themes.
Synopsis `themes: { dark: {...}, light: {...}}
Notes The themes collection should provide a "dark" and "light" mode set of colors. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
"theme": {
    "themes": {
        "dark": {
            "primary": "#3F51B5",
            "secondary": "#707070",
            "accent": "#82B1FF",    
            "error": "#fb6d6d",
            "info": "#2196F3",
            "success": "#4CAF50",
            "warning": "#FB8C00",
            "extra": "#00cdcd",
            "anchor": "#1976D2",
            "nav": "#3f51b5"
        },
        "light": { ...}
    }
}

timeouts

Name timeouts
Description Define timeout periods for various manager refresh tasks.
Synopsis timeouts: { dashboard: seconds }
Note The dashboard time governs how frequently dashboard widgets are updated. You can provide a numeric value in seconds or a textual value such as "3secs".

Example

1
2
3
"timeouts": {
    "dashboard": "10secs"
}

version

Name version
Description The version number of your Display.json file (SemVer).
Synopsis version: "SemVer compatible version"

Example

1
"version": "1.2.3"

views

Name views
Description Array of UI pages to define
Synopsis views: [ { view }, ...]
Note Views may also be nested under a view. Such nested views are presented as tabbed views under a common parent view.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
    "name": "fleet",
    "title": "Fleet Overview",
    "enable": "fleet",
    "path": "/fleet",
    "icon": "mdi-gauge",
    "component": "Fleet",
    "role": "user",
    "sidebar": true,
    "period": 10
    "views": [
        { /* Tabbed sub-views */ },
    ]
},

view.component

Name view.component
Description VueJS component to display for the view
Synopsis component: "ComponentName"
Note The component can be an inbuilt Ioto Manager component or it can be a component provided by the extension components defined via the modules property.

The inbuilt components are listed below.

Example

1
2
3
{
    "component": "Generic",
},

Inbuilt VueJS Components

These components can be referenced in the Display.json file.

  • AccountSettings
  • Dashboard
  • GenericList
  • GenericEdit
  • DeviceClaim
  • DeviceClaimModal
  • DeviceRelease
  • Forgot
  • Login
  • UserPassword
  • UserList
  • UserProfile

view.enble

Name view.enble
Description Enable or disable the view
Synopsis enable: true | false
Note This is useful when developing to disable partially developed views. Views are enabled by default.

Example

1
2
3
{
    "enable": false.
},

view.icon

Name view.icon
Description Icon to display in menus
Synopsis icon: "mdi-NAME"
Note The icon name is the name of a Material Design. You should use the icon name with an "mdi-" prefix.

Example

1
2
3
{
    "icon": "mdi-gauge".
},

view.name

Name view.name
Description Name of the view
Synopsis name: "One-word-name"
Note This name is used in several places including as a page title and VueJS route name.

Example

1
2
3
{
    "name": "fleet",
},

view.panels

Name view.panels
Description Array of slide in panels that overlay the view.
Synopsis panels: [ { panel }, ...]
Note Panels are defined inside a parent view. Panels are invoked via buttons defined in the panel properties that are displayed in the parent view. A typical use case is a parent view list of device components and a panel to edit a selected component. For example: from a parent view of device fans, a fan could be selected and an edit panel could modify the fan's operational properties.

Example

1
2
3
4
5
6
7
8
9
"panels": [
    {
        "name": "claim",
        "component": "DeviceClaim",
        "role": "admin",
        "button": "Claim Device",
        "width": "500px"
    }
]

view.panel.button

Name view.panel.button
Description Button text to display in the parent view's table.
Synopsis role: "User-role"
Notes The button will be automatically displayed by panel view parents that use the GenericList component. If you are using a custom view parent component, you will need to manage the buttons display in that component.

Example

1
2
3
{
    "button": "admin",
},

view.panel.component

Name view.panel.component
Description VueJS component to display for the panel
Synopsis component: "ComponentName"
Note The component can be an inbuilt Ioto Manager component or it can be a component provided by the extension components defined via the modules property.

The inbuilt components are listed below.

Example

1
2
3
{
    "component": "TempPanel",
},

view.panel.fields

Name view.panel.fields
Description Array of fields to edit
Synopsis fields: [ {field definition}, ...]
Note This defines an array of fields to edit when using the GenericEdit component. Input fields have a defined "type" which determines the HTML component used to edit the field value. Supported field types include: checkbox, combo, date, label, password, radio, select, slider, switch, text and textarea.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
{
    "panels": [
        {
            "name": "edit",
            "component": "GenericEdit",
            "role": "admin",
            "fields": [
                {
                    "name": "name",
                    "type": "label",
                    "role": "user",
                    "props": {"max": 100},
                    "width": 6,
                },
            ]
        }
    ]
},

view.panel.fields.label

Name view.panel.fields.label
Description Field displayed label
Synopsis label: "fieldLabel"
Note The field label is displayed before the input field. If not provided, the field name is converted to PascalCase and used by default.

Example

1
2
3
{
    "label": "Speed",
}

view.panel.fields.name

Name view.panel.fields.name
Description Field name
Synopsis name: "oneWordName"
Note If a field title is not provided, the field name is converted to PascalCase and is used as the input field title.

Example

1
2
3
{
    "name": "speed",
}

view.panel.fields.role

Name view.panel.fields.role
Description Required user role to display the field
Synopsis role: "User-role"
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    "role": "admin",
},

view.panel.fields.select

Name view.panel.fields.select
Description Selectable options for switch fields.
Synopsis select: {options, ...}

Example

1
2
3
{
    "select": {"online": true, "offline": false}
},

view.panel.fields.type

Name view.panel.fields.type
Description Field's input UI display type
Synopsis type: "Type"
Note If the type is not provided, the Manager attempts to sleuth the type based on the data value provided to edit.

Example

1
2
3
4
5
6
{
    "name": "status",
    "type": "switch",
    "select": {"online": true, "offline": false},
    "width": 6
}

**The supported panel field data types are:

checkbox combo date label password radio select slider switch text ** textarea

view.panel.fields.width

Name view.panel.fields.width
Description Number of columns the input field should occupy.
Synopsis width: "1-12"
Note The width is expressed as a number of columns between 1 and 12. The GenericEdit component uses a layout grid of 12 columns. GenericEdit will pack fields to fill a row, before starting a new display row.

Example

1
2
3
4
5
6
{
    "name": "User Password",
    "type": "password",
    "select": {"online": true, "offline": false},
    "width": 6
}

view.panel.name

Name view.panel.name
Description Unique panel name
Synopsis name: "Name"

Example

1
2
3
{
    "name": "TempEdit",
},

view.panel.role

Name view.panel.role
Description Required user role to allow access
Synopsis role: "User-role"
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    "role": "admin",
},

view.panel.title

Name view.panel.title
Description Panel Title
Synopsis title: "Title"
Notes If the panel title is not provided, a title is created using the name of the model defined in the parent view table property. The model name is prefixed with 'Create' or 'Modify' as appropriate. For example, if the model was "Port" and an existing port item was selected in the table, the panel title would be "Modify Port".

Example

1
2
3
{
    "title": "Temperature Settings",
},

view.panel.width

Name view.panel.width
Description Display width of the panel
Synopsis width: "NNpx"
Notes The default panel width is 700px.

Example

1
2
3
{
    "width": "500px",
},

view.path

Name view.path
Description URL path for the view
Synopsis path: "/URL/PATH"
Note The URL path is used by VueJS when constructing the app routes and at runtime for navigating the views.

Example

1
2
3
{
    "path": "/device/list",
},

view.period

Name view.period
Description Update period to refresh the view's data
Synopsis refresh: Number | "period"
Notes This is the period for refreshable components to update their data. The period may be a number of seconds or a string equivalent.

Example

1
2
3
{
    "period": "5secs",
},

view.role

Name view.role
Description Required user role to allow access
Synopsis role: "User-role"
Notes The user role may be selected from "public", "user", "admin", "support" or "owner". The public role permits unauthenticated access. The other roles require a login with the requisite role.

Example

1
2
3
{
    "role": "user",
},

view.sidebar

Name view.sidebar
Description Display the view's icon in the sidebar menu
Synopsis sidebar: true | false

Example

1
2
3
{
    "sidebar": true,
},

view.table

Name view.table
Description View data table definition
Synopsis table: {table-properties}
Note The GenericList component displays database model items as a table. The table can be extensively customized by table properties.

Background

The table is displayed by retrieving items from the table.model database model type. The columns of the table are defined via the table.fields and are displayed in order. Table action menu options are derived from the table.actions collection with buttons from any relevant view panels.

Data Table Data Table

Example

This example formats the image above:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    "table": {
        "model": "Event",
        "fields": [
            {"name": "edit", "icon": "mdi-pencil"},
            {"name": "timestamp", "width": "5%"},
            {
                "name": "severity",
                "width": "5%",
                "icon": {
                    "info": {"name": "mdi-information-outline", "color": "green"},
                    "warn": {"name": "mdi-alert-circle-outline", "color": "orange"},
                    "error": {"name": "mdi-alert-circle-outline", "color": "red"},
                    "critical": {"name": "mdi-flash", "color": "red"}
                }
            },
            {"name": "source"},
            {"name": "subject", "align": "left"},
            {"name": "message"},
            {"name": "*", "launch": "edit"}
        ],
        "actions": {
            "edit": {"count": 1, "launch": "edit"},
            "delete": {"count": 2, "confirm": true}
        }
    }
}

view.table.actions

Name view.table.actions
Description Actions that can be performed on selected table items.
Synopsis actions: { action, ...}
Notes The action collection has one or more action definitions. Each definition is a set of properties that scopes how many items can be manipulated (count), the view panel to display (panel), if user confirmation is required before taking the action (confirm) and whether a launch button should be displayed (launch).

Example

1
2
3
4
5
6
7
8
{
    "table": {
        "actions": {
            "edit": {"count": 1, "launch": "edit"},
            "delete": {"count": 2, "confirm": true}
        }
    }
}

view.table.actions.confirm

Name view.table.actions.confirm
Description Display a dialog requesting user confirmation before invoking the action.
Synopsis confirm: true | false

Example

1
2
3
4
5
6
7
{
    "table": {
        "actions": {
            "delete": {"count": 2, "confirm" true}
        }
    }
}

view.table.actions.count

Name view.table.actions.count
Description Number of selected items the action supports.
Synopsis count: Number
Notes Set count to 0 for "add" actions that require no selected items. Set count to 1 for actions that can operate on only 1 item at a time. Set count to 2 for actions that can operation on multiple selected items.

Example

1
2
3
4
5
6
7
{
    "table": {
        "actions": {
            "delete": {"count": 2, "confirm": true}
        }
    }
}

view.table.actions.invoke

Name view.table.actions.invoke
Description Panel name to display or URL to navigate to when the action is invoked
Synopsis invoke: "ComponentName"
Notes The invoke property defines a VueJS component that will be invoked when the action is triggered. The component will be passed properties containing the data item (item) and the data model (model).

Example

1
2
3
4
5
6
7
{
    "table": {
        "actions": {
            "restart": {"count": 2, "launch": "NetRestart"}
        }
    }
}

view.table.actions.launch

Name view.table.actions.launch
Description Panel name to display or URL to navigate to when the action is invoked
Synopsis launch: "PanelName" | "URL"
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context.

Example

1
2
3
4
5
6
7
{
    "table": {
        "actions": {
            "add": {"count": 0, "launch": "claim"}
        }
    }
}

view.table.actions.panel

Name view.table.actions.panel
Description Panel to display when the action is invoked
Synopsis panel: "PanelName"
Notes Panels can only be used for actions of count 0 or 1.

Example

1
2
3
4
5
6
7
{
    "table": {
        "actions": {
            "edit": {"count": 1, "launch": "edit"}
        }
    }
}

view.table.fields

Name view.table.fields
Description Define the table fields (columns) to display.
Synopsis fields: [ {field-definitions}, ...]
Notes The fields define each column in the displayed table. A field definition includes the data items name, with display formatting options.

A pseudo field with the name "*" may be defined to specify a launch action that will be invoked as a default when a row/column combination is click.

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
    "table": {
        "model": "Port",
        "fields": [
            {"name": "edit", "icon": "mdi-pencil", "width": "5%"},
            {"name": "name", "align": "center"},
            {
                "name": "status",
                "align": "center",
                "icon": {
                    "online": {"name": "mdi-check-circle-outline", "color": "green"},
                    "offline": "mdi-flash-circle"
                }
            },
            {"name": "negotiate", "align": "center", "icon": "check"},
            {"name": "duplex", "align": "center", "icon": "check"},
            {"name": "flowControl", "align": "center", "icon": "check"},
            {"name": "jumbo", "align": "center", "icon": "check"},
            {"name": "speed", "align": "center"},
            {"name": "*", "launch": "edit"}
        ]
    }
}

view.table.fields.align

Name view.table.fields.align
Description Align the table column
Synopsis align: "center | left | right" 
1
2
3
{
    "align:": "center"
}

view.table.fields.css

Name view.table.fields.css
Description CSS style name
Synopsis style: "RuleName"
Note CSS rule to apply to the displayed field cells. The CSS rule must exist in a custom component. 
1
2
3
{
    "css:": "unit-status"
}

view.table.fields.icon

Name view.table.fields.icon
Description Display an icon representing the field value
Synopsis icon: "iconName" | {value-map}
Notes When set to a map value, the field value is used as an index into the map. If the index is not found, the "default" index is used. The map value may be either an icon name or a map containing a "name" property that specifies the icon name and a color property that specifies the color to use for the icon. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
{
    "icon:": "mdi-pencil"

    // or
    "icon": {
        "online": {"name": "mdi-check-circle-outline", "color": "green"},
        "offline": "mdi-flash-circle",
        "default": "mdi-flash-circle"
    }
}

view.table.fields.launch

Name view.table.fields.launch
Description Panel to launch or URL to navigate to
Synopsis launch: "PanelName" | "URL"
Notes If set to a URL, you can use :token segments that will be expanded at runtime from the application route context. 
1
2
3
{
    "luanch:": "edit"
}

view.table.fields.name

Name view.table.fields.name
Description Name of the data item field to display
Synopsis name: "fieldName"
Note If a field.title property is not specified, the name is converted to PascalCase and used as the title. 
1
2
3
{
    "name:": "id"
}

view.table.fields.style

Name view.table.fields.style
Description CSS style to apply to column cells
Synopsis style: "CSS properties; ..." 
1
2
3
{
    "style:": "max-width: 400px; text-overflow: ellipsis;"
}

view.table.fields.title

Name view.table.fields.title
Description Column title to display for the field
Synopsis title: "Column Title" 
1
2
3
{
    "title:": "Current Temperature"
}

view.table.fields.width

Name view.table.fields.width
Description Set the preferred width of the column.
Synopsis width: "NNpx" | "NN%"
Note This will set the initial preferred width of the column. 
1
2
3
{
    "width:": "5%"
}

view.table.sort

Name view.table.sort
Description How to sort the rows of the table
Synopsis sort: "column:asc|desc"

Example

This will sort the table based on an ascending order of the "name" column.

1
2
3
4
5
{
    "table": {
        "sort": "name:asc",
    }
}

view.table.model

Name view.table.model
Description Database model name to retrieve for table data
Synopsis model: "ModelName"

Example

1
2
3
4
5
{
    "table": {
        "model": "Event",
    }
}

view.widgets

Name view.widgets
Description Set of widgets to display when using the Dashboard component.
Synopsis widgets: [ {widget}, ...]
Note The widgets property defines an ordered set of widgets to be displayed by the Dashboard component. The enclosing view must set the component property to "Dashboard".

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "views": [ {
        "name": "Overview",
        "component": "Dashboard",
        "widgets": [
            {
                "type": "gauge",
                "title": "Network IO",
                "min": 0,
                "max": 10000,
                "data": { "model": "Stats", "field": "io" }
            }
        ]
    }
}

Supported Widget Types

  • event
  • gauge
  • graph
  • led
  • numeric
  • progress
  • text
  • time

view.widget.axes

Name view.widget.axes
Description Axes labels for "graph" and "time" widgets.
Synopsis axes: {"x" "text", "y": "Text"

Example

1
2
3
{
    "axes": {"x": "Time", "y": "KB"},
}

view.widget.data

Name view.widget.data
Description Map specifying the widget data source
Synopsis data: {"model": "Model", "field": "FieldName"}
Note The data.model property specifies the database model name. The data.field specifies the data field within that model.

Example

1
2
3
4
5
6
{
    "data": {
        "model": "Stats",
        "field": "io"
    }
}

view.widget.footer

Name view.widget.footer
Description Widget footer text
Synopsis `footer: "Footer Text"
Note Footer text is only used by the "progress" widget.

Example

1
2
3
{
    "footer": "Active Ports"
}

view.widget.interval

Name view.widget.interval
Description Time interval between data points.
Synopsis interval: 5
Note The interval is rounded to the next natural time boundary for the time (x) axis.

Example

1
2
3
{
    "interval": 3600
}

view.widget.max

Name view.widget.max
Description Maximum data value
Synopsis max: Value
Note This defines the maximum value the data field may take. It is used to scale the widget display. The default is to set the maximum field value observed.

Example

1
2
3
{
    "max": 100
}

view.widget.min

Name view.widget.min
Description Minimum data value
Synopsis min: Value
Note This defines the minimum value the data field may take. It is used to scale the widget display. The default is set to the minimum field value observed.

Example

1
2
3
{
    "max": 100
}

view.widget.ticks

Name view.widget.ticks
Description The number of data items on the x axis
Synopsis ticks: Number

Example

1
2
3
{
    "ticks": 12
}

view.widget.timespan

Name view.widget.timespan
Description The timespan for data displayed
Synopsis timespan: Seconds

Example

1
2
3
{
    "timespan": 3600
}

view.widget.title

Name view.widget.title
Description Widget title to display
Synopsis title: "Title"
Note See also widget.footer

Example

1
2
3
{
    "title": "Network IO",
}

view.widget.to

Name view.widget.to
Description URL to navigate to when the widget is clicked
Synopsis to: "URL"

Example

1
2
3
{
    "to": "/ports",
}

view.widget.type

Name view.widget.type
Description Type of widget
Synopsis widgets: [ {widget}, ...]
Note The widget type must be set to one of: event, gauge, graph, led, numeric, progress, text, time.

Example

1
2
3
4
{
    "type": "gauge",
    "title": "Network IO",
}