Creating Custom Widgets

The EVRYTHNG Dashboard lets developers extend the range of widgets available beyond the built-in reusable widgets with their own fully custom Angular components. You can use this capability to create unique business context-oriented controls or show specialized information and analytics.

This walkthrough runs 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. Build the new component into a component bundle and host it using the Files API or another file storage service.
  4. Include the bundle in a Dashboard section, and then add the widgets contained within that section.

Following all the sections here provides you with detailed knowledge of how to build several types of useful widgets that demonstrate how to extend the Dashboard for your own purposes.


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