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

DataV:-グローバル変数の使用

最終更新日:Feb 07, 2025

このトピックでは、グローバル変数の使用方法について説明します。 グローバル変数を静的値として、非同期値を変数参照として、対話イベントパラメーター、またはフィルター参照として使用できます。

説明

グローバル変数機能は、7.0バージョンの新機能です。 新しいバージョンのコンソールに基づいて機能を使用できます。

前提条件

  • DataVコンソールにログインしました。

  • キャンバスエディターに入力

  • 2つのグローバル変数var_1var_2を作成

静的値として渡す

  1. [キャンバスエディター] ページで、[グローバル変数] タブをクリックします。

  2. [var_1] [変数] をクリックし、[ソース][静的値] に設定します。

  3. 初期値の内容をhelloに変更します。

  4. [データ応答結果] の横にあるimageアイコンを更新します。

  5. システムが応答したら、応答結果が変更されたcontent: helloであることを確認します。

非同期値を変数参照として渡す

  1. [キャンバスエディター] ページで、[グローバル変数] タブをクリックします。

  2. var_1 Variableをクリックし、初期値datav-helloに変更します。

  3. [var_2] [Variable] をクリックし、[Source][Data Source Request] に設定します。

    • データ型としてAPIを選択した場合、次の手順に従います。

      1. リクエストメソッドGETに、入力URLhttps://datav.com/:var_1 に設定します。

        説明

        URLは、データ型がアクセスできないAPIの場合、アナログURLです。 詳細については、実際のURLをご参照ください。

      2. キーボードのF12ファンクションキーを使用して、通話パネルを開きます。

      3. [ネットワーク] タブに切り替えます。

      4. [データ応答結果] の横にあるimageアイコンを更新します。

      5. [ネットワーク] タブの [名前] フィールドをもう一度チェックして、右側の [ヘッダー] タブの [リクエストURL]複数インターフェイスであるかどうかを確認します。 image

      6. var_1変数の設定値について、現在のインターフェイスペイロードタブのquery > api結果を確認します。 image

    • [Data Type] パラメーターを [Compatible with MySQL Database] に設定した場合、次の手順を実行します。

      1. [既存のデータソース] を選択します。 データソースを再作成することもできます。 詳細については、「データソース管理」をご参照ください。

      2. 次のSQL式を入力します。

        select var_1 as value
      3. 応答結果を表示するには、image[データ応答結果] の横にあるアイコンを更新します。

説明
  • [データソースタイプ] パラメーターが [静的データ] または [CSVファイル] に設定されている場合、グローバル変数はサポートされません。

  • ウィジェットのデータソースタイプがAPIの場合、コールバックIDと同じ名前の変数に値が直接割り当てられます。

  • DataVは、グローバル変数自動補完機能を提供します。 データソースを設定するときに、コロン (:) を入力します。 エディタは、現在の画面にすべての設定済み変数の名前を表示します。 上下矢印キーを使用してコールバックIDを選択し、Enterキーを押します。 画面に多数のインタラクティブコンポーネントがある場合、この機能を使用すると、グローバル変数をすばやく簡単に使用できます。

image

対話イベントパラメーターとして渡す

  1. [キャンバスエディター] ページの右上隅にある [クイック検索] をクリックします。

  2. キャンバスに2つのウィジェットを追加するには、[ボタン][タイトル] を入力します。 image

  3. [ボタン] ウィジェットを選択し、右側の [設定] パネルの [詳細設定] タブをクリックします。

  4. [インタラクションイベント] セクションの [ボタンのオン] スイッチをオンにします。

  5. [変数に更新] フィールドの [グローバル変数var_1] を選択します。 image

  6. Blueprint Editorページに移動します。 グローバル変数とButtonコンポーネントは点線で自動的に接続され、2つのグローバル変数間の参照関係が表示されます。

    説明

    グローバル変数の参照関係を削除すると、ブループリントの点線が自動的に削除されます。

    image

  7. 左側のナビゲーションウィンドウで、[レイヤーノード] タブをクリックします。 [一般タイトル] をブループリントにドラッグ&ドロップします。

  8. グローバル変数var_2は、実線として汎用ヘッダに接続されていることが分かる。 image

    説明

    実線は削除でき、破線は削除できません。

  9. 論理ノード論理の組み合わせを追加して、取得したデータを処理できます。

フィルター参照

説明

新しいDataVサービスのgetCallbackValueは、getLocalValue DataVサービスと同じです。 古いDataVサービスと互換性を持つために、getLocalValueは保持されます。 最初にgetCallbackValueを使用することを推奨します。

  1. [キャンバスエディター] ページの右上隅にある [クイック検索] をクリックします。

  2. キャンバスに2つのウィジェットを追加するには、[ボタン][タイトル] を入力します。 操作を繰り返して、ボタンと汎用タイトルコンポーネントを再度取得します。 image

  3. Buttonウィジェットをクリックし、ウィジェット名をgetLocalValueおよびgetCallbackValueに変更します。

  4. [共通タイトル] ウィジェットをクリックし、ウィジェット名を [共通タイトル-1] および [共通タイトル-2] に変更します。

  5. [グローバル変数] タブをクリックし、nametestという名前の2つのグローバル変数を追加します。 静的値を個別に設定します。

    • 名前変数

      [
        {
          "value": "The name variable is obtained. "
        }
      ]
    • テスト変数

      [
        {
          "value": "The test variable is obtained. "
        }
      ]
  6. 2つのボタンのテキストコンテンツをgetLocalValueでテストを取得およびgetCallBackValueで名前を取得に設定します。 image

  7. 左上隅のimageアイコンをクリックして、ブループリントエディタに移動します。

  8. コンポーネントを接続します。 image

  9. フィルタを追加し、シリアルデータ処理ノードの処理方法を設定します。

    • getLocalValue

      return getLocalValue('test');
    • getCallbackValue

      return getCallbackValue('name');
  10. ページの右上隅にある [プレビュー] をクリックして、データ取得の詳細を表示します。 回到哦_Trim

よくある質問

Q: キャンバス編集ページでグローバル変数を設定し、データクエリが失敗した後に戻り値を取得できない場合はどうすればよいですか?

A: キャンバス編集ページはイベントをトリガーして戻り値を取得できません。 したがって、リクエストは失敗します。 次のいずれかの方法を使用して、コールバック値を表示できます。

  • プロジェクトをプレビューします。 URLでコールバック値を表示するか、ブラウザーコンソールの [ネットワーク] タブをクリックして、レスポンスで値を取得します。

  • プロジェクトを編集します。 ビジュアルアプリケーションのURLの横にテストパラメーターを追加して、データをテストします。

    https://datav.aliyun.com/v/editor/216? parameter name=parameter value