ビューポートコンポーネントをページに追加する

ビューポートコンポーネントをページに追加し、ページ上に個別のコンテンツを作成するためのサブページを作成します。

始める前に

必要なロール：ui_builder_admin

手順

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

   図 : 1. ビューポートコンポーネント

   

9. コンテンツツリーでビューポートコンポーネントを選択します。
10. 構成パネルで [+ 追加] を選択します。
    
11. リストからページコレクションを選択するか、[+ コレクションを作成] を選択してコレクションを作成します。
    独自のページコレクションを作成する方法の詳細については、「複数の UI ページにわたるページコレクションの作成」を参照してください。

    

12. [追加] を選択します。
    ページコレクションは、構成パネルの [ページコレクション] セクションに表示されます。ステージング領域には、ページ コレクションの 1 ページのみが表示されます。
13. [保存] を選択します。
14. ビューポート ID とルートを特定します。

    次の図に示すように、[構成] パネルに ID とルートが表示されます。

    
15. コンポーネントをページに追加して、追加したばかりのビューポート (ボタンコンポーネントなど) を開きます。
    詳細については、「コンポーネントの追加と構成」を参照してください。
16. 構成パネルで [イベント] タブを選択します。
17. [+ イベントハンドラーを追加] を選択してビューポートを表示します。
    
18. [ページレベルのイベントハンドラー] から、[UXF Macroponent ビューポートロードが要求されました] を選択します。
    
19. [viewportElementID] 要素で、null 値を前の手順で見つけたビューポート ID に置き換えます。
    この例では、「viewport_1」です。
20. [追加] を選択します。
    
21. [保存] を選択します。
22. を選択し、ページを表示してテストします。