Device Live Data-IoT Studio(IoT Studio)-阿里云帮助中心

Step 1: Add the component

Create a mobile application. For more information, see Create a mobile application.
In the mobile application editor, click the Components icon on the far left.
(Optional) Add a column component to set the page layout. For more information, see Horizontal columns and vertical columns.
Above the component list on the left of the canvas, enter Device Live Data in the search box, find the component, and drag it onto the canvas.

For more information about adding components, see Add components.

After the component is added, the Device Live Data component appears on the canvas with a "No data" message by default. In the Style panel on the right, you can configure properties such as Select Products, Column Display Settings, Filterable, Global Style, Header Style, Table Style, and Data Settings.

In the Style panel on the right, under Select Products, click Select Products.
Select the checkboxes next to the products you want to monitor. You can select multiple products.
Click OK to complete the configuration.

The component displays all device information under the selected products.

Note
If you select multiple products, the component displays the device information for the first selected product by default. Once the application is published, users can select other products from the filter in the upper-right corner of the table to view their corresponding device information.

In the Style panel on the right, configure the display settings for the component.

Parameter	Description
Column Display Settings	Allows users to change the displayed columns and their order once the application is published. The component displays up to 10 attributes. You must keep at least one identifier selected: Device Name or Alias. The remaining attributes are customizable.
Filterable	Allows you to select multiple fixed fields that users can use to filter the table at runtime.
Global Style	Configures the global theme color, font, and visibility of the table title.
Header Style	Configures the row height, text style, and alternating row colors for the table header and table body.
Table Style
Data Settings	Sets the default number of items per page, up to a maximum of 200.

Adjust the component's dimensions and position on the page. For more information, see General styles.
Preview and debug the component's data display and style. For more information, see Preview and debug.