モードレスダイアログイベントを UI ビルダーページに追加する

開く、閉じる、最小化するなどのモードレスダイアログイベントを UI ビルダーで追加および構成する方法を学びます。モードレスダイアログは、ページの上のコンテンツを含むフローティングウィンドウです。

始める前に

必要なロール：ui_builder_admin

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページバリアントを開くか作成します。
   UI ビルダー でページを作成する方法の詳細については、「UI ビルダー でのページの作成」を参照してください。
4. モードレスダイアログをページに追加します。
   モードレスダイアログの作成方法の詳細については、「モードレスダイアログを UI ビルダー ページに追加する」を参照してください。
5. モードレスダイアログでアクションを実行するための、ボタンなどのコンポーネントをページに追加します。
   モードレスダイアログとやりとりするボタンの作成方法の詳細については、「モードレスダイアログを UI ビルダー ページに追加する」を参照してください。
6. コンテンツツリーまたはステージでボタンコンポーネントを選択します。
7. 構成パネルで [イベント] タブを選択します。
8. [+ イベントハンドラーを追加] を選択します。
   
9. [イベントハンドラープレビュー] ウィンドウから、ボタンにアサインするアクションを選択します。
   使用可能なモードレスダイアログイベントハンドラーが 5 つあります。

   

   注:

   スクリプトエディターで作業する場合は、いずれのイベントハンドラーでも、[モード] ドロップダウンで [スクリプト] を選択します。

   モードレスダイアログイベントハンドラーを追加するには	必要な操作
   モードレスダイアログを開く	モードレスダイアログを開きます。たとえば、[メールを作成する] というラベルの付いたボタンを追加し、[メールコンポーザー (ミニ)] コンポーネントを含むモードレスダイアログを開くようにボタンを構成します。 [見出し]：モードレスダイアログの見出しを入力します。 [最小化された見出し]：ユーザーがページ上の最小化されたダイアログドロップダウンアイコンを選択したときに表示される見出しを入力します。 [カテゴリ]：モードレスダイアログをグループ化するカテゴリ名を入力します。 [モードレスダイアログ]：開くモードレスダイアログを選択します。 [単一インスタンス]：ユーザーがモードレスダイアログのインスタンスを 1 つだけ開けるようにするには、このオプションを選択します。ユーザーがモードレスダイアログのインスタンスを複数開けるようにするには、このオプションを選択解除のままにします。たとえば、ボタンで [メールコンポーザー (ミニ)] コンポーネントを含むモードレスダイアログが開くようにするとき、[単一インスタンス] オプションを選択しない場合、ユーザーは複数のモードレスダイアログウィンドウを開いてメールメッセージを作成できます。 [モードレスダイアログインスタンス ID]：[単一インスタンス] オプションを選択した場合、クリック時に開くモードレスダイアログインスタンス ID を指定します。フィールド上にマウスを移動し、[データをバインド] アイコンを選択します。[データタイプ] で [モードレスダイアログ] を選択します。[instanceID] ピルを上部のセクションにドラッグし、[適用] を選択します。 [トリガーのタイミング] ([詳細オプション])：コンポーネント (この例ではボタン) が常にモードレスダイアログを開くようにするには、[常時] を選択します。イベントハンドラー条件を追加するには、[条件付きで] を選択します。イベントハンドラー条件の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。
   モードレスダイアログを閉じる	モードレスダイアログを閉じます。モードレスダイアログウィンドウの外側からモードレスダイアログを閉じるようにボタンなどのコンポーネントを構成する場合は、このオプションを使用します。 [モードレスダイアログインスタンス ID]：クリック時に閉じるモードレスダイアログインスタンス ID を指定します。 [トリガーのタイミング] ([詳細オプション])：コンポーネント (この例ではボタン) が常にモードレスダイアログを閉じるようにするには、[常時] を選択します。イベントハンドラー条件を追加するには、[条件付きで] を選択します。イベントハンドラー条件の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。
   モードレスダイアログを最小化	モードレスダイアログを最小化します。モードレスダイアログウィンドウの外側からモードレスダイアログを最小化するようにボタンなどのコンポーネントを構成する場合は、このオプションを使用します。 [モードレスダイアログインスタンス ID]：クリック時に最小化するモードレスダイアログインスタンス ID を指定します。 [トリガーのタイミング] ([詳細オプション])：コンポーネント (この例ではボタン) が常にモードレスダイアログを最小化するようにするには、[常時] を選択します。イベントハンドラー条件を追加するには、[条件付きで] を選択します。イベントハンドラー条件の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。
   モードレスダイアログを更新	モードレスダイアログ上の指定されたフィールドを更新します。たとえば、[見出しの更新] というラベルの付いたボタンをモードレスダイアログのフッターに追加し、モードレスダイアログ内のコンポーネントの見出しを更新するようにボタンを構成します。 [見出し]：ボタンが選択されたときに追加されるモードレスダイアログの新しい見出しテキストを入力します。 [最小化された見出し]：ボタンが選択されたときに追加される、新しい最小化された見出しのテキストを入力します。 [カテゴリ]：ボタンが選択されたときに追加される、新しいカテゴリの名前を入力します。 [モードレスダイアログ]：更新するモードレスダイアログを選択します。 [モードレスダイアログインスタンス ID]：クリック時に更新するモードレスダイアログインスタンス ID を指定します。 [ダーティ]：モードレスダイアログをダーティとしてマークするには、このオプションを選択します。 [トリガーのタイミング] ([詳細オプション])：コンポーネント (この例ではボタン) が常にモードレスダイアログを更新するようにするには、[常時] を選択します。イベントハンドラー条件を追加するには、[条件付きで] を選択します。イベントハンドラー条件の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。
   ダーティモードレスダイアログ	モードレスダイアログをダーティとしてマークします。 [モードレスダイアログインスタンス ID] で、ダーティとしてマークされるモードレスダイアログインスタンス ID を指定します。 [トリガーのタイミング] ([詳細オプション])：コンポーネント (この例ではボタン) が常にダーティとしてマークされるようにするには、[常時] を選択します。イベントハンドラー条件を追加するには、[条件付きで] を選択します。イベントハンドラー条件の詳細については、「UI ビルダー コンポーネント式エディターでサポートされている関数」を参照してください。

10. [追加] を選択します。

タスクの結果

構成されたイベントハンドラーは、コンポーネントの構成パネルの [イベント] タブに表示されます。