Skip to content

App Designer

The App Designer supports you to design, configure and manage your device management apps.

Using the designer, you can customize your App to:

  • App name
  • App title
  • App logo
  • App code base
  • App display pages
  • Domain Name

Once the app is created, you can design and create custom app pages using the in-app dashboard and widget designer.

If you require more extensive changes you can upload a custom app based upon the Device Manager or you can provide a completely custom app of your design.

Apps List

From the Builder App list, click on the Edit icon to display the app designer.

App List

This will display the App configuration panel.

Manager Designer

App Domain Name

Apps are 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 app 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.

App Code Base

By default, apps are created using the Ioto Device Manager code base which provides the core app functionality needed by device management apps.

You can rebuild the Ioto Device Manager and upload either a custom build of the device manager or your own bespoke app using the Ioto cloud APIs.

App Title

The App 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.

App CSS

You can optionally upload a CSS stylesheeet to be used by the app. You can reference CSS styles when using the Dashboard and Widget property editors.

To upload, click on the Upload CSS checkbox and click on the CSS file selection box to select a stylesheet file to upload.

To clear a previously uploaded stylesheet, click on "Clear CSS".

Apps may be customized by uploading your own corporate or product logo. This logo will be used on the App's login screen and in the top navigation bar of the app.

Your logo should be a small, square, transparent logo in a format supported by most browsers.

To upload, 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 logo".

App Display

Apps based on the Ioto Device Manager are configured using a display.json5 configuration file that defines the app's features, themes, pages and panels. You can upload a custom display.json5 which will be used by your app.

The display.json5 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 app.

To upload, check the Upload Display and click on the Display file selection box to select a display.json5 file to upload.

To clear a previously uploaded display, click on "Clear Display".

For more information about the Display file, See the manager documentation: