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

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

ページに [タブ] コンポーネントを追加して、UI ビルダー ページに追加のナビゲーションを作成します。タブコンポーネントを使用して、ページ上のタブ内でコンポーネントをネストします。タブは、コンテンツの上部の水平タブとして、またはコンテンツの左側か右側の垂直タブとして構成できます。

図 : 1. タブコンポーネントの例

タブは構成パネルで整理して、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 つのタブが表示されます。各タブを選択して、さらに構成したり、スタイリングを追加したり、イベントハンドラーを追加したりします。スタイリングの詳細については、「コンポーネントのデフォルトの外観を変更する」を参照してください。イベントハンドラーの追加の詳細については、「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. 

関連リストタブの追加

関連リストにリンクすることで、ページ上に一連のタブを作成します。

始める前に

必要なロール：admin

このタスクについて

関連リストタブは、ページに表示されているレコードに基づいて自動的に入力されます。たとえば、デフォルトでは、ユーザーテーブルの関連リストは、[ロール]、[グループ]、[代理人]、および [ヴィジビリティドメイン] です。ページにユーザーレコードが表示されている場合、関連リストタブを作成すると、これらの 4 つの関連リストがすべてページに追加されます。ページをプレビューすると、追加された関連リストを確認できます。関連リストタブを作成するには、レコードコントローラーが必要です。コントローラーをページに追加する方法の詳細については、「コントローラーを使用した UI ビルダー ページへのデータのバインド (高度な機能)」を参照してください。

手順

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

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

8. ステージで [+ タブを追加] を選択します。
   
9. [レコードの関連リストを表示] を選択します。
   
10. [次へ] を選択します。
11. フォームのフィールドに入力します。

    表 : 2. タブの設定フォーム

    フィールド	説明
    プレースホルダータブラベル	ページのプレビュータブに表示されるプレースホルダーラベル。
    タブを非表示	タブを表示するか非表示にするかを指定します。
    レコードコントローラー	関連リストがあるレコードコントローラー。

12. [作成] を選択します。
    新しい関連リストタブが、構成パネルの [タブ] セクションに表示されます。1 つのプレースホルダータブのみがページプレビューに表示されます。コンテンツツリーの関連リストタブの横にある緑色のアイコンは、ページに表示されるタブの数を示します。

    

13. [保存] を選択します。
14. [プレビュー] ボタンを選択してページをテストします。

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

[ページコレクション] タブを使用して、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. を選択し、ページを表示してテストします。