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

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

    始める前に

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

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

    必要なロール:ui_builder_admin

    このタスクについて

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

    手順

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

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

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

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

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