UI ビルダーページにタブ付きコンテンツを追加

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：9分

    • タブコンポーネントを使用して、UI ビルダー のページにタブ付きコンテンツを追加します。

    ページに [タブ] コンポーネントを追加して、UI ビルダー ページに追加のナビゲーションを作成します。タブコンポーネントを使用して、ページ上のタブ内でコンポーネントをネストします。タブは、コンテンツの上部の水平タブとして、またはコンテンツの左側か右側の垂直タブとして構成できます。
    図 : 1. タブコンポーネントの例
    UI ビルダーのページプレビューで選択されているタブ。

    タブは構成パネルで整理して、UI ビルダー ページでの表示順序を並べ替えることができます。カスタムラベルとアイコンをタブに追加して、タブ間を移動するための一意の視覚的識別子を提供します。これらの変更は、[タブ] コンポーネントの編集時にリアルタイムで表示できます。

    次のいずれかのタイプのタブを UI ビルダー ページに追加できます。
    • 空のコンテナタブ
    • リピータータブ
    • 関連リストタブ
    • ページコレクションタブ

    タブコンポーネントは、静的なタブ、リピーターのタブ、関連リストのタブ、およびページコレクションのタブの任意の組み合わせをサポートします。さらに、ビューポートタブモードを使用して一連のビューポートを追加することもできます。

    空のコンテナタブの追加

    空のコンテナタブを使用して、ページ上に静的なタブのセットを手動で作成します。

    始める前に

    必要なロール：admin

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページまたはページバリアントを開くかまたは作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
    4. ステージ上の [+ コンテンツを追加] ボタンを選択してツールボックスを開きます。
      ツールボックスを開く [+] アイコンを指す矢印。
    5. 1 列のレイアウトを選択します。
    6. 次に、列の [+] アイコンを選択してツールボックスを開きます。
    7. タブコンポーネントをページに追加します。
      ツールボックスのタブコンポーネントを指す矢印

      コンポーネントをページに追加する方法の詳細については、「コンポーネントの追加と構成」を参照してください。

    8. ステージで [+ タブを追加] を選択します。
      構成パネルのタブ [+ 追加] オプションを指す矢印
    9. [空のコンテナから開始] を選択します。
      [空のコンテナから開始] オプションが選択された状態
    10. [次へ] を選択します。
    11. フォームのフィールドに入力します。
      表 : 1. タブの設定フォーム
      フィールド 説明
      タブラベル ページに表示するタブのラベル。
      アイコン タブラベルの横に表示されるアイコン。アイコンは必須ではありません。
      タブを非表示 タブを表示するか非表示にするか。
    12. [作成] を選択します。
      新しいタブがタブコンポーネントに表示されます。
    13. 新しいタブを選択します。
    14. [+] アイコンを選択します。
      [デモ] タブにコンポーネントを追加するための [+] アイコンを指す矢印。
    15. タブに追加するコンポーネントを選択します。
      コンポーネントは、コンテンツツリーでネストされているタブの下に表示されます。詳細については、「コンポーネントの追加と構成」を参照してください。

    タスクの結果

    ページには、作成した 2 つのタブが表示されます。各タブを選択して、さらに構成したり、スタイリングを追加したり、イベントハンドラーを追加したりします。スタイリングの詳細については、「コンポーネントのデフォルトの外観を変更する」を参照してください。イベントハンドラーの追加の詳細については、「「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」」を参照してください。

    リピータータブの追加

    タブコンポーネントを使用して、タブをデータアレイにリンクして、一連のリピータータブを作成します。

    始める前に

    必要なロール：admin

    このタスクについて

    リピータータブを使用して、指定したデータアレイに基づいて複数のタブを作成できます。オブジェクトのキーとして、アイコン、ラベル、カウント、およびフィールドを渡すことができます。ラベルキーを使用して、タブに名前を追加します。フィールドキーを使用して、情報をリピータータブに渡します。データブローカー、クライアントステータス、またはクライアントスクリプトをデータアレイプロバイダーにバインドして、正しいスキーマを持つオブジェクトのアレイを返すことができます。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページまたはページバリアントを開くかまたは作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
    4. ステージ上の [+ コンテンツを追加] ボタンを選択してツールボックスを開きます。
      ツールボックスを開くステージの [+] を指す矢印。
    5. 1 列のレイアウトを選択します。
    6. 次に、列の [+] アイコンを選択してツールボックスを開きます。
    7. タブコンポーネントをページに追加します。
      ツールボックスのタブコンポーネントを指す矢印

      コンポーネントをページに追加する方法の詳細については、「コンポーネントの追加と構成」を参照してください。

    8. ステージで [+ タブを追加] を選択します。
      構成パネルの [+ 追加] オプションを指す矢印
    9. [リピーターを使用] を選択します。
      タブ選択モーダルで選択されたリピーターを使用します。
    10. [次へ] を選択します。
    11. [プレースホルダータブラベル] フィールドにリピータータブのラベルを入力します。
      このラベルは最初のリピータータブにアサインされ、ページプレビューに表示される唯一のタブです。
    12. [データ配列] フィールドで [編集] を選択します。
      データアレイ編集モーダルを開きます。
    13. JSON エディターでデータアレイを構成します。
      キー データタイプ 説明
      アイコン 文字列 UI ビルダー に表示されるアイコンの名前。
      ラベル 文字列 必須。UI ビルダー でのタブの表示名。
      カウント 番号 タブラベルに指定する値。ラベルに表示されるデータブローカーまたはクライアントスクリプトに動的にバインドします。
      フィールド オブジェクト 情報を格納し、タブ内のコンポーネントに渡すために使用できるオブジェクト。
    14. [適用] を選択します。
      データアレイフィールドには、データアレイの構成が表示されます。

      カスタムデータアレイがあるリピーター設定。

    15. [作成] を選択します。
      新しいリピータータブが、ページとコンテンツツリーに表示されます。

      ページで強調表示されたプレースホルダーリピータータブ。

    16. [保存] を選択します。
    17. コンポーネントを [リピーター] タブに追加します。
    18. [プレビュー] ボタンを選択してページをランタイムで開きます。これは、ページが Web ページでどのように表示されるかを示すプレビューで、ページで [リピーター] タブが正しく表示されることを確認できます。

    ページコレクションタブの追加

    [ページコレクション] タブを使用して、UI ビルダー の複数のページで同じタブを再作成します。

    始める前に

    必要なロール：admin

    このタスクについて

    ページコレクションは、ビルド済みの、グローバルに利用可能なページのグループです。ページコレクションタブを使用して、ページコレクション内の各ページをタブとして表示します。既存のページコレクションを選択することも、独自のページコレクションを作成することもできます。ページコレクションを追加するには、コントローラーが必要です。ページコレクションの詳細については、「ページコレクション」を参照してください。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. ページまたはページバリアントを開くかまたは作成します。
      UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
    4. ステージ上の [+ コンテンツを追加] ボタンを選択してツールボックスを開きます。
      ツールボックスを開くステージの [+] を指す矢印。
    5. 1 列のレイアウトを選択します。
    6. 次に、列の [+] アイコンを選択してツールボックスを開きます。
    7. タブコンポーネントをページに追加します。
      ツールボックスのタブコンポーネントを指す矢印

      コンポーネントをページに追加する方法の詳細については、「コンポーネントの追加と構成」を参照してください。

    8. ステージで [+ タブを追加] を選択します。
      構成パネルの [+ 追加] オプションを指す矢印
    9. [ページコレクションを追加] を選択します。
      [ページコレクションを追加] オプションがハイライト表示されたタブ選択モーダル
    10. [次へ] を選択します。
    11. リストからページコレクションを選択するか、[+ コレクションを作成] を選択してコレクションを作成します。
      独自のページコレクションを作成するには、「複数の UI ページにわたるページコレクションの作成」を参照してください。

      コレクションを作成するオプションがあるページコレクション選択画面。

    12. [追加] を選択します。
      新しいページコレクションが構成パネルの [タブ] セクションに表示されます。1 つのプレースホルダータブのみがページプレビューに表示されます。

      ページ上でハイライト表示されたページコレクションタブ

    13. [保存] を選択します。
    14. ページバリアントを開く [プレビュー] ボタンを選択し、ページを表示してテストします。