IoT twin-IoT Studio(IoT Studio)-阿里云帮助中心

The IoT twin component displays an IoT Twin Engine scene page in a web application. This topic describes how to configure the IoT twin component.

Step 1: Add the component

Create a web application. For more information, see Create a web application.
In the web application editor, click the component icon on the far left.
Above the component list on the left side of the canvas, enter IoT twin to find the component, then drag it to the center of the canvas.

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

After you add the component, the prompt "Please configure 'associated link'" appears on the canvas. To configure the component, click the Configure button under associated link in the properties panel on the right.

Step 2: Configure the data source

In the Style panel on the right, click Configure for associated link.
In the Configure Link panel, enter the shared link to the IoT Twin Engine scene page in the Link Content input box.

For more information about IoT Twin Engine scenes, see Share a scene.

Step 3: Configure the style

In the Style panel on the right, choose whether to show the component border.

If you choose to display a border, you can set its weight, color, and style. The supported data formats vary by configuration item. The data returned from the data source must match the required format.

Parameter	Format	Data sources
Weight	An integer. Valid values: 0–1000.	device, API, application push
Color	A JSON object for an RGB color. `{ "r": 255, "g": 255, "b": 255 }` Or `{ "r": 255, "g": 255, "b": 255, "a":0 }` Note The `a` parameter represents the alpha value (transparency). Valid values: 0–100.	API, application push
Style	An integer. Valid values: 0–2. The values map to the line styles as follows (in the same order as in the dropdown list): Solid: 0 Dashed: 1 Dotted: 2	device, API, application push, page variable

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

Step 4: Configure interactive actions

Select the Interaction tab for the component to configure events and interactive actions. For more information, see Interaction configuration.

For example, after the IoT twin page loads, you can configure the Call Other Service action to call a service API to retrieve data.
Click Preview in the upper-right corner of the page to preview and debug the component's data and effects.