Using block interfaces-DataV(DataV)-阿里云帮助中心

This topic describes how to configure data, event, and action interfaces for a block and use the blueprint editor to transfer data into and out of the block.

Background information

This topic uses the block requirements defined in Block example to demonstrate how to configure and use block interfaces in the block editor.

Configure block interfaces in the block editor

Create a block. For more information, see Create a blank block.
Click the new blank block to open the block editor.
In the block editor, add the list carousel, ECharts rose chart, and vertical capsule column chart widgets.
Select all three widgets. Right-click the selection and choose Export to Blueprint Editor.
Click the icon in the upper-right corner of the block editor. On the Data Interface Settings tab, configure the data interface as shown in the following figure. For more information about how to configure data interfaces in a block, see Data interface configuration.
Click the icon in the upper-right corner of the block editor. On the Event Settings tab, configure the event interface as shown in the following figure. For more information about how to configure event interfaces in a block, see Event interface configuration.
Click the icon in the upper-right corner of the block editor. On the Action Settings tab, configure the action interface as shown in the following figure. For more information about how to configure action interfaces in a block, see Action interface configuration.
After you configure the interfaces for the block, click the icon in the upper-left corner of the block editor to open the blueprint editor.
Drag the three block interfaces to the blueprint editor canvas. Each block interface corresponds to the content that you defined in the previous steps.
Connect the block interface nodes to the corresponding widget nodes in the blueprint editor to configure the required business logic. The business logic for this example is shown in the following figure. For more information about how to configure blueprint connections, see Features.

Configure block interfaces in the canvas editor

In the block editor, after you configure the interfaces and internal blueprint logic for the example block, preview and test the interfaces. If the tests are successful, publish the block. For more information, see Preview a block and Publish a block.
Go to the My Visualizations page in the console. Click a visualization application to open the canvas editor.
Click Asset List to open the All Assets list. Select the Block module. The block list shows all published blocks.
On the canvas editor page, click the icon in the upper-left corner to expand the All Assets area.
In the All Assets area, click Block in the navigation pane on the left. The list shows all published blocks. Click the example block to add it to the canvas editor.
Click the block on the canvas. In the configuration panel on the right, select the Data tab. The Data tab displays all configuration information for the block's data interface. You can modify the data content of the block on this tab. For more information, see Configure asset data and Set an asset data source.
Click the Interaction tab. The Interaction tab displays all configuration information for the block's event interface. You can modify the block's interaction events on this tab. For more information, see How to configure the callback ID for a ticker board widget.
On the canvas, select the target block. Right-click the block and choose Export to Blueprint Editor.
Click the icon in the upper-left corner of the canvas editor to open the blueprint editor.
Drag the example block node to the blueprint editor canvas to view all of the block's event and action interfaces. Other widgets can call these interfaces. To do this, connect the nodes and configure the logic in the blueprint editor. For more information, see Features.