すべてのプロダクト
Search
ドキュメントセンター

DataV:カスタム開発コンポーネントのブループリントの説明

最終更新日:Feb 07, 2025

前提条件

このトピックでは、開発ツールのデスクトップバージョンが必要です。 詳細については、「デスクトップ版の開発ツールの説明書」をご参照ください。

背景情報

このドキュメントは、カスタムコンポーネントを開発するユーザーに関連します。 カスタムコンポーネントをDataVのブループリントエディタの機能と統合するには、開発者はエディタのルールに従う必要があります。 開発者ツールを使用してコンポーネントを作成すると、ローカルコンポーネントパッケージフォルダにindex.jsファイルとpackage.jsonファイルが生成されます。 操作を実装するには、これらのファイルを変更する必要があります。

イベントトリガー

カスタムコンポーネントにイベントトリガー機能を実装するには、例としてティッカーボードコンポーネントの [現在の値の変更] イベントを使用します。 image.png

  1. 開発者ツールでコンポーネントを作成した後、package.jsonファイルを開きます。

  2. package.jsonファイルのdatavフィールド内のeventsフィールドを見つけます。

    重要

    ブループリントエディターの各イベントが、カスタムコンポーネントのイベントフィールドで指定されたイベントと一致することを確認します。

  3. 現在のイベントフィールドでイベントを定義し、イベント名と値フィールド名の説明をカスタマイズします。 事件触发文件内容修改

    説明

    イベント名とフィールド名の両方を複数のエントリでカスタマイズして、ブループリントエディタのノードページに表示されるさまざまなイベントを強化できます。

  4. index.jsファイルを開き、emitメソッドのイベント名を設定します。

    this.emit('event-name', obj); 
    説明

    emitで使用されるイベント名は、package.jsonファイルのイベント名と一致する必要があります。 パラメーターをオブジェクト型として渡し、必要に応じて複数のフィールドを含めます。

データインタフェースのインポート

ティッカーボードコンポーネントの [データインターフェイスのインポート] アクションを例に、カスタムコンポーネントに [データインターフェイスのインポート] アクションを実装します。 image.png

  1. 開発者ツールでコンポーネントを作成した後、index.jsファイルを開きます。

  2. index.jsファイルのdatavフィールド内のrenderフィールドを見つけます。

  3. renderフィールド内のImport Data Interfaceのアクションコードロジックをカスタマイズします。 导入数据接口代码逻辑

    説明

    複数のエントリでアクションロジックをカスタマイズできます。これにより、ブループリントエディタのノードページで使用できるさまざまなアクションが増えます。

インタラクティブアクションの追加

例として、ティッカーボードコンポーネントの [表示] および [非表示] アクションを使用して、カスタムコンポーネントに複数のインタラクティブアクションを実装します。 image.png

  1. 開発者ツールでコンポーネントを作成した後、package.jsonファイルを開きます。

  2. package.jsonファイルのdatavフィールド内のpublicHandlerフィールドを検索します。

  3. publicHandlerフィールド内の [表示] および [非表示] の説明をカスタマイズし、index.jsファイルのメソッド名と一致するようにします。  隐藏显示动作自定义

    説明

    複数のエントリを持つアクションロジックをカスタマイズして、ブループリントエディタのノードページに表示されるアクションの範囲を広げます。

  4. index.jsファイルのcontainerの内容を設定します。 显示隐藏动作字段名

    説明

    containerのフィールド名は、package.jsonファイルのフィールド名と一致する必要があります。

    this.container.show(); // Show code, developer customizes
    this.container.hide(); // Hide code, developer customizes