Use Repeater for Multi-Select Operation

The following steps are an example of using repeater for a multi-select operation.

About this task

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.

Procedure

  1. Create the following queries:
    1. GetDistinctDeviceIDs: To fetch a distinct list of device IDs from the M2M_data entity. Enter or select values as shown in the following image.
    2. 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:
    1. In the Type box, select Lines.
    2. In the X-axis Data box, select M2M_data.timestamp from the GetLatestDeviceTemperature query.
    3. In the X-axis Label box, enter Time.
    4. In the Y-axis Label box, enter Temperature.
    5. In the Data box, select M2M_data.data from the GetLatestDeviceTemperature query.
    6. 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.