EVRYTHNG Developer Hub

Welcome! Here's where you'll find what you need to start working with EVRYTHNG as quickly as possible. There are comprehensive guides, documentation, and support if you get stuck. We encourage you to dive in and explore.

Create Free Account Read Documentation Get Support

Dashboards

Admin Feature

All the actions below require the user to be the account Administrator, except cloning an existing dashboard to the 'My Dashboards' section, which can be done by an Operator who is not an administrator.

In addition to customizing the existing dashboard pages, you can easily add your own to populate entirely with a tailor-made layout of widgets. Dashboard pages fall into two categories:

  • Shared Dashboards - These are shared between all users added to a given account, and modifications to them are visible to all.

  • My Dashboards - These are unique and private to each user sharing the account. Shared dashboard pages can be cloned and then further customized to suit the user's own individual needs. These are only visible if the user's Operator role has the 'My Dashboards' permission enabled.

All the customization options are accessible from the Dashboard customisation dialog by clicking the edit pencil on the toolbar next to the dashboard's name:


Adding/removing dashboard pages

Adding a new dashboard is easy. You can select its name, icon, and any optional query parameters that it may use. After that, you can start to add custom components to it as explained below.

By default, the EVRYTHNG Dashboard comes with three dashboard pages that help you to understand how users are interacting with your Thngs and products within projects and applications. If you feel that you do not need these pages you can easily remove them by clicking "Edit Dashboard" and choosing "Delete".


Add a New Dashboard Page

  1. Select "Add dashboard" (⊕) from the left-hand navigation next to the desired type.
  2. Fill in the "name" field and any optional query parameters. This may be used to pass any information between dashboards or to bookmark a particular state (e.g. we use parameters for filters and date ranges, so you can share a given state with a URL link). Select an optional icon from the Material Design Icons collection.
  3. Select "Add dashboard" button. You will see a confirmation notification and the Dashboard will reload.

Remove a Dashboard Page

  1. Open the dashboard page you want to remove.
  2. Select 'Edit Dashboard' from the top of the page.
  3. Select "Delete".
  4. Confirm the deletion. You will see a confirmation notification, and the Dashboard will reload.

Cloning an Existing Dashboard Page

Shared dashboard pages can be cloned to easily create a usable duplicate for further modification. Any changes made to the clone are not reflected in the original. A cloned page can be added as a new shared dashboard (visible to all Operators on an account, if their role has the 'My Dashboards' permission enabled), or added to the Operator user's own private 'My Dashboards' section (visible only to that Operator and them alone).

  1. Open the dashboard page you want to clone.
  2. Click the 'Clone Dashboard' button at the top of the page.
  3. Enter a new name, icon, and URL configuration for the new page.
  4. Choose a target section, either a new shared dashboard page, or in 'My Dashboards'
  5. Confirm to apply the changes, and wait for the Dashboard to reload.

Adding/removing widgets

Widgets are typically the white cards used across the EVRYTHNG Dashboard, but you can always break out from that style and use your own (full width/height, no background, etc.). Widgets are organized into a grid three wide. Each widget can be resized and moved around the grid to suit the user's needs.


Widgets as Web Components

Our widgets follow the same concepts as Web Components (hence we also call them 'components') in the sense that they have a single responsibility, are reusable and self-contained (i.e. logic, template and styles are bundled together).

In Components you will learn how to build and bundle your set of components in that way. For now, let's assume you have uploaded your components bundle file to your own server or cloud service of choice.

Web Components are identified and initialised with custom markup on a web application, called custom HTML tags. These two properties (source file and tag name) allow us to instantiate your components within the EVRYTHNG Dashboard.


Add a Widget

  1. Open the dashboard page you want to add the new widget to.
  2. Select the "Edit Dashboard" icon at the top of the page.
  3. Ensure there are at least one section, using the "Add new" (⊕) next to the Sections item.
  4. Select "Add new" (⊕) next to "Widgets" section label.
  5. Fill in the "Name" (the custom HTML tag given to your component). Tag names should contain a - to comply with the standard. Fill in the "Source" URL (the JavaScript bundle file that contains your custom components) This file needs to be served over HTTPS, as the Dashboard will not accept insecure external files.
  6. Select the "Update" button. You will see a confirmation notification and the Dashboard will reload.

Update/Remove a Widget

  1. Open the dashboard page containing the widget you want to update/remove.
  2. Select the "Edit Dashboard" button from the top of the page.
  3. Find the widget you want to update/remove within the appropriate section.
  4. Select the "Remove" icon next to the Widget to remove, or click a field to edit it.
  5. Select the "Update" button. You will see a confirmation notification and the application will reload shortly.

Adding/Removing the Toolbar

Adding and removing the toolbar is the same as adding and removing widgets, the only difference is the place where it is inserted in the configuration. A dashboard can only contain one toolbar. See the Widgets page for the appropriate details.


Troubleshooting

Components file failed to load

When adding widgets you may find an error message like this:

This means your components file could not be loaded correctly. This can be caused by:

  • File does not exist (HTTP error code 404 "Not Found");
  • File exists but is not served over HTTPS (error blocked:mixed-content);
  • File exists and is served over HTTPS, but the certificate is not trusted (error net::ERR_INSECURE_RESPONSE).

The latter happens if you're using a self-signed certificate that hasn't been validated by third-parties. In the Allow insecure localhost section we explain how to bypass this for development.

In Google Chrome, you can easily find this information in the Developer Tools (Settings > More Tools > Developer Tools) under the Console and Network tabs, as seen in the images below. Error messages can vary from browser to browser.

Component is not displayed

In case the file loads correctly but you still do not see your component, please make sure the tag name of your component is correct. The application appends a non-recognised element to the document, but no error occurs.

Dashboards