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 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".
- Select "Add dashboard" (⊕) from the left-hand navigation next to the desired type.
- 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.
- Select "Add dashboard" button. You will see a confirmation notification and the Dashboard will reload.
- Open the dashboard page you want to remove.
- Select 'Edit Dashboard' from the top of the page.
- Select "Delete".
- Confirm the deletion. You will see a confirmation notification, and the Dashboard will reload.
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).
- Open the dashboard page you want to clone.
- Click the 'Clone Dashboard' button at the top of the page.
- Enter a new name, icon, and URL configuration for the new page.
- Choose a target section, either a new shared dashboard page, or in 'My Dashboards'
- Confirm to apply the changes, and wait for the Dashboard to reload.
Use the 'Download Dashboard configuration' button in the 'Edit dashboard' dialog of an existing dashboard page to save its layout and configuration to a JSON file, suitable for sharing with others or for adding to a different account.
Such JSON files from previously exported dashboards can easily be imported using the 'Import Dashboard' button available in the 'Add dashboard' dialog.
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.).
Before any widgets can be added to a new dashboard page, a section must be created using the using the "Add new" (⊕) next to the Sections item. Give the section a name and description that will appear above the widgets contained within it.
The 'Advanced settings' option allows you to choose the layout type this section will use to organise the widgets. The options are:
- Grid - Widgets are organised into a vertical and horizontal grid between three and five cells in a row or column.
- Page - One widget will fill the entire page.
- Column - Widgets will appear in a single column.
- Open the dashboard page you want to add the new widget to.
- Select the "Edit Dashboard" icon at the top of the page.
- Ensure there are at least one section, using the "Add new" (⊕) next to the Sections item.
- Select "Add new" (⊕) next to "Widgets" section label.
- Fill in the "Name" (the custom HTML tag given to your component). Tag names should contain a
-to comply with the standard. Begin typing a name to see a list of matching built-in widgets.
- Select the "Update" button. You will see a confirmation notification and the Dashboard will reload.
If you are adding a new custom widget that is in a new bundle, add the URL of this custom bundle using the 'Advanced settings' section of the dashboard configuration dialog. This file needs to be served over HTTPS, as the Dashboard will not accept insecure external files.
- Open the dashboard page containing the widget you want to update/remove.
- Select the "Edit Dashboard" button from the top of the page.
- Find the widget you want to update/remove within the appropriate section.
- Select the "Remove" icon next to the Widget to remove, or click a field to edit it.
- Select the "Update" button. You will see a confirmation notification and the application will reload shortly.
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.
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
- File exists and is served over HTTPS, but the certificate is not trusted (error
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.
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.
Updated 2 years ago