DataV:タブリスト

コンポーネントの概要

タブリストは複数のタブで構成されており、他のウィジェットと連携するようにインタラクティブな設定で構成できます。 これにより、関連情報をタブにグループ化して、異なるビューまたは機能を簡単に切り替えることができます。

シナリオ

タブリストは、情報の整理、コンテンツの分類、データの提示に最適で、必要な情報にすばやくアクセスできます。 例は次のとおりです。

• 情報組織: 「個人情報」や「アカウント設定」などのタブで関連するコンテンツをグループ化します。

• コンテンツ分類: タブを使用して、eコマースプラットフォームの「電子機器」や「家庭用品」などのコンテンツカテゴリを区別します。

• データの表示: タブを使用して、「地域の小学校」や「地域の高校」など、さまざまなデータビューを表示します。

エフェクト表示

例としては、タブリスト内のさまざまなタブの下に表示されるさまざまなチャートがあります。

前提条件

• テンプレート、空白のキャンバスを使用した作成をサポートするデータダッシュボードが利用可能です。

  .

• ビジネスデータはすぐに使用できます。 詳細については、「データソース」をご参照ください。

タブリストの追加

1. DataVコンソールにアクセスします。

2. [ワークベンチ] > [すべてのアプリケーション] > [データダッシュボード] に移動し、目的のダッシュボードを選択し、キャンバス編集ページに移動します。

3. 左側のナビゲーションウィンドウで、[ウィジェットライブラリ] > [コントロール] > [すべて] リストの下にある [タブリスト] を選択してウィジェットをキャンバスに追加します。

   説明

   プラットフォームには、すぐに使用できる複数の組み込みタブリストスタイル (クイックスタイル) があります。 必要に応じて、ウィジェットのアイコンにカーソルを合わせて選択します。 これらのスタイルが要件を満たしていない場合は、追加後にウィジェットのスタイルをカスタマイズできます。 詳細については、「スタイル設定」をご参照ください。

グローバル検索を使用して、関連するウィジェットを追加することもできます。

ビジネスデータの統合

ウィジェットを追加したら、準備したビジネスデータを統合して表示できます。 タブリストをクリックし、右側の [データソース] タブで、表示するウィジェットのデータを選択します。

• タブリストによって受け入れられるデータフィールドの概要を以下に示します。

  項目	説明
  id	タブリスト内のタブのID。 スタイルパネルの [一般] > [初期選択] 設定項目では、ウィジェットの初期化時に選択するタブを定義するために、この変数値が必要です。
  コンテンツ	タブリスト内のタブの名前。
  imgSrc	タブリスト内のタブのアイコンのURLアドレス。 ここでアイコンを設定したら、スタイルパネルの [一般] > [アイコン] セクションで画像のサイズ、位置、その他の情報を変更できます。

  以下は、データ構造とタブリストのサンプル表示です。

  [
    {
      "id": 1,
      "content": "Sales Data",
      "imgSrc": "&#xe8fc"
    },
    {
      "id": 2,
      "content": "Customer Data",
      "imgSrc": "&#xe7b1"
    },
    {
      "id": 3,
      "content": "Market Data",
      "imgSrc": "&#xe7b1"
    },
    {
      "id": 4,
      "content": "Production Data",
      "imgSrc": "&#xe7b1"
    }
  ]

  

