Creating Custom Widgets

The EVRYTHNG Dashboard allows developers to extend the range of widgets available beyond the built-in reusable widgets with their own fully custom Angular components. This capability can be used to create unique business-context oriented controls or show specialised information and analytics, and helps make the Dashboard much more suited to your needs.

This walkthrough will run through the entire process for an example widget. The general process is as follows:

  1. Begin a new component with the dashboard-components-starter project.
  2. Implement the HTML Angular template, controller JS script, and CSS style sheets the widget requires.
  3. Built the new component into a component bundle and host it somewhere, such as the Files API or another file storage service.
  4. Include the bundle in a Dashboard section, and then add the widgets contained within to that section.

The end result of following all the sections presented here will be a detailed knowledge of how to build several types of useful widgets that demonstrate how to extend the Dashboard for your own purposes.


Prerequisites

To follow along with this walkthrough we recommend that you have a basic knowledge of the following:

  • git and npm for project management
  • HTML, CSS, and JavaScript, ideally simple ES6 modules
  • EVRYTHNG Thngs and Thng property resources

Contents

Updated about a year ago


Creating Custom Widgets


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.