Device

Prerequisites

You have added a component in the web application editor. For more information, see the component documents under Web visualization development > Components.

Procedure

1. On the canvas of the web visual editor, select the component to configure.

2. On the Style tab on the right, click the data source icon for the configuration item. In the Data Source Configuration panel, set the data source to Device and configure the parameters.

   For example, for a text widget, in the Style panel on the right, click the data source icon next to the Text Content input box, Component Visibility, or Color.

   Note

   For information about how to configure data sources for each component, see the component documents under Web visualization development > Components.

   Parameter	Description
   Select data source	Select Device.
   Product	Click Select Product. The Select Product panel displays the products that are associated with the project to which the current application belongs. If no products are available, click Product Management in the lower-left corner to go to the Products page of the project details to create or associate a product.
   Device	Select a data source device for the 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.
   Data item	The data item to use as the component's data source. The options are: Device property: Use a property value reported by the device as the component's data source. Device event: Use event data reported by the device as the component's data source. Some components do not support device event data items. Select a data item based on the component you are using.
   Property	Select a device property. Move the pointer over the tip icon on the right to view the data types that the component supports. For more information, see Add a single TSL model. This applies to specific style settings for Text (component visibility, color), Rectangle (component visibility, fill color), LED Indicator (component visibility, display data), and Image (component visibility) components. If you set the data source to Device for these settings and the property data type is numeric (integer, double-precision float, or single-precision float), you can use Convert integer to Boolean or Convert number to enumeration. Use these options to set the component's visibility and color based on the data value. This allows different values to display different colors. For more information about style configurations, see Text, Rectangle, LED indicator, and Image.
   Event	Select a specific device event. For more information, see Add a single TSL model.
   Device simulation data	Enter simulation data to validate the data format. This parameter appears when you set Device to Empty. After you push the simulation data, the component displays the corresponding result based on the data.

3. Validate the data format.

   Operation	Description
   Format reference	Click Format reference to view the data formats that the component supports.
   Validate data format	Click Validate data format to check if the current data format meets the component's requirements. If the format is valid, a "Validation successful" message appears. If not, a detailed error message is displayed.

   Important

   IoT Studio currently supports only Thing Specification Language (TSL) model data that is strongly validated. When a component is associated with a device property, it can only display data that meets the property's TSL model definition. For more information about TSL model data validation, see Validate TSL model data.