「Manage actions in UI Builder pages (UI ビルダーページでのアクションの管理)」
UI ビルダー のコンポーネント、ページ、データリソース、および宣言アクションにアクションを追加できるように、イベントを操作する方法について学習します。
UI ビルダー でのアクション
UI アクションは、イベントがトリガーされたときに実行される処理を UI ビルダー に通知します。イベントは、ユーザーが実行するアクション、またはページで発生する事象です。UI アクションを使用して、ユーザーがタスクを完了するのに役立つ、インタラクティブで分かりやすいインターフェイスを作成します。各コンポーネントには、独自のイベントが関連付けられています。イベントには次のものが含まれます。
- ユーザーがデータ可視化をクリックする
- ページがデータを正常にフェッチする
- ユーザーがラジオボタンを選択する
- ページがロードされる
UI ビルダー のイベント
イベントを使用して、コンポーネント、ページ、およびデータリソースにアクションを追加します。
- コンポーネントイベントは、コンポーネントに対してセットアップするアクションです。そのコンポーネントアクションを構成するイベントハンドラーを設定します。たとえば、ボタンコンポーネントを UI ビルダー ページに追加できます。次に、Web ページへの移動など、そのボタンのアクションを適用するイベントハンドラーを追加できます。
- ページイベントは、ページ全体に対してアクションを実行します。次のページイベントを構成できます。
- ページイベントマッピング。ページのアラート通知を追加、削除、またはクリアします。
- バリアントイベントマッピング。ページバリアントのアラート通知を追加、削除、またはクリアします。
- ディスパッチされるイベント。ページにディスパッチされるイベントを作成し、親イベントハンドラーの後にイベントをモデル化するリレーイベントマッピングを作成します。ターゲットの親イベントハンドラーを選択して、その後のペイロードフィールドをモデル化します。
- 処理済みイベント。処理済みイベントとは、他のユーザーが公開して使用できるイベントのことです。処理済みイベントを作成すると、Page event mappings で他のユーザーも使用できるようになります。手動で作成するペイロードフィールドを設定したり、モーダルダイアログのオープンやクローズなどの、処理済みイベントのテンプレートを選択したりすることもできます。
- データリソースイベントは、データリソースをマッピングして、データがフェッチされるタイミングについての情報を通知します。
- ページまたはコンポーネントのイベントは、イベントが 1 つ以上のイベントハンドラーにマッピングされるまで何も実行しません。
UI ビルダーのイベントマッピング
アクションをボタンのクリックやフィールドの入力などのイベントにマッピングします。イベントマッピングとは、イベントのペイロードまたはコンテキスト値を、そのイベントを操作するオブジェクトまたはハンドラーにマッピングするプロセスのことです。
イベントマッピングの詳細については、「マップイベントの定義」を参照してください。
UI ビルダーのイベントハンドラー
- データの可視化をクリックすると、その可視化で表されるレコードのリストが開きます
- リストのデータを正常にフェッチすると、データフェッチが成功したことを示すアラートが開きます
- ラジオボタンを選択すると、ページ上のリストのフィルターが調整されます
- ページをロードすると、続行する前に Cookie の受け入れを確認するモーダルが開きます
UI ビルダー ページまたはコンポーネントにイベントハンドラーを追加する際に、さまざまなタイプのイベントハンドラーを選択できます。たとえば、ボタンコンポーネントには次のタイプのイベントハンドラーを含めることができます。
- 継承されたイベントハンドラー。継承されたイベントハンドラーは、作業しているページから公開されます。親 UI ビルダー ページにいる場合は、継承されたイベントハンドラーをアプリシェルから公開することができます。次の表に、使用できるさまざまなタイプの継承されたイベントハンドラーと、それらを使用してできることを一覧表示します。
表 : 1. 継承されたイベントハンドラー イベントハンドラー 説明 ブレッドクラムの URL が変更されました 宛先にリンク 宛先に移動します。 - アプリルート：ホーム画面など、アプリ内の別のページへのリンク。
- 外部 URL：Web サイトまたは任意の外部 URL へのリンク。
サンプルスクリプトreturn { route: null, /* Page route, e.g. 'record' */ fields: null, /* Required params, e.g. {"table":"incident","sysId":"X"} */ params: null, /* Optional params, e.g. {"selectedIndex" : 1} */ ☑️redirect: null, /* ??? True/false? */ ☑️passiveNavigation: null, /* Load in background, e.g. 'false' */ title: null, multiInstField: null, ☑️targetRoute: null, /* ??? */ ☑️external: null /* ??? True/false? */ };URL にパラメーターを追加 パラメーターを URL にさらに追加します。 サンプルスクリプト{ “selectedTabIndex” : 0 }モーダルダイアログを開くまたは閉じる モーダルを作成したら、Open or close modal dialog を使用してモーダルをトリガーします。 - ページレベルのイベントハンドラー。このタイプのイベントハンドラーはすべてのページに共通であり、このハンドラータイプは、ページレベルのアラート通知を追加またはクリアする場合に使用します。次の表に、使用できるさまざまなタイプのページレベルのイベントハンドラーと、それらを使用してできることを一覧表示します。
表 : 2. ページレベルのイベントハンドラー イベントハンドラー 説明 アラート通知を追加 アラート通知を送信するコードスニペットを追加します。例： return { items: [{"type" : "info", "message" : "Info message", "id" : "optionalID"}] /* Types: info, warning, error */ };アラート通知の削除 破棄するアラート通知の ID を呼び出すコードを追加します。たとえば、ボタンをクリックしてページロードアラート通知を削除します。 アラート通知のクリア 破棄するすべてのアラート通知の ID を呼び出すコードを追加します。たとえば、ボタンをクリックしてすべてのアラート通知を削除します。 ロード中ステータスを設定 ロードのオン/オフを切り替えます。たとえば、ロードのオン/オフを切り替えて、ボタンをクリックしたときにページをロードする/しないようにできます。 クライアントステータスパラメーターを更新 クライアントステータスパラメーターを宣言的に設定します。値を指定して設定したクライアントステータスパラメーターがあるとします。Update client state parameter イベントハンドラーを構成して、クライアントステータスパラメーターを新しい値で更新できます。たとえば、「Greeting」と呼ばれるクライアントステータスパラメーターがあり、初期値として「Hello」が設定されているとします。Update client state parameter イベントハンドラーを追加して「Greeting」クライアントステータスパラメーターを選択し、「Goodbye」などの新しい値を入力できます。ボタンをクリックすると、ページ上の「Hello」が「Goodbye」に置き換えられます。 UXF macroponent ビューポートロードを要求 ボタンコンポーネントなどのコンポーネントに追加して、ビューポートを開きます。詳細については、「ビューポートコンポーネントをページに追加する」を参照してください。 - データリソースハンドラー。このタイプのイベントハンドラーは、サーバーへのデータのフェッチまたは書き込みをトリガーします。 ボタンをクリックして、UI ビルダー ページ上のアプリシェルデータソースデータを更新できます。たとえば、データリソースハンドラーを使用して、次のアクションを実行できます。
- インシデントレコードの説明にデータをバインドします。
- インシデントの説明の値を変更します。
- ボタンコンポーネントをページに追加します。
- ボタンに「インシデントをリフレッシュ」というラベルを付けます。
- ボタンの Look Up Record イベントハンドラーを追加します。
- ページを保存します。
- インシデントレコードの説明が変更された場合は、[リフレッシュ] をクリックしてページの説明を更新します。
- クライアントスクリプト。コンポーネントでイベントがトリガーされたときに実行されるスクリプト。これらのスクリプトは、UI ビルダー の [クライアントスクリプト] セクションで作成します。詳細については、「クライアントスクリプトを定義してコンポーネントにバインドする」を参照してください。
UI ビルダーのコンポーネントへのイベントのバインディング
イベントハンドラーをコンポーネントのイベントにバインドします。コンポーネントを UI ビルダー ページに追加したときには、コンポーネントがページでアクションを実行するようには構成されません。たとえば、ボタンコンポーネントは静的であり、レコードの削除など、イベントアクションをバインドするまでは何も実行されません。一部のコンポーネントには、イベントハンドラーをアサインできる複数のイベントがあります。たとえば、リストコンポーネントでは、ナビゲーションハンドラーを Row clicked イベントに割り当てることができます。Data fetch failed イベントにオープンモーダルをアサインすることもできます。詳細については、「コンポーネントへのイベントのバインド」を参照してください。
UI ビルダーページへのイベントのバインド
ページレベルのイベントをバインドして、ページでイベントハンドラーを実行します。たとえばページレベルのイベントは、ページ通知、ページロード、またはページのプロパティの変更時に使用します。ページレベルのイベントへのイベントハンドラーのアサインは、コンポーネントからのイベントへのハンドラーのアサインに似ています。
- ページイベントマッピング。ページのアラート通知を追加、削除、またはクリアします。
- バリアントイベントマッピング。ページバリアントのアラート通知を追加、削除、またはクリアします。
- ディスパッチされるイベント。ページにディスパッチされるイベントを作成し、親イベントハンドラーの後にイベントをモデル化するリレーイベントマッピングを作成します。ターゲットの親イベントハンドラーを選択して、その後のペイロードフィールドをモデル化します。
- 処理済みイベント。他のユーザーが公開して使用できるイベントである処理済みイベントを追加します。
UI ビルダーのデータリソースへのイベントのバインディング
UI ビルダー ページ上の個々のデータリソースにイベントハンドラーをバインドします。たとえば、データリソースが新しいデータを正常にフェッチすると、ナビゲーションなどのイベントハンドラーが実行され、ユーザーはフロー内の次のステップに移動します。データリソースがテーブルにレコードを正常に追加すると、モーダル表示イベントハンドラーを使用する成功モーダルが表示されます。詳細については、「データリソースへのイベントのバインド」を参照してください。
UI ビルダーの宣言アクションへのイベントのバインディング
データ要素をバインドして、イベントアクションを ServiceNow AI Platform® の [アクション & コンポーネント] の宣言アクション定義に追加します。たとえば、データ要素をバインドして、テーブルでの作業を実行するイベントアクションを追加できます。
宣言アクションがある UI ビルダー ページにコンポーネントを追加する場合は、それを処理済みイベントにバインドする必要があります。処理済みイベントは、ユーザーがコンポーネントを選択したときに実行されるアクションを作成します。[宣言アクションイベントマッピングの設定] を選択し、新しいイベントハンドラーを追加して、ページでの宣言アクションの動作を定義します。
詳細については、「宣言アクションへのイベントのバインド」を参照してください。