コンポーネントへのモーダルの追加

UI ビルダー でモーダルを追加する方法を学習します。モーダルは、コンポーネントをクリックすると表示されるウィンドウです。たとえば、削除ボタンコンポーネントがクリックされるとモーダルが表示され、レコードの削除を確認するように求められます。

始める前に

必要なロール：ui_builder_admin

このタスクについて

モーダルは、ボタンのクリックなどによってイベントハンドラーがトリガーされると表示される画面です。次の手順は、確認モーダルと関連するイベントハンドラーをボタンコンポーネントに追加する方法の例を示しています。

手順

1. 次のように移動する。 All (すべて) > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、選択してエクスペリエンスを作成します 作成/挿入 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページまたはページバリアントを開くか作成します。
   UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. ページにモーダルを追加します。
   1. コンテンツツリーの [モーダルとポップオーバー] の横にある [+] アイコンを選択します。
      
   2. [確認] などのモーダルタイプを選択します。
      

      モーダルのタイプ	説明
      アラート	アラートモーダルは、コンポーネントアクションに関連する情報を提供します。たとえば、ユーザーが削除ボタンを押したときに、削除アクションは元に戻すことができないことを知らせるアラートポップアップが表示されます。
      確認	確認モーダルは、ユーザーにコンポーネントアクションを確認することを求めます。たとえば、ユーザーが削除ボタンを押すと、ユーザーはデータの削除を確認することになります。[はい] や [キャンセル] など、プライマリ/セカンダリボタンのラベルフィールドから確認オプションを選択できます。
      確認して破棄	[確認して破棄] モーダルはよりディレクティブであり、通常はコンテンツの削除または消去に関連しています。ユーザーにアクションの重大度を知らせ、アクションを続行するかどうかを尋ねます。
      カスタム	カスタムモーダルでは、レイアウトを使用して、モーダルに必要とされる情報を十分に設計できます。レイアウトでは、モーダル画面内の情報を配置することもできます。カスケードスタイルシート (CSS) スタイリングを使用して、背景色などのモーダルの外観を変更できます。
      iframe	iframe を使用して、URL とデータから既存の iframe コンテンツを使用してコンテンツをモーダルに取り込みます。
      モーダルビューポート	クライアントスクリプトを使用して、イベントバインディングを介してビューポートモーダルにコンテンツを動的に渡します。コンポーネントへのイベントのバインドの詳細については、「コンポーネントへのイベントのバインド」を参照してください。

   3. 次の表に示すようにモーダルを構成します。

      モーダルに必要なものに応じて、各モーダルを異なる方法で構成します。モーダルに入力する情報、モーダルのサイズ、およびその外観を変更します。モーダルのオープンやクローズなど、モーダルのアクションを実行するイベントハンドラーをモーダルに追加できます。

      モーダル	設定
      アラート	モーダルのタイトルであるヘッダーを追加します。 モーダルに表示するコンテンツを記述します。このコンテンツは、何のアラートかをユーザーに伝えます。 ボタンラベルのテキストを追加します。[OK]、[はい] など、任意のテキストを指定できます。 画面上のモーダルのサイズを選択します。[小] 、[中]、[大]、または [全画面] から選択します。 デフォルトのアクションに基づいてモーダルを閉じるかどうかに応じて、[デフォルトのボタンアクションを防止] を有効または無効にします。 [モーダルコンテンツのロードを保留] を有効または無効にします。無効にすると、モーダルはページとともにロードされます。有効にすると、ページのロード時にモーダルはロードされません。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択し、[追加] を選択してページに追加します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。
      確認	モーダルのタイトルであるヘッダーを追加します。 モーダルに表示するコンテンツを記述します。このコンテンツは、何のアラートかをユーザーに伝えます。 プライマリボタンのテキストを追加します。プライマリボタンは、[はい]、[追加] などのユーザーのメインアクションボタンです。 セカンダリボタンのテキストを追加します。通常、[キャンセル] や [いいえ] などのセカンダリボタンは選択できません。 画面上のモーダルのサイズを選択します。[小] 、[中]、[大]、または [全画面] から選択します。 デフォルトのアクションに基づいてモーダルを閉じるかどうかに応じて、[デフォルトのプライマリボタンアクションを防止] を有効または無効にします。 デフォルトのアクションに基づいてモーダルを閉じるかどうかに応じて、[デフォルトのセカンダリアクションを防止] を有効または無効にします。 [モーダルコンテンツのロードを保留] を有効または無効にします。無効にすると、モーダルはページとともにロードされます。有効にすると、ページのロード時にモーダルはロードされません。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。
      確認または破棄	モーダルのタイトルであるヘッダーを追加します。 モーダルに表示するコンテンツを記述します。このコンテンツは、何のアラートかをユーザーに伝えます。 プライマリボタンのテキストを追加します。プライマリは、[削除] や [消去] などのユーザーのメインアクションボタンです。 セカンダリボタンのテキストを追加します。通常、[キャンセル] や [いいえ] などのセカンダリボタンは選択できません。 画面上のモーダルのサイズを選択します。[小] 、[中]、[大]、または [全画面] から選択します。 デフォルトのアクションに基づいてモーダルを閉じるかどうかに応じて、[デフォルトのプライマリボタンアクションを防止] を有効または無効にします。 デフォルトのアクションに基づいてモーダルを閉じるかどうかに応じて、[デフォルトのセカンダリアクションを防止] を有効または無効にします。 [モーダルコンテンツのロードを保留] を有効または無効にします。無効にすると、モーダルはページとともにロードされます。有効にすると、ページのロード時にモーダルはロードされません。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。
      カスタム	モーダルのレイアウトを選択します。フレックスボックスまたは CSS グリッドレイアウトを使用できます。これらのレイアウトでは、必要に応じてモーダルにコンテンツを追加できます。 スタイリングオプションを使用して、モーダルの外観を変更します。背景色やパディングなどの標準的な CSS スタイリングをモーダルに適用できます。スタイリングの詳細については、「コンポーネントのデフォルトの外観を変更する」を参照してください。 カスタムモーダル内のコンテナにコンポーネントを追加します。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。
      iframe	モーダルのタイトルであるヘッダーを追加します。 既存の iframe コンテンツをポイントするソース URL を追加します。 iframe のパラメーターと初期データを設定します。 画面上のモーダルのサイズを選択します。[小] 、[中]、[大]、または [全画面] から選択します。 [サンドボックスを無効にします] をオンにすると、allow-forms、allow-modals、allow-popups、allow-presentation、allow-same-origin、allow-scripts、allow-downloads の各オプションの制限が解除されます。[サンドボックスを無効にします] をオフにして、allow-scripts オプションのみを解除します。 [モーダルコンテンツのロードを保留] を有効または無効にします。無効にすると、モーダルはページとともにロードされます。有効にすると、ページのロード時にモーダルはロードされません。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。
      モーダルビューポート	画面上のモーダルのサイズを選択します。[小] 、[中]、[大]、または [全画面] から選択します。 [パディングを非表示] を有効または無効にします。 [閉じるボタンを非表示] を有効または無効にします。有効にすると、[閉じる] ボタンはモーダルに表示されません。 [モーダルコンテンツのロードを保留] を有効または無効にします。無効にすると、モーダルはページとともにロードされます。有効にすると、ページのロード時にモーダルはロードされません。 選択 イベント > イベントマッピングを追加 イベントハンドラーをモーダルに追加します。 モーダルに適用するイベントハンドラーを選択します。継承されたイベントハンドラーまたはページレベルのイベントハンドラーから選択します。イベントハンドラーは、モーダルを開く/閉じるなどのアクションを実行します。モーダルのタイプに応じて、App Shell データソースのデータ、GraphQL のユーザーセッション、または変換のユーザーセッションを更新できます。 モーダルビューポート内のビューポートコンポーネントを選択します。 [構成] タブで [+ 追加] を選択して、ページコレクションをビューポートに追加します。 リストからページコレクションを選択し、[追加] をクリックします。

5. コンポーネントをページに追加して、追加したばかりのモーダル (ボタンコンポーネントなど) をトリガーします。
   詳細については、「コンポーネントの追加と構成」を参照してください。
6. 構成パネルで [イベント] タブを選択します。
7. [+ イベントハンドラーを追加] を選択します。
   
8. [モーダルダイアログを開くまたは閉じる] を選択します。
9. [モーダル] ドロップダウンを使用して、前のステップで作成したモーダルを選択します。
10. [追加] をクリックします。
    
11. モーダルの構成が完了したら、閉じます。

    コンテンツツリーで、作成したモーダルがページ構造の本文の上にあることに注意してください。

    
12. [保存] をクリックします。