DocsICP FilingConsole
官方文档
首页

Switch

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

The switch component lets you display and control the state of a device property, such as a power switch. It can also reflect the state of a value from an API. This topic describes how to configure the switch component.

Step 1: Add a component

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

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

  3. (Optional) Add section components to set up the page layout. For more information, see Horizontal and Vertical Sections.

  4. Above the component list on the left of the canvas, enter Switch in the search box to find the component. Then, drag the component onto the canvas.

    For more information about adding components, see Add Component.

    When you select the switch component on the canvas, the properties panel appears on the right, containing the Style and Interaction tabs. On the Style tab, you can configure properties such as component visibility, opacity, margin, width, height, the switch data source, and colors for the ON/OFF states.

Step 2: Configure data source

  1. On the Style panel on the right of the mobile application editor, click Configure Data Source next to Switch Data.

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

    Available data source types include device, API, static data, and app push.

    Note

    Supported data types returned by the data source:

    • Device: boolean (bool) and integer (int).

    • API: boolean (bool) and numeric (single-precision, double-precision, and integer).

    The mapping is configured as follows:

    • Boolean: true maps to On, and false maps to Off.

    • Integer: To convert integer data from a device to a boolean value, you must specify which integer values map to true and false.

    • Numeric: Use a data filter script to convert numeric data from an API to a boolean value.

  3. Click OK.

    The component state updates in real time based on the associated data source.

Step 3: Configure style

  1. In the Style panel on the right of the mobile application editor, configure the component's appearance.

    Parameter

    Description

    Switch style

    Sets the component's style type. Options include:

    • Default: Displays the component's default style.

    • Image: Allows you to use custom images for the switch states.

    ON state

    Sets the color (default) or image for the ON and OFF states of the switch.

    Colors and images support dynamic data sources:

    • Colors support data from an API or app push.

    • Images support the same data sources as the Image component. For more information, see Image.

    OFF state

    Switch response mode

    This setting takes effect only when the component's data source is a device. Manually changing the switch state sends a command to the device to update the corresponding property value.

    You can set the update mode for the switch state:

    • Wait for data response: The component's state updates only after the device reports the new property value.

    • Instant response: The component's state updates immediately after you change it manually.

      You must set the data reporting delay (ms). If the device does not report the updated data within this time frame, the switch reverts to its previous state, and the update fails.

  2. Adjust the component's width, height, and position on the page. For more information, see General Styles.

Step 4: Configure interactions

  1. In the Interaction panel on the right, click Add Interaction to set an event and an action.

    This component supports the value change, click, and double-click events. For example, you can use the value change event to trigger the Set Device Property action, which sends a command to a device to modify one of its property values.

    For more information, see Interaction Configuration.

  2. Preview and debug the data and behavior of the component. For more information, see Preview and Debugging.

Previous：ButtonNext：Slider