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

• Anatomy of a Widget - a brief overview of the files that make up an EVRYTHNG Dashboard custom widget project.
• Setting up an Environment - Basic steps to set up files for a new custom widget.
• Create a Simple Widget - Step-by-step creating a simple widget that gives a quick glance at an important Thng property value.
• Create an Interactive Widget - Step-by-step creating a more advanced widget that accepts input from the user.