Add a Widget

You can add dynamic widgets such as callouts, charts, gauges, and lists to your location page or device template.

Click Build or Manage Dashboards.
In the Project Tree, click the white button next to a location node.

The location page editor opens.
Select the Widgets tab.
Use the drop-down menu or the tabs to select the layer group for which to edit widgets.

If you select Default, the widget appears in all layers. If you select any other layer group, the widget appears in only that layer group.
Drag a widget onto the page or template.

Tip

For location pages, the image always fills the whole page. If you want empty space around the image for widgets, use an image editor to add the space and then re-upload the image.
Click Binding Tree.
Drag and drop one of the following onto the widget:
- A device node from the Project Tree. The widget displays the real-time or historical value for the currently visible layer and the bound device. You can change the displayed value by changing the layer.
- A node from the Data Tree. The widget displays the real-time or historical data for the node.
- (Device templates only) A data metric from the Points list. The widget displays the real-time or historical value for the bound metric and the current device. You can change the displayed value by opening a difference instance of the template.
If you want, edit the widget:
- Drag the edges of its container to resize it.
- Right-click to delete, copy, paste, duplicate, or arrange the widget.
- Right-click and select Edit Properties to edit the widget's properties.

Widgets and Properties

Weather

Weather
The weather widget displays weather information for a specified location.

Property	Purpose
Postal Code	Set the postal code to display weather information for.
Country	Set the country that goes with the postal code.
Units	Choose between Fahrenheit and Celsius.

Callout

Callout
The callout widget displays data for one of the following:

The bound Project Tree node and currently visibile layer
The bound Project Tree node and current device
The bound Data Tree node

The widget displays a formatted value. At the top of the widget is a label and a color-coded graphic indicating the status of the data metric. The colors are as follows:

– OK
– Alarm
– Stale
– Overridden
– Disabled
– Fault

Property	Purpose
Set Label	Override the label text. If not specified, the label will be the name of the Project Tree or Data Tree node.
Hide Status	Show or hide the graphic that indicates the status.

Radial Gauge

Radial Gauge
The radial gauge displays the real-time value of the data metric using a semi-circular gauge.

Property	Purpose
Gauge Label	Set the title text at the top of the widget.
Gauge Min	Set the minimum of the gauge range.
Gauge Max	Set the maximum of the gauge range.

List

List
The List widget displays the names, values, and statuses of a list of nodes that you specify. Each item in the list displays information for the bound Project Tree node and layer, or for the bound Data Tree node.

Status is indicated with the following colors:

– OK
– Alarm
– Stale
– Overridden
– Disabled
– Fault

Property	Purpose
Set Label	Set the title text at the top of the widget.
Hide Status	Show or hide the graphic that indicates the status.
Remove Series	Click the button to remove the most recently added list item.

Line Chart

Line Chart
The Line Chart widget overlays the historical values for specified data metrics.

To enable the user to set a date range for historical data widgets, including the line chart, add a Date Range Picker widget.

Property	Purpose
Set Label	Set the title text at the top of the widget.
Hide Legend	Show or hide the chart legend.
Historic Range	Set whether the chart shows: The same date range as the Date Range Picker The next date range relative to the Date Range Picker The previous range relative to the Date Range Picker
Historic Rollup	Set the interval for the chart rollup. One point is plotted per instance of the interval.
Remove Series	Click the button to remove the most recently added series.

Area Chart

Area Chart
The Area Chart widget overlays the historical values for specified data metrics. It is like the line chart, except that the area below the line is filled in.

To enable the user to set a date range for historical data widgets, including the area chart, add a Date Range Picker widget.

Property	Purpose
Set Label	Set the title text at the top of the widget.
Hide Legend	Show or hide the chart legend.
Historic Range	Set whether the chart shows: The same date range as the Date Range Picker The next date range relative to the Date Range Picker The previous range relative to the Date Range Picker
Historic Rollup	Set the interval for the chart rollup. One point is plotted per instance of the interval.
Remove Series	Click the button to remove the most recently added series.

Historic or Real-Time Column Chart

Historic or Real-Time Column Chart
The Column Chart widgets display the historical or real-time values for specified data metrics.

