Repeater

A repeater is a widget that is used to repeat the content layout for each item in a list returned by a query. For example, if a query returns a list of assets, the repeater can display the state of multiple parameters associated with each asset type using a combination of different widgets.

Using a repeater has the following advantages.
  • You can create a dashboard-type application that monitors multiple assets at the same time.
  • You can use different layouts and styles for each widget in the repeater to match the data type of an asset parameters and to enhance visibility.
  • The layout of the content only needs to be defined once in the designer and it will be repeated for each item in the list that you want to monitor.
  • The content that is repeated is automatically updated when the underlying query is updated (for example, new assets are added or the list of assets is updated by means of conditions in the query).

For example, if an entity stores the temperature recorded by assets, you can use a repeater to display not only the temperature recorded by each device, but also a gauge to indicate whether each value is in the acceptable range, as shown in the following image.

Repeater Settings

When you use a repeater, in addition to providing values to the default fields for a widget, you must define the following settings.
SettingDescription
FlowIdentifies the query to use to fetch data displayed in the repeater.
Multi-selectThis setting is used in combination with a map or a graph widget. If you select this check box, a check box appears in each row of the repeater in the application, allowing the user to select which items should appear on the map or the graph. By default, this check box is cleared.
CheckedIf you have configured the Multi-select setting, this setting indicates the initial state of the check box in each row of the repeater in the application. By default, this check box is cleared. If you select this check box, all the check boxes in the application are selected.
ActionIdentifies the action that should be performed when the repeater is selected. For example, suppose you want to allow the application users to select an asset, and then retrieve more information about the asset. In that case, select Set global value, and then select the global variable that stores the asset ID. The value set in this global variable is then used as an input to another query to retrieve data about the asset.

You can add multiple actions.

Load <number> rows at a timeIdentifies the number of rows that should appear by default in the repeater. By default, the value in this box is 10. If you select this check box, the Paging and "Load more" button options appear.
  • Paging: If you select this option, each page in the repeater will contain the number of rows that you specify. You can navigate to the other pages to access the rest of the rows.
  • "Load more" button: If you select this option, the repeater will initially contain the number of rows that you specify. A Load more button appears in the application, which allows the application user to retrieve additional rows in the same page.
Item Horizontal AlignmentIdentifies the number of repeater instances that will appear horizontally next to one another before moving to the next row.
For example, suppose you want to display the following information in the repeater.
Device IDLatest Time Stamp
Device 12019/12/22 8:04:37:037
Device 22019/12/22 22:14:31:545
Device 32019/12/22 8:04:40:040
Device 42019/12/21 5:28:59:059
If you enter 2 in this box, the table is split as follows in the repeater.
Device IDLatest Time StampDevice IDLatest Time Stamp
Device 12019/12/22 8:04:37:037Device 22019/12/22 22:14:31.545
Device 32019/12/22 8:04:40:040Device 42019/12/21 5:28:59:059

Using a Repeater for a Basic Operation

Suppose you want to use a repeater to display temperature recorded by multiple sensors, which is stored in the M2M_data entity. In addition to displaying the temperature, you can use a gauge widget in the repeater to highlight whether the temperature is in the acceptable range, as shown in the following image.

