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.

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 - an 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 guide for creating a simple widget that gives a quick glance at an important Thng property value.
• Create an Interactive Widget - Step-by-step guide for creating a more advanced widget that accepts input from the user.