Repeater list

Application example

By default, the component displays the real-time environmental status of various areas in a factory.

Step 1: Add the component

1. Create a web application. For more information, see Create a web application.

2. In the Web application editor, click the component icon on the left.

3. Above the component list on the left side of the canvas, enter Repeater list, find the component, and drag it to the canvas.

   For more information about adding components, see Add a component.

   

Step 2: Configure the data source for the repeater list

You can configure the data source for the component. Each component in the repeater list configures its own data source, which must be within the scope of the repeater list's main data source.

1. In the style pane, hover over the Display data area and click the Edit Data Source icon .

2. On the Data Source Configuration page, configure the data source.

   Data source type	Description
   Device	Select a product and its devices. All devices in the project: All devices of the selected product in the project, regardless of whether they are imported into the project. Specified devices in the project: Manually specify devices that are already imported into the project.
   Interface	Supported API types are Data Analysis Service, Custom API, and Business Logic Development. For more information, see API. Important If the data returned by the API does not meet the following data format, process the returned data to match this format. { "data": [ { "city": "Hangzhou", "month": "Jan", "cost": 150 }, { "city": "Shanghai", "month": "Jan", "cost": 180 } ] }
   Application Push	Lets you set messages pushed by the application as the data for the component. For more information, see Application Push.
   Static Data	The system provides a static data sample. Custom static data must be in the same format as the sample. For more information, see Static data.

3. Click OK.

Step 3: Configure the style of the repeater list

1. In the style pane on the left, configure the display style for the repeater list component.

   Configuration item	Description
   Layout configuration	Configure the layout mode, number of items per row, outer margin, and row (column) spacing for the repeater list component. For a detailed description, click the help button on the right.
   Paginator	Enabling paginated display lets you set the related configuration items.
   Device search box	Enabling the device search box lets you configure the display colors of its parameters. Note This configuration takes effect only when the data source of the repeater list component is set to Device.

2. Adjust the position of the component on the page. For more information about common component style configurations, see Style configuration.

Step 4: Configure the style template

The repeater list component uses a style template to display multiple data items from the data source.

1. Double-click the repeater list component. In the component editor, delete the default style template.

   

2. From the component list on the left, drag the components that you need to the canvas and configure their styles to create the template.

   For detailed instructions about how to configure components, see the component documentation in the Web Visualization Development > Components section of the product documentation.

   Note

   You cannot use a repeater list component within the style template.

Step 5: Configure the data source for the style template

To display data items from the repeater list's data source, you must manually attach the data source to each component in the style template.

1. Click a component in the style template. For example, for an image component, go to the Style page on the right and click the Configure Data Source button next to Upload Image

   Note

   The method for opening the data source configuration page varies by component. For more information, see the documentation for the specific component.

2. Select a data source type and configure it.

   Data source type	Description
   Parent component data source	The default value. This is the data source configured in Step 2: Configure the data source for the repeater list. The configuration method varies depending on the data source type of the repeater list component: Device: Select the Basic device tags and Device property tags data items. API or Static Data: Select fields. Note If you use the Real-time Curve component and the data source of the repeater list component is set to Device, you cannot modify the Mode. The Device parameter is not included. For other configurations, see Real-time Curve (Legacy).
   Device	Determined by the data source types that the component itself supports. When you configure dynamic parameters for the data source, you can select the data source of the repeater list component as the data source. For example, for the Dynamic device in a device data source, after you select the data source of the repeater list component, you can click the settings button on the right to configure the dynamic data source update method, as shown in the figure.
   API
   Static Data

3. Click OK.

4. Click the Save button in the upper-right corner of the page.

5. Click Return to page in the upper-left corner of the canvas.

6. Optional:In the Web visualization editor, click the Preview button to preview the component.