ビューポート対応のタブでのタブの置き換え

ページ上のタブをビューポート対応のタブに変換します。ビューポート対応のタブを使用して、サードパーティのカスタムデータを表示し、対象者をアサインして、バリアントを作成できます。

始める前に

必要なロール：admin

このタスクについて

タブをビューポート対応のタブに置き換えます。

注:

タブをビューポート対応のタブに置き換えるのは、永続的な一方向のプロセスです。既存のタブのコンテンツはすべて失われるため、ビューポートのタブのコンテンツを再作成する必要があります。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、次を選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. 既存のタブがあるページを開くか、またはページを作成してタブコンポーネントを追加します。

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

   

   タブコンポーネントのページへの追加方法の詳細については、「UI ビルダーページにタブ付きコンテンツを追加」を参照してください。

4. コンテンツツリーで、ビューポートのタブに置き換えるタブコンポーネントを選択します。
5. 構成パネルで [ビューポートタブに置き換える] を選択します。
   注:

   タブをビューポート対応のタブに置き換えるのは、永続的な一方向のプロセスです。既存のタブのコンテンツはすべて失われるため、ビューポートのタブのコンテンツを再作成する必要があります。

   

6. [ビューポートタブに置き換える] を選択します。
   
7. [コンテンツを編集] をクリックして、ビューポートが有効なタブを追加します。

   図 : 2. コンテンツの編集

   

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

8. [保存して続行] を選択します。
   サブページの概要ページが表示されます。
9. [新規ページの作成] を選択します。
10. [名前] フィールドに、ビューポート対応のタブの名前を入力します。
11. デフォルトのパスをそのまま使用するか、必要に応じて変更します。
12. [続行] を選択します。
13. [名前] フィールドに、ページバリアントの名前を入力するか、デフォルトのままにします。
14. このページの対象者を 1 人以上追加します。
    必要な対象者がリストにない場合は、[利用可能なすべての対象者を表示 (View all available audiences)] を選択して作成できます。
15. オプション: 用意されたドロップダウンメニューを使用するか、エンコードされたクエリ文字列を記述して、ページまたはタブを表示するタイミングに関する条件を宣言します。

    エンコードされたクエリの記述の詳細については、「Encoded query strings」を参照してください。

16. [エディターで開く] を選択します。
17. ページの場合と同様に、タブにコンポーネントを追加します。
18. 任意のコンポーネントにイベントハンドラーを追加して、ページコンテンツのロードなどのアクションを実行できるようにします。
    イベントハンドラーの詳細については、「UI ビルダーページでのアクションの管理 (高度な機能)」を参照してください。
19. 元のページに戻るには、[←(ページの名前) に戻る] を選択します。
    
20. [データ駆動型タブ] でデータソースを選択し、データリソースを使用してビューポート対応のタブにデータをバインドして、テーブルとレコードからデータを動的に公開します。

    次に、これらのデータプロパティをタブのコンポーネントにバインドします。データリソースの使用の詳細については、「UI ビルダーページでデータを動的に公開する (高度な機能)」を参照してください。

    
21. ビューポートが有効になっているタブのラベルをページ上で表示する場所を選択し、タブのラベルを非表示にしてアイコンのみを表示するかどうかを決定します。