Dashboards

A new mobile-friendly management tool that visually displays information based on what components are used.

Enable finDashboard extension

In order to use this functionality, finDashboard extension must be enabled

Follow the steps below to enable the extension:

Select the App Launcher icon on the top left
Select the Setting tile under Advanced Apps
- This will open a drawer with the following options: Ext, Proj, Header, and Alarm
Select the Ext option to open up the extensions
- This will open a side menu on the right where the extension will be in alphabetical order
Scroll down and find the following extension: finDashboard
- If the version number is green, this means that the extension is enabled
- If the version number is red, this means that the extension is disabled
Select on the extension if it is disabled, this will open a drawer
Select on the Enable option
Refresh the page

Creating a new Dashboard

1. Select the Dashboards tile which is under End User apps

2. Once selected, a drawer will open that contains any existing dashboards

If there are none, then it will display No Data

3. Select the icon to create a new dashboard

4. The form Add Dashboard will open

Title: Name for the dashboard
dashboardOn: Determines where the dashboard will run on
Layout: Choose how the widgets will be organized
(Optional) Cloud Dashboard: It adds a tag to the record that allows it to be viewed in the cloud

If the layout is incorrect after creating the dashboard, it can be changed by resizing the widget if needed.

5. After selected Save, the layout will be created

Edit

1. Select the edit icon

2. A popup called Edit Dashboard will appear where the title and dashboardOn can be edited

3. Select Save to save the changes

Delete

1. Select the delete icon

2. A popover will appear where it will confirm if the correct dashboard is being deleted

3. Select Yes to complete the delete action

Widgets provide quick access to information without requiring to open the app that manages the information

API: Widget

Edit

Widget Title

Name of the widget, this can be optional

Edit View

Edit mode will always show the widget title bar with the three dots to edit/duplicate/delete even if there is no widget title

View Mode

Doesn’t display the widget title bar if there is no title in the view mode

History Chart

This would display the historical data of selected points on a chart.

API: History Chart

History Chart Points and Range

Note: History charts update on an hourly interval

Allow the ability for users to select what the default historical range that should be displayed
- Today/ yesterday is 1h
- thisweek/ lastWeek is 1day
- thisMonth/ lastMonth is 1week
- thisYear/ lastYear is 1month
Choose the color per point added to chart
Then select the point data type they would like to add on the chart

Line

Rotate	If checked will rotate chart
Filled	If checked will fill the chart underneath
Legend	If checked will show a legend under the chart
Download Button	If checked will show button allowing user to download the chart

Bar

Rotate	If checked will rotate chart
Legend	If checked will show a legend under the chart
Download Button	If checked will show button allowing user to download the chart

Comparison

Rotate	If checked will rotate chart
Legend	If checked will show a legend under the chart
Download Button	If checked will show button allowing user to download the chart

Stacked

Rotate	If checked will rotate chart
Legend	If checked will show a legend under the chart
Download Button	If checked will show button allowing user to download the chart

3D

Rotate	If checked will rotate chart
Legend	If checked will show a legend under the chart
Download Button	If checked will show button allowing user to download the chart

Value Chart

API: Value Chart

Bar

Rotate	If checked will rotate chart
3D	If checked will display 3D
Download Button	If checked will show button allowing user to download the chart

Value Gauge

Used to visualize a value for a point

API: Value Gauge

Value

API: Value

Graphic

Displays the selected graphic

API: Graphics

Weather

Displays the selected weather data

API: Weather

Table

Display information in a grid-like format of rows and columns.

API: Table

Examples

readAll(site)

readAll(site).keepCols(["id","area","dis"])

KeepCols the user specifies which columns they want to show and rest are hidden

readAll(site).addColMeta("highlights", {hidden}).addColMeta("drEvent", {hidd

AddColMeta the user specifies which columns they want to hide and the rest are shown

Map

It displays the coordinates of a site or any records that have coordinates. The map widget will only be available if the user has a valid access token. Doc on how to add the access token is found here.

API: Map

For the coordinates to get displayed, the site or record must have a geoCoord tag that contain the latitude and longitude values. Example query to use in the Map query field could be readAll(geoCoord) or site etc.

Adding a geoCoord tag to a site

Select the App Launcher icon on the top left
Select the DB Builder tile under System Integrator Apps
Select the Equip Tree, this will expand a drop-down menu to see the sites associated with your project
Select on a site, this will open a Essentials tab that will contain information regarding the site
Fill in both the latitude and longitude property fields.
1. A way to get the latitude and longitude values is via Google Maps.
2. First, find the location you want to get the coordinates from.
3. Then right click on the pin in Google Maps to find the latitude and longitude values.
4. Click on the latitude and longitude to copy to clipboard.
5. Paste on a notepad.
6. Then copy each value and paste in the respective latitude and longitude field.
Once filled in, select the Save button on the bottom right. The site now has a geoCoord tag with the latitude and longitude values and will be visible on the Map widget.

Dynamic Color Pins

On the geoCoord record, the user can add a string tag called “color” with the value being the color they want. The value can be the name of the color or hex value of the color. This would allow each geoCoord have their own unique colors if needed.

There are various websites to get the hex color codes, below are a few:

Duplicate

1. Hover over the 3 dots to pop open a menu

2. Click on the Duplicate option to duplicate the widget

This will duplicate the selected widget, and will appear at the bottom. If a point has been assigned prior to duplicating the widget, the point will also be included.

Delete

1. Hover over the 3 dots to pop open a menu

2. Click on the Delete option to delete the widget