• データソースの主要な構成項目については、以下で詳しく説明します。

  設定アイテム	説明
  データソースの設定	タブリストは、CSVファイル、API、データベースなどのさまざまな種類のデータの統合をサポートしています。 詳細については、「サポートされているデータソースの種類」をご参照ください。 ビジュアルテーブルまたはコードを使用してデータフィールドを編集できます。
  フィルターの設定 (オプション)	データ構造変換、フィルタリング、表示、および簡単な計算のためのフィルタコードをカスタマイズするために使用されます。 詳細については、「データフィルターの管理」をご参照ください。
  データマッピングの設定	選択したデータソースのフィールドをウィジェットの対応するフィールドにマッピングし、リアルタイムのデータマッチングを実現します。 アイコンをクリックして、フィールドスタイルを設定します。
  レスポンス結果の表示	ウィジェットに統合されたデータをリアルタイムで表示するために使用されます。 ウィジェットのデータソースが変更されると、最新のデータがここに表示されます。 データ応答結果をクリックして、データフィールドのコードを表示します。 [例の表示] をクリックして、データソースが受信した配列タイプとコード例を表示します。 この例を参照して、関連フィールドを記述できます。 その他のデータ要求設定: 読み込み状態を無効にする: を選択すると、ウィジェットの初期化中の読み込みコンテンツは、ウィジェットの更新時またはデータダッシュボードのプレビュー時に表示されません。 制御モード: 選択すると、ウィジェットは初期化状態のデータを要求しません。 現時点では、データ要求は、ブループリントエディタまたはグローバル変数イベントを介してのみ開始できます。 自動更新リクエスト: 選択すると、プラットフォームは設定したポーリング時間に基づいてデータを動的にポーリングおよび更新します。 選択しない場合は、手動でページを更新するか、ブループリントエディターとグローバル変数イベントを使用してリクエストの更新をトリガーする必要があります。

タブリストの設定

タブリストウィジェットを設定するには、タブリストウィジェットをクリックし、右側のパネルを使用して、基本スタイル、グローバル変数、インタラクションの発生、詳細設定、およびブループリントのインタラクション設定を設定します。

{
  "id": "1",
  "content": "Tab 1"
}

[
  {
    "id": "1",
    "content": "Tab 1",
    "imgSrc": "https://img.alicdn.com/imgextra/i3/O1CN016hZVyj29jgY7SqaJn_!!6000000008104-55-tps-200-200.svg"
  }
]

{
  "id": "1"
}

{
  "duration": 2000  // Carousel duration in ms
}

    {
      // Movement type. Absolute positioning: to, relative positioning: by. Default value: to.
        "positionType": "to",
      // Specified position. x-coordinate, y-coordinate.
      "attr": {
        "x": 0,
        "y": 0
      },
      // Animation settings.
      "animation": {
        "enable": false,
        // Animation delay.
        "animationDuration": 1000,
        // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

ケースデモンストレーション

このケースでは、タブリスト内のカルーセルとグループの表示を制御することにより、ウィジェットの動的効果を示します。

1. DataVコンソールにアクセスします。

2. データダッシュボードを選択し、[編集] をクリックして、キャンバスエディターページに移動します。

3. 列グラフ、折れ線グラフ、進行状況ドーナツグラフ、および2つのタブリストウィジェットをキャンバスに追加します。

4. 縦棒グラフ、折れ線グラフ、およびドーナツグラフをグループ化し、カルーセルコンテナのトリガーモードをイベントトリガーに設定します。

5. タブリストウィジェットを選択し、データソースパネルにアクセスし、静的データを変更し、名前を [表示 /非表示] に同期します。

   [
     {
       "id": 1,
       "content": "Show"
     },
     {
       "id": 2,
       "content": "Hide"
     }
   ]

6. 他のタブリストの名前をカルーセル制御に変更します。

7. 左上隅のアイコンをクリックしてブループリントページに入ります。

8. [レイヤーノード] タブで、カルーセルコンテナ、表示 /非表示、およびカルーセルコントロールをメインキャンバスに追加します。

9. [ロジックノード] タブで、シリアルデータ処理ノードと2つの条件判定ノードをメインキャンバスに追加します。

10. 図のようにウィジェットを接続します。

11. 処理方法を設定します。

    • 表示

      return data.id == 1;

    • 非表示

      return data.id == 2;

    • シリアルデータ処理

      return {
        index: data.id - 1
      };

12. ページの右上隅にある [プレビュー] をクリックして、表示結果をプレビューします。