DocsICP FilingConsole
Documentation
Home Page IoT Studio User Guide Web Visualization Development Widgets Chart widgets Device Properties

Device Properties

Updated at:
Copy as MD
My Favorites

The Device Properties component displays a table of the latest property values from devices in one or more products. This topic describes how to configure this component.

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 far left.

  3. In the component panel on the left, enter Device Properties in the search box, then drag the component to the canvas.

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

Step 2: Configure the data source

  1. StyleOn the tab in the panel on the right of the Web Application Editor, click Select ProductsSelect product.
  2. Select one or more products that contain the devices you want to monitor.
  3. Click OK.
    The component displays information for all devices from the selected products.
    Note If you select multiple products, the component displays information from the first selected product by default. After publishing the application, you can select other products from the dropdown list above the table to view their device information.

Step 3: Configure the style

  1. On the Style tab, configure the component's display settings.
    Parameter Description
    Column Display Settings Select the Allow modifying displayed content after publishing checkbox to let application users adjust the displayed columns and their order via the Column Display Settings.

    This component supports displaying a maximum of 10 attributes. You must select at least one of the device name and alias attributes. You cannot remove both. You can customize the other attributes to be displayed.
    Enable Filtering Enables filtering table content at runtime. Filtering is currently limited to a predefined set of fields, and you can select multiple fields to use as filters.
    Global Style
    Configure the global theme color and font, and whether to display the table title and pagination.
    Header Style
    Configure the row height, text style, and whether to use striped rows for the table header and body.
    Table Style

  2. Adjust the component's position on the page. For more information about general component style settings, see Configure styles.

  3. Click Preview in the upper-right corner of the page to view and debug the component's data and style.

Previous：GaugeNext：Data analysis