Skip to main content

Dashboard Designer - Dynamic Dashboard Workflow

Dynamic dashboards are pages that update their content based on user selections rather than being hard-coded to display specific data points. This is one of the most powerful features of the Dashboard Designer, enabling a single dashboard layout to serve many different use cases by letting the user choose which data to display at runtime.

What Makes a Dashboard Dynamic​

A static dashboard has each component bound to a specific data point XID. If you have 50 machines to monitor, you would need 50 separate pages. A dynamic dashboard solves this by using watch lists and parameterized bindings so that the same page layout adapts to whichever data the user selects.

The key ingredients of a dynamic dashboard are:

  1. A watch list selector -- Allows the user to choose a predefined watch list or query.
  2. A <ma-watch-list-get> component -- Fetches the data points from the selected watch list and makes them available as an array.
  3. Parameterized component bindings -- Components reference points from the watch list array using AngularJS filter expressions instead of hard-coded XIDs.

Building a Dynamic Dashboard​

Step 1: Choose a Watch List​

In the Dashboard Designer, the Choose a watch list dropdown in the canvas toolbar lets you select a watch list to use during design. This populates the designer.watchList and designer.points variables, which you can reference in component attributes.

When a watch list is selected, the designer automatically adds a <ma-watch-list-get> component to the page (visible in the code view):

<ma-watch-list-get ng-model="designer.watchList"
                   parameters="designer.parameters"
                   on-points-change="designer.points = $points"
                   watch-list-xid="WL_12345">
</ma-watch-list-get>

Step 2: Add Components with Dynamic Bindings​

Instead of specifying a point-xid directly on each component, use the point attribute with an AngularJS filter expression to reference points from the watch list:

<ma-point-value
    point="designer.points | filter:{name:'Temperature'}:true | maFirst"
    label="Temperature:">
</ma-point-value>

This expression:

  1. Takes the designer.points array (all points from the watch list).
  2. Filters it to find points where the name property matches Temperature.
  3. Uses the maFirst filter to select the first matching point.

When the user selects a different watch list, the designer.points array updates, and all components re-bind to the new set of points automatically.

Step 3: Add a Watch List Selector for End Users​

For the finished page (not just design time), add a watch list selector component so users can choose which watch list to view:

<ma-watch-list-select ng-model="designer.watchList"></ma-watch-list-select>

Or use a more specific selector that only shows certain types of watch lists:

<ma-watch-list-select ng-model="designer.watchList"
                      select-first="true"
                      watch-list-type="'static'">
</ma-watch-list-select>

Filtering Strategies​

The way you filter points from the watch list determines how flexible your dashboard is. Common approaches include:

Filter by Point Name​

point="designer.points | filter:{name:'Voltage L1'}:true | maFirst"

This works when all watch lists use consistent point naming conventions.

Filter by Device Name​

point="designer.points | filter:{deviceName:'Chiller-1'}:true | maFirst"

Useful when you want to show all points from a specific device.

Filter by Tag or Data Type​

point="designer.points | filter:{dataType:'NUMERIC'}:true"

This returns all numeric points, which you could display in a chart that adapts to show whatever numeric data is in the selected watch list.

Using the Index​

point="designer.points[0]"
point="designer.points[1]"

Simple index-based access works when your watch lists always have points in a known order.

Watch List Parameters​

Some watch lists support parameters -- user-configurable values that further refine the data points returned. For example, a watch list might have a "Building" parameter that the user sets to filter points by building location.

Parameters are automatically handled by the <ma-watch-list-get> component:

<ma-watch-list-get ng-model="designer.watchList"
                   parameters="designer.parameters"
                   on-points-change="designer.points = $points">
</ma-watch-list-get>

<ma-watch-list-parameters ng-model="designer.parameters"
                          watch-list="designer.watchList">
</ma-watch-list-parameters>

The <ma-watch-list-parameters> component renders input fields for any parameters defined in the selected watch list, giving users control over which subset of data to display.

Dynamic Charts​

Charts are particularly well-suited for dynamic dashboards. A serial chart that displays all points from a watch list:

<ma-serial-chart style="height: 400px; width: 100%;"
                 series-1-point="designer.points[0]"
                 series-1-type="LINE"
                 series-2-point="designer.points[1]"
                 series-2-type="LINE"
                 series-3-point="designer.points[2]"
                 series-3-type="LINE">
</ma-serial-chart>

For a variable number of points, consider using <ma-flexi-display-flex> or building the chart configuration in the Page Editor with ng-repeat.

Best Practices​

  • Design with a representative watch list -- Select a watch list during design that contains the types of points your dashboard will display, so you can verify the layout works correctly.
  • Use consistent naming conventions -- Dynamic dashboards work best when all watch lists follow the same point naming pattern, making filter expressions reliable across different selections.
  • Provide fallbacks -- Consider what happens when a watch list does not contain a point matching your filter. Use ng-show to hide components that have no data rather than displaying empty or broken visualizations.
  • Test with multiple watch lists -- Switch between several different watch lists to verify that your dynamic bindings resolve correctly in all cases.
  • Keep the layout simple -- Dynamic dashboards that try to display too many different types of data become confusing. Focus on a specific monitoring view and create separate dashboards for different purposes.