The Ioto solution provides an Ioto Device Manager so you can manage your devices centrally from the cloud.
The Manager makes it easy to create a basic, appealing device interface that can be used in early development of an IoT solution or in in production when you have simpler device management needs.
The Manager can manage one or more devices and highly configurable to adapt to your specific device management requirements.
The Manager is extremely flexible, however, there are limits, and you may want to create your own dedicated manager that uses the Ioto APIs to provide a bespoke management experience for your devices.
Configuring the Manager
The Ioto Manager is controlled by a JSON configuration file called Display.json that can be modified to suit your specific needs.
The Display.json file defines the following items:
- Displayed Name
- Display color theme including dark and light modes
- Menu items and options
- UI pages
- Data tables and fields
- Device data edit property panels
- Dashboard data and widgets to display
Here is a subset example of a Display.json file:
A full copy of the default display can be found here: EvalDisplay.json5.
A minimal Display.json will consist of some top level properties, and a set of views.
title is used as the application title in the navigation bar.
description are for documentation.
views define one or more views. If a view has
sidebar set to true, the Manager sidebar will display the view icon to launch the view.
The manager provides two axes of navigation:
- Side bar for top-level items
- Horizontal tabs below the navigation bar
The sidebar is populated with items that have "sidebar" set to true. The horizontal tab menu is built from child views under the parent view.
In the example image above, the sidebar has the "Fleet", "Device" and "Account" menu options. With the selected "Device" sidebar item, the horizontal tab menu displays: "Overview", "Ports", "Events" and "Vlans".
The Manager defines UI pages based on the declared views. Each view is a displayable page for a specific browser URL.
The view defines a
path and typically a rendering
If a view defines child views under a "views" property, those child views are presented as tabbed menu options under the parent view.
Views may define a
redirect property to redirect the browser to another target view.
The Manager provides a GenericList component that can be used to display device data as a table.
The Manager table component is a powerful VueJS component that can:
- Display data in pages
- Select data items for operations
- Select data via a search box
- Resize columns
- Reorder columns with drag and drop
Table views present data items that can be selected via checkboxes or by clicking on table cells. Display.json table definitions can specify how to respond to item selection and cell clicks via
An actions definition will specify which panels to launch or components to run when the relevant action is invoked.
In this example: when a row in the table is clicked, the wild-card field definition ("*") will cause the browser will be redirected to the
If table items are selected, depending on the count of items selected, the appropriate action will cause a panel to be "launched" or component to be "invoked" as required.
Instead of using the GenericList component for a tabular view, you can create custom VueJS components to extend the Manager. You can upload a custom components package using the Builder Cloud/Edit panel.
Custom views can be any VueJS page of your design -- the sky's the limit.
To facilitate editing the properties of a data item, the Manager defines UI Panels.
A parent view may define zero or more panels that can be invoked to operate up selected data items from the parent view.
The panel will animate and slide out from the right side of the screen when launched by a view action or button.
Panels are defined under a views
A panels has a
name and a
component to render and operate the panel. It may specify a
button which will be added to the parent view table to launch the panel.
Alternatively, panels may be launched via view table actions.
The Manager has a
Dashboard component that can be used in any view to provide a graphical display of relevant device data.
The Dashboard displays a set of widgets, each of which presents a facet of device data you wish to display.
The supported widget types are:
Widgets on the dashboard can be rearranged by the user using drag-n-drop and will be persisted in that order for their browser.
It is frequently required to only display or allow the ability to modify certain parts of a management application. For example, you may only want administrators to be able to delete certain resources.
The Manager allows the visibility of views, panels, table columns and panel fields to be controlled depending on the user's authorized role.
By specifying a
role property, you can require that the user have at least this capability to access the designated element.
For example, to only allow access to a view by adminstrators: