The Ioto Cloud Device Manager is capable of handling most device management display and modification tasks, however, refined solutions will typically create custom components to extend the Manager to perform specific tasks or to provide a more appropriate user interface for some aspect of device management.
Regardless of how large your extensions are, you can still leverage the core Manager application including authentication, navigation and UI framework.
Extending the Manager
To extend the Ioto Cloud Device Manager, you create your own VueJS components and build these to be integrated into the Manager.
When a user navigates to the Manager (YourName.ioto.me) in their browser, they will run the Manager app together with any defined custom components in one seamless app.
Ioto Manager Components
The Ioto distribution includes a sample custom component under the ./manager directory. This custom component is built by the Makefile into a dist/Components.js file that can be directly uploaded to the Builder for inclusion in your Ioto Cloud Device Manager.
Creating Custom Components
To integrate VueJS custom components into the Manager, the components must be built and packaged as a single package in a specific way.
Consider this sample (trivial) VueJS component:
You can build this with the following Vite
vite.config.js configuration file.
This will create a
Components.js file that can be uploaded to the Builder.
Uploading Your Components
To upload your package, using the Builder Cloud / Edit panel and select Update Manager UI and complete the UI Extension Components section. The builder will then add your package to the Manager UI site for your device cloud.
See the Kickstart sample application contains a working directory (./cloud) to demonstrate creating a packaged VueJS component.