でのテクニカルダッシュボードの作成 UI ビルダー

  • リリースバージョン: Xanadu
  • 更新日 2024年08月01日
  • 所要時間:3分
  • テクニカルエディターオプションに従って、 UI ビルダーを使用してダッシュボードを作成します。UI ビルダーでは、スクリプティングやデータバインディングなど、インラインエディターよりも幅広い機能を使用できます。

    始める前に

    UI ビルダーでダッシュボードを作成することは、開発者にお勧めします。詳細については、「UI Builder」を参照してください。

    テクニカルエディターでダッシュボードを作成する場合、 アナリティクスセンター でダッシュボードの詳細を編集することはできません。ただし、 アナリティクスセンターからテクニカルダッシュボードを共有することはできます。
    注:
    テーブルデータに基づくデータの可視化は、ダッシュボードを共有しているユーザーと自動的に共有されます。

    必要なロール:ui_builder_admin

    このタスクについて

    テクニカルエディターを使用すると、任意の UI ビルダー コンポーネントをダッシュボードに追加できます。データリソース、クライアントスクリプト、構成プロパティのデータバインディングなど、他のすべての UI ビルダー 機能を使用することもできます。テクニカルエディターは、Advanced Dashboards という名前の特別なワークスペースにダッシュボードを作成します。このワークスペースは、 UI ビルダーの [My Experiences] で使用できます。

    手順

    1. 移動先 すべて > プラットフォームアナリティクス > Library (ライブラリ) > ダッシュボード.
    2. [Create new dashboard (新規ダッシュボードを作成)] を選択します。
    3. [Technical editor] を選択します。
      新しいインラインダッシュボードモーダルを作成
      警告:
      UI ビルダーの詳細ダッシュボードエクスペリエンスでダッシュボードを直接作成しないでください。実行時には常にプラットフォームアナリティクスライブラリから開始します。ライブラリでテクニカルダッシュボードを開始すると、par_dashboardsテーブルに自動的に接続され、ダッシュボードの概要コンポーネントに一覧表示されます。
    4. 作成するダッシュボードの名前と説明を入力し、[ Create new dashboard (新しいダッシュボードの作成)] を選択します。
      [Technical editor] オプションを選択すると、空のダッシュボードが開きます。
    5. UI ビルダーで [Edit (編集)] を選択します。
    6. コンテンツツリービューで、レイアウトまたはコンテナコンポーネントを追加します。
      コンテナには、データの可視化、静的テキストボックス、画像などのダッシュボードコンポーネントが格納されます。タブ付きダッシュボードを作成する場合は、親タブコンポーネントの下に各タブをコンテナとして作成できます。詳細については、開発者サイトタブコンポーネントリファレンスを参照してください。
    7. UI ビルダー右側の [スタイル] タブで、レイアウトを選択します。

      レイアウトは、コンテナのコンテンツをパターンで整理します。

      • [ グリッド ] を選択して、選択したコンテナの行数と列数を指定します。詳細については、「Using CSS Grid layouts to build a page」を参照してください。
      • コンテナ間のレイアウトの柔軟性を高めるには、 Flexbox を選択します。詳細については、「Using Flexbox layouts in UI Builder」を参照してください。
    8. コンテナにコンポーネントを追加します。
      左側の [コンポーネント ] メニューから選択するか、ステージング領域の [コンテンツを追加] (+) アイコンをクリックします。

      右側の [構成 ] パネルでは、選択したコンポーネントを構成できます。

      UI ビルダーのコンポーネントメニュー。
    9. オプション: コンテナー、コンポーネント、および構成をさらに追加します。
    10. データビジュアル化コンポーネントを追加し、ビューアーがそのコンポーネントからより詳細なデータビューにドリルダウンできるようにする場合は、 テクニカルダッシュボードのデータ可視化へのドリルダウンイベントの追加の指示に従ってください。
    11. [ 保存 ] をクリックすると、いつでもダッシュボードに加えた変更を保存できます。