エクスペリエンスにビューポートモーダルを追加する

エクスペリエンスのモーダル内にビューポートを追加します。

始める前に

必要なロール：ui_builder_admin

このタスクについて

ビューポートモーダルを使用して、親ページまたはエクスペリエンスのモーダル内にサブページまたは他のエクスペリエンスを埋め込みます。ビューポートモーダルは、イベントまたはスクリプトを介して開くことができます。ビューポートモーダルは、ビューポートモーダルごとに 1 つのサブルートに制限されています。追加のルート用に追加のビューポートモーダルを作成できます。

注:

従来のビューポートモーダルはアップグレードできないため、新しい機能を利用するには再作成する必要があります。

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、選択してエクスペリエンスを作成します 作成/挿入 > エクスペリエンス.
   詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを開くかまたは作成します。
   既存のページを開く場合は、元のページと同じスコープ内にあることを確認してください。そうでない場合は、ページの編集を開始する前にスコープを変更します。アプリケーションスコーピングは、アプリケーションファイルとデータへのアクセスを識別して制限することによってアプリケーションを保護します。アドミニストレーターは、アプリケーションのどの部分を他のアプリケーションからアクセスできるようにするのかを指定するスコープを設定できます。アプリケーションスコープは、データとアプリケーションファイルを保護します。アプリケーションスコープの詳細については、「セキュリティとロールについて学習する」を参照してください。
4. コンテンツツリーで [+ コンテンツを追加] を選択します。
5. [1 列] のレイアウトを選択します。
6. コンテンツツリーの [モーダル] の横にある [+] を選択します。
7. リストで [ビューポートモーダル] を選択します。

   図 : 1. ビューポートモーダル

   

   ビューポートモーダルがページの上に表示されます。
8. [保存] をクリックします。
9. コンテンツツリーでビューポートを選択します。
   
10. [構成] タブの [ページコレクション] の横にある [+ 追加] を選択します。
    
11. ページコレクションを選択するか、新しいページコレクションを作成します。
    詳細については、「複数の UI ページにわたるページコレクションの作成」を参照してください。

    

12. [追加] をクリックします。
13. [保存] をクリックします。
14. ビューポートモーダルを開くコンポーネントを追加します。

    次の例では、ボタンを使用してビューポートモーダルを開きます。

    

15. [イベント] タブを選択します。
16. [+ イベントハンドラーを追加] を選択します。
    
17. [モーダルダイアログを開くまたは閉じる] を選択します。
18. [モーダルダイアログを開く] を有効にします。
19. [モーダル] ドロップダウンで作成したビューポートモーダルを選択します。
    
    [ビューポート ID] は自動入力されます。
20. [追加] を選択します。
21. [保存] を選択します。
22. を選択し、ページを表示してテストします。