Repeating list

Example

By default, the component displays an overview of different areas within a factory.

The default layout is a two-column grid with three items: Production Workshop, Logistics Warehouse 1, and Logistics Warehouse 2. Each item shows an image and a name label for the area.

Step 1: Add the component

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

2. In the mobile application editor, click the Components icon on the far left.

3. In the search box above the component list on the left side of the canvas, enter repeating list to find the component, then drag it onto the canvas.

   Note

   The repeating list component cannot be placed inside a column component.

   For more information about adding components, see Add components.

   After you add the component, the right-side panel displays properties such as Component Name, Component Visibility, Opacity, and paginator.

Step 2: Configure the data source

Follow these steps to configure the component's main data source. You can then configure the components within each list item to use this data source.

1. In the Style tab, hover over the Display Data area and click the edit data source icon.

2. On the data source configuration page, select a data source type and complete the configuration as prompted.

   Data source type	Description
   Device	Select a product and its devices. All Devices in Product: All devices under the selected product, regardless of whether they have been imported into the project. Specified Devices in Project: Manually select devices that have already been imported into the project.
   API	Supported API types include Data Analysis Service, custom API, and Service Development Workbench. For more information, see APIs. Important The data format returned by the API must be consistent with the provided static data format. You can use the API's data filtering function to ensure the returned data matches the required format.
   App push	Allows you to use messages from app push notifications as the data for the component. For more information, see App push.
   Static data	The system provides a static data sample. Your custom static data must match the format of this sample.

3. Click OK.

Step 3: Configure list style

1. (Optional) In the Style tab on the right side of the canvas, click the Show button next to paginator and set Items per page.

   Note

   The component displays a number of items based on the configured data source. If you enable the paginator, Items per page sets the maximum number of items to display. A Load More button appears at the bottom of the list. After all data is loaded, the message All items displayed appears.

2. On the canvas, double-click the component.

3. In the Style tab of the component editing page, configure the list display style.

   Parameter	Description
   Number of columns	Sets the number of repeating columns per row in the list. The value must be an integer from 1 to 3. Note The repeating list renders data by duplicating the style template that you configure in the first column.
   Container height	Sets the height of each item in the list.
   Row spacing	Sets the distance between rows in the list.
   List background color	Sets the background color for the entire list.
   Container style	Sets the fill color, corner radius, and border visibility (top, bottom, left, and right) for each item. After you enable the border, you can set the border style. This setting also supports binding to a data source. For more information, see Bind settings to a data source.

Step 4: Configure the style template

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

1. On the component editing page, delete the default style template.

   Note

   To delete the style template, remove all components from the first column.

   The left side of the component editing page shows a list of available components, organized into three categories: Charts (Real-time Curve), Basic (Vertical Column, Horizontal Column, Card, Image, and Text), and Controls (Tab, Button, and Switch). To delete the default components, select and delete them from the first column on the canvas.

2. Drag the required components from the list on the left into the first column and configure their styles to complete the template.

   Note

   You can only configure the style template in the first column of the list. You can add multiple components to this column, but you cannot add another column or list component inside it.

   For detailed configuration instructions for each component, see the component documents under Mobile Visualization Development > Components in this product's documentation.

Step 5: Configure component data sources

To display data for each item, you must manually bind the repeating list's data source to each component in the template column.

1. Click a component in the column, such as an image component. Then, in the Style tab on the right, click the configure data source icon next to Upload Image.

   Note

   The method for accessing the data source configuration page varies by component. For specific instructions, refer to the documentation for each component.

2. Select a data source type to configure.

   Data source type	Description
   Parent component data source	This is the default option. It refers to the data source configured in Step 2: Configure the data source. The configuration method varies depending on the data source type of the repeating list component: Device: Select data items, such as device basic tags and device property tags. API or static data: Select a field. Note If you use a Real-time Curve component and the repeating list component's data source is set to Device, you cannot change the mode, and device parameters are not included. For other settings, see Real-time Curve.
   Device	The available options depend on the data source types supported by the component itself. When you configure dynamic parameters for a data source, you can select the repeating list's data source as the source of the dynamic parameters. For example, for a dynamic device in a device data source, after you select the repeating list's data source, you can click the settings button on the right to configure how the dynamic data source updates. In the Data Source Configuration dialog box, the Select Data Source drop-down list provides three options: Device, API, and Static Data. After selecting Device, you can switch between Specified Device, Dynamic Device, or Empty Device modes. In the Data Item area, you can then configure the Device Property and its corresponding Property field. The Format Reference and Validate Data Format buttons are available at the bottom. Click OK to finish.
   API

3. Click OK.

4. In the upper-right corner of the page, click Save.

5. In the upper-left corner of the canvas, click Back to Page.

   You can preview the data and style of the repeating list in the mobile application editor.

6. Preview and debug the component's data display and style. For more information, see Preview and debug.