DocsICP FilingConsole
官方文档
首页

Card

更新时间：
复制 MD 格式
我的收藏

The card component displays common data in a specific UI style, such as device property data or numeric values returned by an API. This topic explains how to configure the 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 list on the left, search for Card, find the component, and drag it onto the canvas.

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

    Enter Card in the search box of the component panel on the left, select the card component from the Basic Components section, and drag it onto the canvas. In the Style panel on the right, configure basic properties such as coordinates, size, name, visibility, and opacity. Click Configure Data Source to bind data and set style properties such as Title, Unit, Background Color, and Border (thickness, color, and style).

Step 2: Configure the data source

  1. In the Style panel on the right side of the web application editor, click Configure Data Source next to Display Data.

  2. On the Data Source Configuration page, select a data source type and complete the configuration.
    The available data source types are device, API, and App Push.
    Note An API or device data source must return a single-precision number, double-precision number, or integer.
    Take the device data source as an example. In the Select Data Source panel, configure the following parameters in order: select a product, select a device (supports specified device, dynamic device, and empty device), select a Data Item type (for example, device property), and select a specific property. After you complete the configuration, you can click Format Reference to view an example or click Validate Data Format to validate the data format. After you confirm the configuration, click OK.
  3. Click OK.

Step 3: Configure styles

  1. In the Style panel on the right, set the card title, data unit, background style, and border style.

    Many settings in the Style panel support dynamic data sources, including device, API, and application push. However, the border color setting only supports API and application push data sources.

    Each parameter requires a specific data format. The data returned by your data source must match the required format.

    Parameter

    Data format

    Component Visibility

    A boolean or enum type. Set the corresponding values for Visible and Invisible.

    If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure whether the component is visible when the device is offline. If the data source returns a numerical data type, you must use Convert Integer to Boolean or Convert Number to Enum to configure the visibility.

    Note

    In a Repeat List, to configure component visibility based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows:

    • If the data source of the Repeat List is a device, the data source for component visibility can be set to parent component data source or device.

    • If the data source of the Repeat List is a non-device type, the data source for component visibility must be device.

    Fill Color

    A boolean or enum type.

    If the data source is a device, you can only select a property from the thing model. Supported data formats are float, double, integer, boolean, and enum. In this case, you can configure the display color of the component's content when the device is offline. If the data source returns a numerical type, you must use Convert Integer to Boolean or Convert Number to Enum to set the colors for different values.

    Note

    In a Repeat List, to configure the color based on a thing model property (including the offline state), the component's data source must be a device. The configuration is as follows:

    • If the data source of the Repeat List is a device, the data source for the component's color can be set to parent component data source or device.

    • If the data source of the Repeat List is a non-device type, the data source for the component's color must be device.

    Border Width

    An integer from 0 to 1000.

    Border Color

    A JSON object for an RGB color.

    Note

    The a parameter is optional and represents the color's opacity, ranging from 0 to 100.

    {
  "r": 255,
  "g": 255,
  "b": 255,
  "a":0
}

    Border Style
    An integer from 0 to 2.

    The values map to the line styles as follows (in the same order as the dropdown list):

    • 0: Solid line
    • 1: Dashed line
    • 2: Dotted line

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

Step 4: Configure interactions

  1. Select the component's Interaction tab to configure events and actions. For more information, see Configure interactions.

    For example, you can configure the component to trigger the open link action on click. This action allows you to specify how a link opens and what it displays.

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

Previous：IndicatorNext：Clock