UI ビルダー でのモーダルの作成
UI ビルダー のモーダルをコンポーネントとともに使用して、ユーザーにアラートまたはアクションの呼び出しを提供します。UI ビルダー には時間と労力を節約するモーダルが付属しています。
モーダルとは
モーダルはダイアログとも呼ばれ、別のコンテンツウィンドウをオーバーレイするウィンドウです。モーダルはユーザーエクスペリエンスを制御します。モーダルが閉じられるまで、ユーザーはオーバーレイされたウィンドウを操作できません。モーダルには、次のようなさまざまなタイプのコンテンツを含めることができます。
- 静的テキスト
- 動的テキスト
- Forms
- イメージ
- ボタン
UI ビルダー には、事前構成されたモーダルが用意されています。 コンポーネントにモーダルを追加できます。次に、モーダルのコンテンツと、それを画面に表示する方法を構成します。モーダルにイベントハンドラーを追加して、ユーザーが選択したときにアクションを実行します。このアクションでは、ユーザーにアラートを出したり、アクションの確認を求めたりすることができます。モーダルは、起きている事柄をユーザーに通知する手段です。たとえば、モーダルによって、ユーザーがメインページで実行しているアクションを続行する前に、選択内容を確認するようにユーザーに求めることができます。
モーダルの構造
UI ビルダー のモーダルには次の要素があります。
- モーダルヘッダー
- モーダルコンテンツ
- [ダイアログを閉じる] ボタン (モーダルで実行されるアクションはなし)
- 少なくとも 1 つのモーダルボタン (アクションはモーダルで実行可能)
モーダルのタイプ
次の表に示すように、さまざまなタイプのモーダルを UI ビルダーで使用できます。
| モーダルのタイプ | 説明 |
|---|---|
| アラート | アラートモーダルは、コンポーネントアクションに関連する情報を提供します。たとえば、ユーザーが削除ボタンを押したときに、削除アクションは元に戻すことができないことを知らせるアラートポップアップが表示されます。 |
| 確認 | 確認モーダルは、ユーザーにコンポーネントアクションを確認することを求めます。たとえば、ユーザーが削除ボタンを押すと、ユーザーはデータの削除を確認することになります。[はい] や [キャンセル] など、プライマリ/セカンダリボタンのラベルフィールドから確認オプションを選択できます。 |
| 確認して破棄 | [確認して破棄] モーダルはよりディレクティブであり、通常はコンテンツの削除または消去に関連しています。ユーザーにアクションの重大度を知らせ、アクションを続行するかどうかを尋ねます。 |
| カスタム | カスタムモーダルは、標準のモーダルを使用して処理されないシナリオに対処します。カスタムモーダルは、モーダルのコンテナコンポーネントと考えることができます。カスタムレイアウト、コンポーネント、イベント、およびデータリソースを、ページの場合と同じように追加できます。カスタムモーダルでは、レイアウトを使用して、モーダルに必要とされる情報を十分に設計できます。レイアウトでは、モーダル画面内の情報を配置することもできます。カスケードスタイルシート (CSS) スタイリングを使用して、モーダルの外観を変更できます。 |
| iframe | iframe を使用して、URL とデータからの既存の iframe コンテンツをモーダルに取り込みます。 |
| モーダルビューポート | クライアントスクリプトを使用して、イベントバインディングを介してビューポートモーダルにコンテンツを動的に渡します。 |
イベントハンドラーとモーダル
イベントをモーダルに公開して、アクションへのコールイベントを処理します。たとえば、プライマリアクション、セカンダリアクションなどです。データを構成するには、イベントハンドラーを追加し、データリソースを呼び出します。これは、モーダルを持つコンポーネントに新しいイベントハンドラーを追加するのと同じくらい簡単です。モーダル自体にイベントハンドラーを追加することもできます。コンポーネントまたはモーダルに関連付けるイベントを選択して追加します。詳細な手順については、「コンポーネントへのモーダルの追加」を参照してください。