Data interface configuration

Switch modes

At the top of the dialog box, you can switch between View Mode and Code Mode.

Example of the Code Mode panel

Mode	Description
View Mode	In View Mode, visually inspect the style of the sample data interface and customize its content based on the sample style without writing code.
Code Mode	In Code Mode, write custom code for the data interface based on the sample interface code. Use this method to add or configure the data interface content. Note For more information about data interface code specifications, see Widget developer guide.

Configure data interfaces

On the Data Interface Settings tab, a sample data interface is provided by default. You can customize the data interface by performing the following operations.

Operation	Description
Expand the data interface details list	Click the icon to the right of the sample data interface to expand its configuration details.
Edit basic information of the data interface	Each data interface contains multiple parameters. You can customize the following basic information parameters for the data interface. Name: The name of the data interface. Display Name: The external display name of the data interface. After you confirm the change, press Enter. The result is immediately displayed in the configuration panel. Description: The description of the data interface. Data Type: Select a data type for the data interface. Options include Object, Array, Any, and None.
Delete a data interface	Click the icon to the right of the data interface to delete it.
Add a data interface	On the Data Interface Settings tab, click Add Data Interface to add a new data interface to the configuration area. Note You can add or edit multiple data interfaces for the block.

Configure data fields

On the Data Interface Settings tab, a sample data field is added by default. You can customize the data field by performing the following operations.

Operation	Description
Edit basic information of the field	Each data field contains multiple parameters. You can customize the following field parameters. Field Name: The English name of the data field. The field name must consist of English characters and serves as the key value when passing parameters. Chinese Name: The Chinese name of the field. The name must be 10 characters or less and is used to explain the meaning of the field. Description: A detailed description of the field. The description must be 25 characters or less. Type: Select a type for the field. Options include String, Number, Object, Array, Boolean, and Binary.
Add a field	Click the icon to the right of the field row and select Add Sibling to add a new field row.
Adjust field position	If you have multiple field rows, you can click the icon on the far left of a row and drag it to adjust its vertical order.
Delete a field	Click the icon to the right of the field row to delete the field. Note If you delete all fields, you can click Add Field to add a new field row.
Configure default data for a field	You can configure default data for a field to use as sample data.

View and use data interfaces in a visualization application

After you configure a data interface in the block editor, you can view the data interface information for the block in the canvas editor. To configure and view the interface information in a visualization application, perform the following steps.

1. In the block editor, preview and test the configured data interface. After testing is complete, publish the block. For more information, see Preview a block and Publish a block.
2. Switch to the My Visualizations page in the console. Hover over a visualization application and click Edit to enter the canvas editor.
3. Click the icon to expand the All Assets list and select the Blocks module. The list displays all published blocks.
4. Click the desired block to add it to the canvas editor.
5. Select the block on the canvas. In the configuration panel on the right, select the Data tab to view the configuration information of the block's data interface. You can also modify the block's data. For more information, see Configure asset data and Set an asset data source.

Real-time preview of the data interface configuration

On the Data Interface Settings tab, the dialog box is split into two areas. The left area is for customizing the data interface, and the right area provides a real-time preview. Any changes you make on the left are immediately displayed in the preview area on the right, allowing you to easily view the configured data interface.