Use Repeater for Basic Operation

The following steps are an example of using a repeater for a basic operation.

About this task

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.

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. 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:
    1. Drag DeviceID to the input widget in the first column of the repeater.
    2. Drag M2M_data.timestamp to the text widget in the second column of the repeater.
    3. 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.
    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.