Property	Purpose
Set Label	Set the title text at the top of the widget.
Show Historical	Set whether historical or real-time data is shown.
Hide Legend	Show or hide the chart legend.
Historic Range	Set whether the chart shows: The same date range as the Date Range Picker The next date range relative to the Date Range Picker The previous range relative to the Date Range Picker
Historic Rollup	Set the interval for the chart rollup. One point is plotted per instance of the interval.
Remove Series	Click the button to remove the most recently added series.

Historic or Real-Time Bar Chart

Historic or Real-Time Bar Chart
The Bar Chart widgets display the historical or real-time values for specified data metrics.

Set Label	Set the title text at the top of the widget.
Show Historical	Set whether historical or real-time data is shown.
Hide Legend	Show or hide the chart legend.
Historic Range	Set whether the chart shows: The same date range as the Date Range Picker The next date range relative to the Date Range Picker The previous range relative to the Date Range Picker
Historic Rollup	Set the interval for the chart rollup. One point is plotted per instance of the interval.
Remove Series	Click the button to remove the most recently added series.

Pie Chart

Pie Chart
The Pie Chart widget displays real-time values for specified data metrics.

Property	Purpose
Set Label	Set the title text at the top of the widget.
Hide Legend	Show or hide the chart legend.
Remove Series	Click the button to remove the most recently added series.

DVR

DVR
The DVR widget pushes historical data to all zones, callouts, real-time charts, and lists. It contains a toggle for Realtime and Playback options and a play button.

To enable the user to set a date range for historical data widgets, including the DVR, add a Date Range Picker widget. The user can select a range, select Playback, and then press Play.

This widget does not work in edit mode. Click Submit to preview the page and test the widget.

This widget does not have editable properties.

Date Range Picker

Date Range Picker
The date range picker widget controls the date range shown by all historical charts and the DVR widget. The user specifies a date range and clicks the left or right arrow to go to the previous or next range.

Property	Purpose
Format	Determine the format for displaying the date in the widget. Some examples: yMd: in the en_US locale, displays as `11/25/2015`. MMMM dd y: displays as `November 25, 2015`. For a reference of date strings, see this page.
Delimiter	Determine the character or characters that go between the first and last dates in the range.

Layer Selection

Layer Selection
The Layer Selection widget allows the user to control which layer on this image is currently active. Add this widget in the Default layer to make sure it always appears regardless of the selected layer.

When a layer is selected:

Zones and widgets for this layer group are visible.
For color-coded data layers, zones use the data metrics, gradient, and range specified for this layer.
Widgets use the data metrics specified for this layer.

Simple Text

Simple Text
The Simple Text widget is a text box. Edit the Display Text property to manually enter text, or bind a value to the widget.

Property	Purpose
Display Text	Manually enter the text to appear in this widget.
Text Font	Select a font for the widget.
Text Size	Set a font size for the widget.
Text Color	Set a font color for the widget.
Horizontal Alignment	Set whether the text is left-aligned, centered, or right-aligned.
Vertical Alignment	Set whether the text is top-aligned, aligned to the vertical center, or bottom-aligned.
Padding	Set a number of pixels of empty space to enforce between the text and the border of the text box.
Background	Set a background color for the text box.
Stroke	Set an outline color for the text box.
Stroke Style	Set an outline type for the text box.
Stroke Size	Set a pixel width for the text box outline.
Round Corners	Set a pixel radius for the widget's rounded corners.
Binding Target	If you bind a node to this text box, set the type of binding. name – The name of the bound metric or node. value – The raw number value. vFormatted – The formatted number value. vTooltip – The tooltip for the bound metric or node. status – The status of the data metric. Available options include: ok, alarm, stale, overridden, disabled, and fault. type – The data type of the value. uuid – The Project Assist unique identifier for the bound metric or node. path – The data path of the bound metric or node.

Image

Image
The Image widget displays an image that you upload.

Property	Purpose
Image Path	Drag the image file to this field to upload it.
Padding	Set a number of pixels of empty space to enforce between the image and the border of the image widget.
Background	Set a background color for the image.
Stroke	Set an outline color for the image widget.
Stroke Style	Set an outline type for the image widget.
Stroke Size	Set a pixel width for the image widget outline.
Round Corners	Set a pixel radius for the widget's rounded corners.

Previous: Manage Layers

Next: Create a Device Template

Add a Widget

Tip

Widgets and Properties