The Manager Designer is a configuration panel for you to modify any aspect of the Device Manager.
Using the designer, you can customize the Manager:
- Device data schema
- User interface
- Custom VueJS components
From the Builder manager list, click on the Edit icon to display the manager designer.
This will display the Manager configuration panel.
Manager Domain Name
The Ioto Device Manager, is hosted by Embedthis on a sub-domain of your choosing under the ioto.me domain. You can select a unique sub-domain that reflects your company or product's brand. The sub-domain name you choose must be globally unique. Alternatively, you can register your own domain name and point that to the underlying Ioto manager site.
To use an Ioto sub-domain, enter the sub-domain name of your choosing. To use a self-hosted domain, check the "Self Hosted Domain" checkbox and enter your full domain name.
The Device Manager Title can be modified to display an alternate name in the user interface navigation frame at the top of the browser window. Set this to your desired product name. Alternately, this title can be defined in the Display.json5 definition file described below.
The Ioto Device Manager may be customized by uploading your own corporate or product logo. This logo will be used on the Manager login screen and in the top navigation bar of the manager.
Your logo should be a small, square, transparent logo in a format supported by most browsers.
To upload, click on the Logo section and and check the Upload Logo and click on the Logo Image file selection box to select a logo file to upload.
To clear a previously uploaded logo, click on "Clear existing logo".
The Ioto Cloud Manager uses the Ioto agent database schema to define what device specific data should be stored in the cloud and what are the device manageable entities.
The schema describes the device entities and their data properties and data types. From this, the Ioto Manager is able to dynamically construct a user interface when guided by the Display.json file.
Ioto defines a default schema when you create the device cloud. This schema supports a generic key/value store. Initially, you can use the default schema, but as you progress, you may wish to define your own data entities to store device specific data.
For more information about the device schema, See the Ioto service documentation:
Configuring the Manager Display
The Ioto Manager user interface is defined by a JSON configuration file called Display.json5 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
The initial Display.json5 configuration file defines a "developer" skin for the device manager.
For more information about the Display file, See the manager documentation:
The Ioto Manager is a VueJS application that can be extended at runtime via custom components. You can build custom VueJS components and package them into a bundle that can be uploaded and dynamically integrated into the Device Manager to provide custom UI displays and perform unique tasks.
To learn more, read in the Manager documentaiton: Manager Custom Components.