To do so, perform the following steps:
  1. Create the following queries:
    • GetDistinctDeviceIDs: To fetch a distinct list of device IDs from the M2M_data entity. Enter or select values as shown in the following image.

    • GetLastDeviceTemperature: To fetch the measurement time (that is, time stamp) and the measured value of the temperature for each device. Enter or select values as shown in the following image.

  2. Create an application, and then add a page.
  3. Add a container to the page for the heading row, and perform the following steps:
    1. Split the container into four columns.
    2. In each column, add a header widget to contain the column headings.
    3. Specify the following column headings:
      • Device ID
      • Last Reading
      • Temperature
      • Gauge
    4. In the Visual section for each heading, select the Custom Colors check box, and in the Color box, select the white color.
  4. In the Visual section, select the Custom Colors check box, and in the Background Color box, select the dark blue color.
  5. Add a repeater for the data rows, and perform the following tasks:
    1. Split the repeater into four columns.
    2. In the first column, add a text widget and an input widget.
    3. In the second column, add a text widget.
    4. In the third column, add two text widgets.
    5. In the fourth column, add a gauge widget.

    The widget appears as shown in the following image.

  6. Select PAGE DATA, and then perform the following steps:
    1. Add the two queries that you have created.
    2. For the GetDistinctDeviceIDs query, configure the settings as shown in the following image.

    3. For the GetLatestDeviceTemperature query, configure the settings as shown in the following image.

  7. In the REPEATER PROPERTIES section, in the Flow box, select the query GetDistinctDeviceIDs.
  8. In the PAGE DATA section, from the the GetDIstinctDeviceIDs query, drag M2M_data.device_id to the text widget and the input widget in the first column of the repeater.
  9. In the INPUT WIDGET PROPERTIES section, select the Disabled and Hidden check boxes.
  10. In the PAGE DATA section, from the GetLastDeviceTemperature query:
    • Drag DeviceID to the input widget in the first column of the repeater.
    • Drag M2M_data.timestamp to the text widget in the second column of the repeater.
    • Drag M2M_data.data to the two text widgets in the third column and the gauge widget in the fourth column of the repeater.
  11. Select the text widget in the second column, and in the TEXT PROPERTIES section, in the Format box, select DateTime.
  12. Select the first text widget in the third column, and in the TEXT PROPERTIES section, select Add Conditions, and then specify values as shown in the following image.

  13. Select the second text widget in the third column of the repeater, and in the TEXT PROPERTIES section, perform the following steps:
    1. In the Visual section, select the Custom Colors check box, and then in the Color box, select red.
    2. Select Add Conditions, and then specify values as shown in the following image.

  14. Select the gauge widget in the repeater, and in the GAUGE PROPERTIES section, perform the following steps:
    1. Delete two of the color sections.
    2. In the Start Position and Label boxes for the remaining color section, enter 50.
    3. In the Maximum box, enter 100.
    4. In the Units box, enter degrees Celsius.
      Tip: If you want to enter °C, you can copy it from a Microsoft Word document.

    The repeater widget appears as shown in the following image.

  15. Save the application, and preview it.

    The application appears as shown in the following image.

Using a Repeater for a Multi-Select Operation

Suppose you want to use a repeater to plot a trend graph of temperature recorded by selected devices. You want to allow application users to select the devices whose temperature you want to plot in real time, as shown in the following image.

To do so, perform the following steps:
  1. Create the following queries:
    • GetDistinctDeviceIDs: To fetch a distinct list of device IDs from the M2M_data entity. Enter or select values as shown in the following image.

    • GetLatestDeviceTemperature: To fetch the measurement time (that is, time stamp) and the measured value of the temperature for each device. Enter or select values as shown in the following image.

  2. Create an application, and then add a page.
  3. Add a container with six columns.
  4. Except for the first column, merge the other five columns.
  5. Add a repeater and a graph widget to the container, and add a header widget to the repeater, as shown in the following image.
    • The repeater provides a list of devices that the application users can select.
    • The graph plots the temperature recorded by the selected devices.
  6. Select PAGE DATA, and perform the following steps:
    1. Add the two queries that you have created.
    2. For the GetDistinctDeviceIDs query, configure the settings as shown in the following image.

    3. For the GetLatestDeviceTemperature query, configure the settings as shown in the following image.

  7. In the REPEATER PROPERTIES section, in the Flow box, select the query GetDistinctDeviceIDs, and then select the Multi-select and Checked check boxes.
  8. In the GRAPH PROPERTIES section:
    • In the Type box, select Lines.
    • In the X-axis Data box, select M2M_data.timestamp from the GetLatestDeviceTemperature query.
    • In the X-axis Label box, enter Time.
    • In the Y-axis Label box, enter Temperature.
    • In the Data box, select M2M_data.data from the GetLatestDeviceTemperature query.
    • In the Label box, select M2M_data.device_id from the GetLatestDeviceTemperature query.

  9. In the GRAPH PROPERTIES section, in the Responsive subsection, set the height to 50 percent.
  10. Select the header widget, and then in the HEADER PROPERTIES section, select Data, and then select M2M_data.device_id from the GetDistinctDeviceIDs query.
  11. Select PAGE DATA, and then perform the following steps:
    1. For the GetDistinctDeviceIDs query, point to the row containing M2M_data.device_id, and then select . This will create a global variable for the ID.
    2. For the GetLatestDeviceTemperature query, drag the input DeviceID to the global variable that you have created.
  12. Save the application, and preview it.

    The application appears as shown in the following image. You can use the check boxes to display or hide the temperature curve for each device.