Custom development component blueprint description - DataV

Prerequisites

This topic requires the desktop version of the development tool. For more information, see the desktop version of the development tool instructions.

Background information

This document is relevant for users developing custom components. To integrate custom components with the features of DataV's blueprint editor, developers must adhere to the editor's rules. Upon creating the component with the developer tool, an index.js file and a package.json file are generated in the local component package folder. Modifying these files is necessary to implement the operation.

Event trigger

To implement the event trigger feature in custom components, use the Current Value Change event from the ticker board component as an example.

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

Implement the Import Data Interface action in custom components, taking the ticker board component's Import Data Interface action as an example.

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

Implement multiple interactive actions in custom components, using the Show and Hide actions from the ticker board component as examples.

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
```