Dashboards

Owned by Kimberly Cruz (Unlicensed)
Last updated: Sept 08, 2022 by Ricky Villa
7 min read

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:

  1. Select the App Launcher icon on the top left

  2. Select the Setting tile under Advanced Apps

    • This will open a drawer with the following options: Ext, Proj, Header, and Alarm

  3. 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

  4. 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

  5. Select on the extension if it is disabled, this will open a drawer

  6. Select on the Enable option

  7. 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

Widget

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

Cylinder

Download Button

If checked will show button allowing user to download the chart

 

Pie

3D

If checked will display 3D

Download Button

If checked will show button allowing user to download the chart

 

Gauge

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. The drop-down list of weather data to choose from is populated by the added weather in the Weather app.

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: Map - Access Token Setup.

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

  1. Select the App Launcher icon on the top left

  2. Select the DB Builder tile under System Integrator Apps

  3. Select the Equip Tree, this will expand a drop-down menu to see the sites associated with your project

  4. Select on a site, this will open a Essentials tab that will contain information regarding the site

  5. 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.

  6. 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