Configure events data interfaces and actions for custom components in the Blueprint Editor - DataV - Alibaba Cloud - DataV

Prerequisites

The desktop version of the development tool is required. For more information, see the desktop version of the development tool instructions.

Background information

To enable custom components to work with the DataV blueprint editor, you must follow the editor's development rules. After you create a component with the developer tool, an index.js file and a package.json file are generated in the local component package folder. You need to modify these files to implement blueprint editor integration.

Event trigger

The following example uses the Current Value Change event of the ticker board component to demonstrate event trigger implementation.

Open the package.json file after creating the component with the developer tool.
Locate the events field within the datav field in the package.json file.

Important
Ensure each event in the blueprint editor matches the event specified in the custom component's events field; otherwise, the editor will not detect it.
Define events in the current events field, customizing the description for the event-name and the value field name.

Note
You can customize both event and field names with multiple entries, enhancing the variety of events displayed on the blueprint editor node page.
Open the index.js file and configure the event name for the emit method.
```
this.emit('event-name', obj); 
```
Note
The event name used in emit must match the one in the package.json file. Pass parameters as an object type, and include multiple fields if necessary.

Import data interface

The following example uses the ticker board component's Import Data Interface action to demonstrate how to implement the Import Data Interface action in custom components.

Open the index.js file after creating the component with the developer tool.
Find the render field within the datav field in the index.js file.
Customize the action code logic for the Import Data Interface within the render field.

Note
You can customize action logic with multiple entries, which increases the variety of actions available on the blueprint editor node page.

Add interactive actions

The following example uses the Show and Hide actions of the ticker board component to demonstrate how to add interactive actions.

Open the package.json file after creating the component with the developer tool.
Search for the publicHandler field within the datav field in the package.json file.
Customize the descriptions for Show and Hide within the publicHandler field, ensuring they align with the method names in the index.js file.

Note
Customize action logic with multiple entries to expand the range of actions displayed on the blueprint editor node page.
Set the content of container in the index.js file.

Note
Field names in container must correspond with those in the package.json file.
```
this.container.show(); // Show code, developer customizes
this.container.hide(); // Hide code, developer customizes
```