Manager Display Properties
Here is a subset example of a Display.json5 file:
Manager Properties
description
Name | description |
---|---|
Description | Textual description of the device. |
Synopsis | description: 'Short, one sentence description' |
Example
features
Name | features |
---|---|
Description | Enable features for the display UI |
Synopsis | features: { properties } |
Example
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. For the components file, a corresponding value provides an array of exported VueJS components in that file. |
Example
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.
theme
Name | theme |
---|---|
Description | Define the display theme configuration |
Synopsis | theme: { properties ... } |
Example
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. |
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
title
Name | theme.title |
---|---|
Description | The device title displayed in the navigation bar. |
Synopsis | title: 'Few word title' |
version
Name | version |
---|---|
Description | The version number of your Display.json file (SemVer). |
Synopsis | version: 'SemVer compatible version' |
Example
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
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
Inbuilt VueJS Components
These components can be referenced in the Display.json file.
- AccountSettings
- Dashboard
- GenericTable
- GenericEdit
- DeviceClaim
- 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
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
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
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
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 GenericTable component. If you are using a custom view parent component, you will need to manage the buttons display in that component. |
Example
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
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
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
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
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
view.panel.fields.select
Name | view.panel.fields.select |
---|---|
Description | Selectable options for switch fields. |
Synopsis | select: {options, ...} |
Example
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
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
view.panel.name
Name | view.panel.name |
---|---|
Description | Unique panel name |
Synopsis | name: 'Name' |
Example
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
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
view.panel.width
Name | view.panel.width |
---|---|
Description | Display width of the panel |
Synopsis | width: 'NNpx' |
Notes | The width may be epxressed in pixesl via 'px' or as a percentage of the browser width. The default panel width is 700px. |
Example
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. The view path is relative to the view path of the parent view. |
Example
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
view.sidebar
Name | view.sidebar |
---|---|
Description | Display the view's icon in the sidebar menu |
Synopsis | sidebar: true | false |
Example
view.table
Name | view.table |
---|---|
Description | View data table definition |
Synopsis | table: {table-properties} |
Note | The GenericTable 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
Example
This example formats the image above:
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
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
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
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
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
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
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
view.table.fields.align
Name | view.table.fields.align |
---|---|
Description | Align the table column |
Synopsis | align: 'center | left | right' |
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. |
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. |
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. |
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. |
view.table.fields.style
Name | view.table.fields.style |
---|---|
Description | CSS style to apply to column cells |
Synopsis | style: 'CSS properties; ...' |
view.table.fields.title
Name | view.table.fields.title |
---|---|
Description | Column title to display for the field |
Synopsis | title: 'Column Title' |
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. |
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.
view.table.model
Name | view.table.model |
---|---|
Description | Database model name to retrieve for table data |
Synopsis | model: 'ModelName' |
Example
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
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
view.widget.data
Name | view.widget.data |
---|---|
Description | Map specifying the widget data source from the database. |
Synopsis | data: {model: 'Model', field: 'FieldName', filter: {key: 'value'}} |
Note | This property collection selects items or items from the database for display. Use either filter or where to select the database table item. See also view.widget.metric for metric data sources. |
Example
view.widget.data.model
Name | view.widget.data.model |
---|---|
Description | Specify the database table entity (model) to select. |
Synopsis | data: {model: 'Store'} |
Notes | The Ioto cloud database stores multiple entity types in a single database table. Select the desired entity via the model property. |
Example
view.widget.data.field
Name | view.widget.data.field |
---|---|
Description | Select the desired database entity field. |
Synopsis | data: {field: 'value'} |
Notes | The field property defines which item field (column) to select. |
Example
view.widget.data.filter
Name | view.widget.data.filter |
---|---|
Description | Select the desired database item. |
Synopsis | data: {filter: {key:value, key2:value2, ...'} |
Notes | The filter property defines a selection criteria to select the desired database items (rows). You can specify multiple key/value properties in the filter map. The properties are joined using a logical AND. i.e. all properties must match. Alternatively, you can use the where property for more complex filter expressions involving logical OR operations. |
Example
view.widget.data.where
Name | view.widget.data.where |
---|---|
Description | Select the desired database item. |
Synopsis | data: {where: 'where-expression' |
Notes | The where property defines a selection expression to select the desired database items (rows). Where clauses permit more complex item filtering expressions. A where expression can use parenthesis to group terms and join subexpressions with "and" and "or". Values are wrapped in "{}" and database columns names are wrapped in "${}". |
Example
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
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
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
view.widget.metric
Name | view.widget.metric |
---|---|
Description | Map specifying the widget data source from a metric. |
Synopsis | metric: {namespace, name, filter, period, statistic} |
Notes | Metrics are computed by Ioto if specified in the database schema. Widgets can also take their data source directly from the database via the view.widget.data property map. |
Example
view.widget.metric.filter
Name | view.widget.metric.filter |
---|---|
Description | Metric filter to select the desired metric instance (dimension). |
Synopsis | metric: {filter: {Device: ':deviceId'}} |
Notes | Metrics may be omitted for multiple instances of a resource. The filter property selects the appropriate metric instance. The filter property takes a map of properties that must all match the desired metric instance. You can use a tokenized :field value that is prefixed with a colon. This will be expanded at runtime. Supported tokens include: ":deviceId". |
Example
view.widget.metric.name
Name | view.widget.metric.name |
---|---|
Description | Metric name. |
Synopsis | metric: {name: 'PowerCycles'} |
Example
view.widget.metric.namespace
Name | view.widget.metric.namespace |
---|---|
Description | Metric namespace. |
Synopsis | metric: {namespace: 'Embedthis/Device'} |
Notes | The Embedthis/Device is the default namespace. You can specify namespaces in your device schema. Namespaces should be unique to your company / project. You should not create new metrics in the Embedthis/Device namespace as this may clash with future metrics emitted by Ioto. |
Example
view.widget.metric.period
Name | view.widget.metric.period |
---|---|
Description | Metric period to query |
Synopsis | metric: {period: 300} |
Notes | For each metric, Ioto stores the metric value for the last 5 mins, 1hr, 24hrs, 7days, 28days and 1 year. The period property selects one of these metric samples. The sample selected is the first sample that is equal or greater than the requested period. The default period is 5mins. If expressed as a number, it is the number of seconds. Alternatively, you can express as a string with a units suffix. e.g. '5min'. The suffixes are min, hour, day, week, month and year. |
Example
view.widget.metric.statistic
Name | view.widget.metric.statistic |
---|---|
Description | Metric statistic to query. |
Synopsis | metric: {statistic: 'avg'} |
Notes | Ioto will compute metric values for the avg (average), max, min, sum (total) and count of samples. |
Example
view.widget.ticks
Name | view.widget.ticks |
---|---|
Description | The number of data items on the x axis |
Synopsis | ticks: Number |
Example
view.widget.timespan
Name | view.widget.timespan |
---|---|
Description | The timespan for data displayed |
Synopsis | timespan: Seconds |
Example
view.widget.title
Name | view.widget.title |
---|---|
Description | Widget title to display |
Synopsis | title: 'Title' |
Note | See also widget.footer |
Example
view.widget.to
Name | view.widget.to |
---|---|
Description | URL to navigate to when the widget is clicked |
Synopsis | to: 'URL' |
Example
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