Add a Widget

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

  1. Click Build or Manage Dashboards.

  2. In the Project Tree, click the white button next to a location node.

    The location page editor opens.

  3. Select the Widgets tab.
  4. 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.

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

  6. Click Binding Tree.
  7. 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.
  8. 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

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

PropertyPurpose
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

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

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

PropertyPurpose
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

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

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

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

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

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

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 SeriesClick the button to remove the most recently added series.

DVR

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

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

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

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

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.