DocsICP FilingConsole
官方文档
首页

Interaction configuration

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

When you configure a component for an IoT web application, you can set events and actions to create component interactions. When an event is triggered, the corresponding actions are executed in the order they are configured.

Supported events and actions

  • Events: Include click, double-click, mouse enter, mouse leave, value change, focus, and blur.

  • Action execution mode: Includes run in parallel (default) and run in order.

  • Actions: Include set device properties, call a device service, open a URL, refresh component, assign a value to a page variable, show or hide a component, call other services, and open a dialog box container. The following sections describe how to configure these actions.

Limitations

  • Multiple interaction actions can be triggered by the same event. The execution mode for these actions can be set to run in parallel (default) or run in order.

  • When the action execution mode is set to run in order, subsequent sub-actions do not run if a sub-action fails or opens a URL in the current page.

  • A component supports a maximum of 20 interaction actions, and a trigger event supports a maximum of 20 sub-actions.

Set device properties

When an event is triggered, this action sets the properties of the device associated with the component.

  1. Select a trigger event and choose the set device properties action.

  2. Click Configure Device.

  3. On the Set Device Properties page, configure the device information and click Save.

    Note

    Before you save the settings, you can click Validate to verify the configuration.

    Parameter

    Description

    Select Product

    Select the product to which the device associated with this component belongs.

    Select Device

    Select the device associated with this component.

    • Specify device: If a real device is connected to IoT Platform, select the real device. If the real device is not connected to IoT Platform and does not report data, use the device emulator to simulate data reporting online for data format validation. For more information, see Device emulator.

    • Dynamic device: You can select from four types of dynamic devices: page variables, component values, URL parameters, and data from interactive actions.

      • Page variable: Select a page variable that is created in the current application as the source of the dynamic device. For more information about how to create a page variable, see Manage page variables.

      • Component value: Select a configured form component in the current application as the source of the dynamic device.

      • URL parameter: Use a parameter on the final published page as the dynamic device for the service. This is often used for embedded pages where the host page provides dynamic parameters, such as using the incoming product model as the dynamic device for the service.

      • From interactive action: Use the pop-up window data source configured on the Interaction tab as the source of the dynamic device. For more information, see Open a pop-up container.

        Important

        • Only pop-up components support setting the dynamic device to From interactive action.

        • After you click Configure Data Source to open the Data Source Configuration pop-up window, you must set Device to Dynamic device.

    • Empty device: If you select this option, you can enter simulation data in the Device simulation data box to validate the data format.

    Select Property

    Select the property that corresponds to this component.

    Set Value

    Specifies a simulated value based on the value range of the selected device property.

    To configure a dynamic data source, click Parameter Source and select one of the following:

    Note

    IoT Studio supports only calls to Thing model data that is strictly validated. Data from the parameter source must match the Thing model definition of the property or service. For more information about Thing model data validation, see Validate Thing model data.

    • Component value: Select a configured form component in the current application as the parameter value source.

    • URL parameter: Specify the key of a parameter from the component page's final published URL. At runtime, the system automatically retrieves the value associated with this key from the page URL.

    • Page variable: Select an existing page variable in the current application as the parameter value source. For more information about how to create a page variable, see Manage page variables.

    To view the value range of a property, go to the Function Definition tab on the product details page.

Call a device service

When an event is triggered, this action calls a service from the product's Function Definition tab.

  1. Select a trigger event and choose the call a device service action.

  2. Click Configure Service.

  3. On the Call Device Service page, configure the device service and click Save.

    Note

    Before you save the settings, you can click Validate to verify the configuration.

    Parameter

    Description

    Select Product

    Select the product to which the device associated with this component belongs.

    Select Device

    Select the device associated with this component. For details, see the parameter description in the "Set device properties" section.

    Select Service

    Select the service for this component, and then set the relevant parameters. Services are sourced from the product's Function Definition tab.

Open a URL

When an event is triggered, this action opens the configured URL.

  1. Select a trigger event and choose the open a URL action.

  2. Click Select Link.

  3. In the dialog box that appears, configure the link and click OK.

    Parameter

    Description

    Link Opening Method

    Options:

    • Current Page: Opens the link in the current application page.

    • New Page: Opens the link in a new page.

    Target Link

    Options:

    • Current Application Page: Sets a page within the current application as the target link.

    • Specific Link: Sets an external link as the target. The URL must start with http:// or https://.

    URL Parameter

    Hover over the help icon next to URL Parameter to view instructions on how to configure URL key-value pairs.

    Click + URL Parameter to configure a Key and Value.

    The Value field supports dynamic parameters. Click Parameter Source and select a source type to configure.

    For detailed descriptions of component value, URL parameter, and page variable, see the parameter description in the "Set device properties" section.

    Logon account: If application account authentication is enabled, you can select the logon account information as request parameters when you configure Data Analysis Service, a custom API, or business logic development. This allows you to customize the UI or functionality. For more information, see Account data.

Refresh component

When an event is triggered, this action refreshes the component's data source.

Important

For control and form components, if the content or state that a user manually updates does not match the result returned by the component's data source, the displayed content or state is determined by the data source result.

  1. Select a trigger event and choose the refresh component action.

  2. Select the components to refresh. You can select multiple components.

Assign a value to a page variable

When an event is triggered, this action assigns a value to a page variable.

  1. Select a trigger event and choose the assign a value to a page variable action.

  2. (Optional) If the required page variable does not exist, click Manage Page Variables, click Add Page Variable, enter the page variable information, click Confirm, and then return to the Interaction tab.

  3. Click Configure.

  4. In the dialog box that appears, click Assign and select a page variable value for the component.

    You can select the corresponding value of the component or enter a custom fixed value.

  5. Select the page variable to which you want to assign the value and click OK.

Show or hide components

When an event is triggered, this action controls the visibility of other components.

  1. Select a trigger event and choose the show or hide action.

  2. Set the components to Show on Click and Hide on Click. You can select multiple components for each option.

Call other services

When an event is triggered, this action calls a custom API, an API from business logic development, or an API from product and thing management.

  1. Select a trigger event and choose the call other services action.

  2. Click Select Service.

  3. In the Service Configuration dialog box, configure the API to call.

    Parameter

    Description

    API Source

    Select the service to call.

    • Custom API: Call an open API developed by you or a third-party API.

      Important

      A custom API must meet the following requirements:

      • If you set request parameters, the data must be in JSON format.

      • The API response must be in JSON format.

      • Custom API calls time out after 10 seconds.

      Supported JSON data formats include:

      • Object: {}

      • Array: []

      • String: "test"

      • Number: 123

      • Boolean: true, false

    • Business logic development: Call an HTTP API that is created by using business logic development in the current project.

    • Product and thing management: Call APIs to query product information lists, query product properties, query thing detail lists, or query the count of things.

    Request Method

    Select the request method for the custom API: GET or POST.

    This parameter appears only when the API source is set to Custom API.

    Request URL

    Enter the request URL of your custom API.

    This parameter appears only when the API source is set to Custom API.

    Select API

    Select the API to call.

    This parameter appears only when the API source is set to business logic development or product and thing management.

    Request Parameters

    Options:

    • Static parameters: In the input box, enter the request parameters in valid JSON format.

    • Dynamic parameters: Add request parameters by setting a key and a value.

      The Value field supports dynamic parameters. Click Parameter Source and select from component value, URL parameter, page variable, or logon account. For a detailed description, see the parameter description in the "Open a URL" section.

Open a dialog box container

When an event is triggered, this action opens a dialog box container component.

  1. Select a trigger event and choose the open a dialog box container action.

  2. Select the dialog box container component to open.

  3. If the dialog box container component has a configured data source, click Configure Modal Data Source. In the Dialog Data Source Configuration panel, you can modify the component's configured data source, and then click OK.

    Note

    This data source can be modified only if the dialog box component's data source is configured as static data, an API from an interaction, or a dynamic device from an interaction. For more information, see Device, API, and Static data.

Previous：Account dataNext：Manage page variables