このモジュールでは、次のことを学習します。

• イベントハンドラーをイベントにマッピングして、ページをインタラクティブにします。
• Now Experience コンポーネントライブラリを使用してイベントを設定します。
• データバインディングを使用して、データリソースを使用するようにイベントを設定します。
• スクリプトを使用してイベントハンドラーを構成します。

この学習モジュールは、UI Builder でのページとコンポーネントの操作方法に精通していることを前提としています。

• ページの作成
• ページバリアントの作成
• ページへのコンテナーとコンポーネントの追加
• コンポーネントの構成

ページの作成の詳細については、学習モジュール「UI Builder でのページの作成」を参照してください。

重要：この学習モジュールの内容は、Rome ServiceNow リリース用に最後に更新されました。

この学習モジュール全体で Special Occasions アプリケーションを使用して、アプリケーション作成の基礎である概念とプロセスを紹介し、実際に示します。Special Occasions アプリケーションの構築は行いません。

演習では、NeedIt アプリケーションを開発します。

演習は、次の 3 つの方法で示されます。

• ナビゲーションペインの [演習] アイコン。
• ページ上部の [演習] アイコンと「演習」という単語。
• ページタイトルの「演習」または「課題」という単語。

NeedIt アプリケーションを使用すると、ユーザーは複数の部門からのサービスを要求できます。ソースコントロールを使用して、この学習モジュールに必要なすべての NeedIt アプリケーションファイルから始めます。

ServiceNow は GitHub を使用して、開発者サイトの学習コンテンツをコピーして使用するアプリケーションリポジトリを提供します。リポジトリには、アプリケーションファイルの固定セットであるタグが含まれているため、部分的に構築されたアプリケーションを使用して作業を開始できます。ServiceNow が提供するリポジトリを個人開発者インスタンス (PDI) にコピーしてインポートすることで、モジュール内の実践的な演習に必要なすべてのファイルを取得できます。

注意：ServiceNow が開発者プログラムの学習コンテンツで GitHub を使用する方法の詳細と、リポジトリをフォークしてアプリケーションをインポートする方法に関するビデオを見るには、『GitHub ガイド』を参照してください。

この演習では、次のことを行います。

1. ServiceNow リポジトリを GitHub アカウントにフォークします。
2. リポジトリのフォークから PDI にアプリケーションをインポートします。

重要：リポジトリを既にフォークしてインポートしている場合は、次の演習に進み、タグから分岐を作成して、アプリケーションファイルを PDI にロードできます。モジュールを完了するには、NeedIt アプリケーションファイルが必要です。

リポジトリのフォーク

演習のこのセクションでは、開発者サイトの学習コンテンツで使用するアプリケーションリポジトリのパーソナルフォークを作成します。

1. Web ブラウザーで、github.com を開きます。

2. GitHub アカウントをお持ちの場合は、サインインします。お持ちでない場合は、新しいアカウントにサインアップします。

3. サインインしたら、NeedIt リポジトリを開きます。

4. [フォーク] ボタン () をクリックして、GitHub アカウントにリポジトリのコピーを作成します。

5. 既にリポジトリをフォークしている場合は、ダイアログが表示されます。リポジトリを既にフォークしている場合は、次の演習に進みます。

   

6. GitHub アカウントが複数の組織に属している場合は、GitHub でフォークを作成する場所を指定します。[Fork devtraining-application-release] ダイアログで、<お使いの GitHub ユーザー名> リンクを選択します。リポジトリのプライベートフォークを作成します。GitHub はリポジトリフォークのページを自動的にロードします。

   

7. リポジトリのフォークの URL が次のようになっているかを検証します：<お使いの GitHub ユーザー名>/devtraining-application-release。

   

8. フォークしたリポジトリの URL をコピーします。

   1. [コード] ボタンをクリックします。

   2. URL に ServiceNow ではなく GitHub ユーザー名が含まれていることを確認します。

   3. HTTPS が選択されていることを確認します。選択されていない場合は、[クローン] フライアウトで [HTTPS] タブを選択します。

   4. [クリップボードにコピー] ボタン () をクリックします。

      

      注意：次のセクションでは、コピーした URL を使用して、フォークしたリポジトリへの接続を設定します。

フォークしたリポジトリからアプリケーションをインポートします。

演習のこのセクションでは、アプリケーションリポジトリを ServiceNow にインポートします。プロセスの一環として、まず GitHub アカウントの資格情報レコードを作成してから、Studio を使用してアプリケーションリポジトリを PDI にインポートします。

1. 管理者ユーザーとして PDI にログインします。PDI がない場合は、ServiceNow 開発者サイトを開いて Rome PDI を入手してください。

   注意：PDI の入手方法については、『個人開発者インスタンス (PDI) ガイド』を参照してください。

2. GitHub 接続の資格情報レコードを作成します。

   重要：資格情報レコードを作成する必要があるのは 1 回だけです。別の演習で資格情報レコードを既に作成している場合は、この手順をスキップしてください。

   1. Application Navigator を使用して、[接続および資格情報] > [資格情報] を開きます。

   2. [新規] ボタンをクリックします。

   3. [作成する資格情報のタイプは？] リストで、[基本認証資格情報] リンクをクリックします。

   4. 資格情報レコードを設定します。

      名前： GitHub 資格情報 (GitHub Credentials) - <お使いの github.com ユーザー名>
      ユーザー名： <お使いの github.com ユーザー名>
      パスワード： <お使いの github.com 個人アクセストークン>
      

      重要：GitHub では、ServiceNow などの他のプラットフォームからリポジトリにアクセスするには、個人アクセストークンが必要です。認証時には、パスワードの代わりに個人用アクセストークンが使用されます。GitHub パーソナルアクセストークンを作成する方法については、『GitHub ガイド』の「GitHub への認証」セクションを参照してください。

   5. [送信] ボタンをクリックします。

3. Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。

   

4. 新しいブラウザータブで Studio が開きます。

5. [アプリケーションを選択] ダイアログで、[ソースコントロールからインポート] ボタンをクリックします。

   

6. [アプリケーションのインポート] ダイアログで、分岐したリポジトリへの接続を設定します。

   URL： <リポジトリのフォークドバージョン用にコピーしたURL>
   資格情報： GitHub 資格情報 (GitHub Credentials) - <お使いの github.com ユーザー名>
   分岐： メイン (main)

   注意：[分岐] の値を [メイン (main)] に変更すると、「デフォルトの命名規則を使用することを強くお勧めします」という情報メッセージが表示されます。[分岐] フィールドの値はリポジトリに存在する必要があります。開発者サイトのトレーニングリポジトリにはすべて [メイン (main)] 分岐があり、デフォルト値の代わりに使用する必要があります。

   

7. [インポート] ボタンをクリックします。

8. アプリケーションのインポートが完了したら、[アプリケーションの選択] ボタンをクリックします。

   

   注意：接続に失敗した場合は、フォークしたリポジトリ URL ではなく ServiceNow のリポジトリ URL を [URL] フィールドに入力しているか、あるいは GitHub アカウントで 2 要素認証を有効にしている可能性があります。接続のトラブルシューティング方法については、 「GitHub 問題のトラブルシューティング」を参照してください。

9. [アプリケーションを選択] ダイアログで、Studio で編集するために、アプリケーションをクリックして開きます。

   重要：タグから分岐を正常に作成しないと、次の演習で Studio にアプリケーションファイルが表示されません。

この演習では、「ページ作成」モジュール (モジュールで使用するアプリケーションファイルを含む) 用に NeedIt アプリケーションの分岐を作成します。

注意：この演習を開始する前に、「演習：「ページ作成」モジュール用のリポジトリのフォークとアプリケーションのインポート」の説明に従って、NeedIt リポジトリをフォークしてインポートする必要があります。

1. 前回の演習で NeedIt アプリケーションを Studio で開いていない場合は、ここで開きます。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
   2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。

2. Studio で、[ソースコントロール] メニューを開き、[分岐を作成] メニューアイテムを選択します。

   

3. 分岐を構成します。

   分岐名： UIBEventsModule
   タグから作成： LoadForUIBEventsModule

   注意：リポジトリに LoadForUIBEventsModule タグがない場合、タグを作成する前にリポジトリをフォークしています。この演習の「LoadForUIBEventsModule タグなしで分岐を作成する」セクションのステップを完了し、この学習モジュール用にインスタンスを準備してください。

4. [分岐を作成] ボタンをクリックします。

5. [閉じる] ボタンをクリックします。

6. タグに含まれているアプリケーションファイルをロードするには、(Studio ではなく) ServiceNow ブラウザーのメインタブに戻り、ブラウザーの再ロードボタンをクリックしてページを更新します。

   注意：分岐の作成に失敗した場合は、フォークしたリポジトリ URL ではなく ServiceNow のリポジトリ URL を [URL] フィールドに入力しているか、あるいは GitHub アカウントで 2 要素認証を有効にしている可能性があります。GitHub 接続問題のトラブルシューティング方法については、『GitHub ガイド』の「GitHub 問題のトラブルシューティング」セクションを参照してください。

LoadForUIBEventsModule タグなしで分岐を作成

リポジトリに LoadForUIBEventsModule タグがない場合にのみ、演習のこのセクションを完了してください。NeedIt アプリケーションを準備するには、既存のタグから分岐を作成し、更新セットをダウンロードして適用して、インスタンスでのアプリケーションの準備を完了します。

1. 分岐を構成します。

   分岐名： UIBEventsModuleUpdateSet
   タグから作成： LoadForFlowDesignerModule

2. [分岐を作成] ボタンをクリックします。

3. [閉じる] ボタンをクリックします。

4. 更新セット XML ファイルをダウンロードして解凍します。

   1. Start_UIBMods.xml.zip ファイルをダウンロードします。
   2. Start_UIBMods.xml.zip ファイルを解凍します。
   3. Start_UIBMods.xml ファイルを解凍した場所をメモします。

5. 更新セットを適用します。

   1. ServiceNow のメインウィンドウで、Application Navigator を使用して [System Update Sets] > [取得済み更新セット (Retrieved Update Sets)] を開きます。

   2. [XML から更新セットをインポート] 関連リンクをクリックします。

   3. Start_UIBMods.xml ファイルを選択し、[アップロード] ボタンをクリックします。

      

   4. [取得済み更新セット (Retrieved Update Sets)] リストで、[名前] 列の [NeedIt] リンクをクリックして、更新セットレコードを開きます。

   5. [更新セットのプレビュー] ボタンをクリックします。

   6. プレビューが完了したら、[更新セットプレビュー] ダイアログの [閉じる] ボタンをクリックします。

   7. [更新セットのコミット] ボタンをクリックします。

   8. コミットが完了したら、[更新セットのコミット] ダイアログの [閉じる] ボタンをクリックします。

6. 更新セットからの変更をコミットします。

   1. Studio のブラウザータブに切り替えます。

   2. [ソースコントロール] メニューを開き、[変更をコミット] メニューアイテムを選択します。

   3. リストヘッダーのチェックボックスをオンにして、コミットするすべてのファイルを選択します。

      

   4. [続行] ボタンをクリックします。

   5. UIB イベント用ファイルのコミットコメントを追加します。

   6. [コミットファイル] ボタンをクリックします。

   7. 変更がコミットされたら、[変更をコミット] ダイアログの [閉じる] ボタンをクリックします。

イベントは、ユーザーが実行するアクション、またはページ上で発生する事象です。各コンポーネントには、固有のイベントが関連付けられています。イベントには、次のものが含まれます。

• ユーザーがデータの表示方法をクリックした
• ページが正常にデータをフェッチした
• ユーザーがラジオボタンを選択した
• ページがロードされた

イベントハンドラーは、イベントが発生したときに実行されるアクションです。イベントハンドラーをイベントにマッピングすることで、イベントが発生したときに実行する 1 つ以上のアクションを指定します。例を次に示します。

• データの表示方法をクリックすると、レコードのリストが開き、表示方法に表示されます。
• リストのデータが正常にフェッチされると、データのフェッチに成功したことを示すアラートが開きます。
• ラジオボタンを選択すると、ページ上のリストのフィルターが調整されます。
• ページをロードするとモーダルが開き、Cookie の受け入れを確認してから続行します。

ページまたはコンポーネントのイベントは、イベントが 1 つ以上のイベントハンドラーにマッピングされていない限り、何も実行しません。

イベントハンドラーとイベントをマッピングするには、[構成] パネルの [イベント] タブを使用します。

イベントを展開し、[新しいイベントハンドラーを追加] リンクをクリックして、[イベントハンドラープレビュー] フライアウトを開きます。そのフライアウトで、イベントにマッピングするイベントハンドラーを選択して構成します。この例では、[宛先にリンク] イベントハンドラーが、データの表示方法コンポーネントの [[表示方法] がクリックされました] イベントにマッピングされています。

複数のイベントハンドラーを単一のイベントにマッピングできます。イベントハンドラーは特定の順序で実行されることがなく、同時に実行することもできます。相互に依存するイベントハンドラーを追加しないでください。

イベントハンドラーを編集するには、イベントハンドラーの [編集] アイコン () をクリックします。

イベントハンドラーを削除するには、削除アイコン () をクリックします。

イベントの選択

イベントはコンポーネントごとに異なります。たとえば、データの表示方法コンポーネントには 1 つのイベント [[表示方法] がクリックされました] があります。[リスト - 簡易] コンポーネントには、行または [すべて表示] リンクのクリックとデータのフェッチに関連するイベントがあります。[カレンダー] コンポーネントには、使用可能なイベントが多数あります。[定型化されたテキスト] や [イメージ] などの一部のコンポーネントには、イベントがありません。

コンポーネントのイベントの詳細については、ドキュメントを参照してください。コンポーネントのドキュメントを開くには、コンポーネントの [構成] パネルで [情報] アイコン () をクリックします。フライアウトの [詳細] リンクをクリックします。

または、開発者サイトの Now Experience Components の参照情報からコンポーネントの詳細を検索します。

イベントのドキュメントは、「UIB Setup (UIB のセットアップ)」ページにあります。

ドキュメントの「UIB Setup (UIB のセットアップ)」ページの「Events (イベント)」セクションには、イベントのテーブルと説明があります。この例は、[リスト - 簡易] コンポーネントのイベントを示しています。イベント名は、イベントをトリガーするものを示しますが、ドキュメントでイベントの動作を確認してください。たとえば、[行がクリックされました] イベントの説明は、ユーザーが行の任意の位置ではなく、行の最初のリンクをクリックしたことを示します。

レコードを使用すると、Web エクスペリエンスの表示がより興味深いものになります。この演習では、エクスペリエンスに表示する NeedIt テーブル用のランダムレコードを作成します。

[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールを非アクティブにする

[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールがあると、過去の [必要な場合] フィールド値で [NeedIt] レコードが作成できません。演習のこのパートでは、[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールを非アクティブにするため、過去と将来の両方の [必要な場合] フィールド値を持つ NeedIt レコードを作成できます。

1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。
3. [NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールを非アクティブにします。
   1. Studio で、アプリケーションエクスプローラーを使用して、[サーバー開発 (Server Development)] > [ビジネスルール] > [NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] を開きます。
   2. [アクティブ] 設定フィールドの選択を解除 (オフ) します。
      
      
   3. [更新] ボタンをクリックします。

予定スクリプトの実行を使用した NeedIt レコードの生成

1. Studio で、アプリケーションエクスプローラーを使用して、[サーバー開発 (Server Development)] > [予定スクリプトの実行] > [NeedIt のランダムレコード生成 (Generate Random NeedIt Records)] を開きます。

2. [実行] フィールドの値を調べて、[予定スクリプトの実行] がいつ実行されるかを確認します。

3. スクリプトとスクリプトのコメントを読んで、スクリプトの機能を判断します。

4. まだ設定していない場合は、recordsToMake 変数の値を変更して、 NeedIt レコードを 50 件生成します。

   var recordsToMake = 50;

5. [更新] ボタンをクリックします。

NeedIt レコードの作成

1. ServiceNow ブラウザーのメインウィンドウ (Studio ではない) で、Application Navigator を使用して [NeedIt] > [すべて] を開きます。
2. 既存の NeedIt レコードの数をメモします。インスタンスに NeedIt レコードがない可能性があります。
3. NeedIt レコードを生成します。
   1. Studio に戻ります。
   2. [予定スクリプトの実行] タブで、[今すぐ実行] ボタンをクリックします。
4. レコードが作成されたことを確認します。
   1. ServiceNow (Studio ではない) ブラウザーのメインウィンドウに戻り、ブラウザーの [リフレッシュ] ボタンをクリックして、NeedIt レコードのリストをリフレッシュします。すべての NeedIt レコードが作成されるまで数秒かかることがあります。
   2. 50 件すべての NeedIt レコードが作成されたら、レコードを参照して、予測どおりスクリプトによってフィールド値が設定されたことを確認します。

[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールをアクティブにします。

1. Studio の [NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールタブに戻ります。
2. [アクティブ] 設定フィールドを選択 (オン) します。
3. [更新] ボタンをクリックします。
4. Studio のブラウザータブを閉じます。

NeedIt Experience には、ホームページと [簡易リスト] ページの 2 つのページがあります。ホームページには、期限切れの NeedIt レコードと、今月が期限の NeedIt レコードの数を表示するデータの表示方法があります。この演習では、[期限切れの NeedIt] スコアデータの表示方法がクリックされたときに [簡易リスト] ページを開くイベントマッピングを作成します。テストするために他のユーザーの代理操作を行う必要がないように、Sys Admin home バリアントに更新を適用します。

注意：スコアと色は、環境の NeedIt レコードによって異なります。

デフォルト構成のテスト

演習のこのセクションでは、ホームページを開いて、イベントハンドラーがマッピングされていないデータの表示方法コンポーネントの動作をテストします。

1. ServiceNow ブラウザーのメインウィンドウで Application Navigator を使用して、[NeedIt] > [The NeedIt Experience] を開きます。The NeedIt Experience が新しいブラウザータブで開きます。

2. [期限切れの NeedIt] データの表示方法の <スコア> をクリックします。

   質問：[期限切れの NeedIt] データの表示方法のスコアをクリックすると、何が起こりますか？
   
   回答：[期限切れの NeedIt] データの表示方法のスコアをクリックしても何も起こりません。データの表示方法をインタラクティブに行うためのイベントハンドラーがまだマッピングされていません。

3. Experience のブラウザータブを閉じます。

[[表示方法] がクリックされました] イベントへのイベントハンドラーのマッピング

演習のこのセクションでは、イベントハンドラーを [[表示方法] がクリックされました] イベントにマッピングします。イベントハンドラーにより、[簡易リスト] ページが開きます。

1. 前回の演習で NeedIt アプリケーションを Studio で開いていない場合は、ここで開きます。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
   2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。

2. イベントハンドラーの設定に使用する NeedIt テーブル名をコピーします。

   1. Studio で、アプリケーションエクスプローラーを使用して、[データモデル] > [テーブル] > [NeedIt] を開きます。

      

   2. [名前] の 値をクリップボードにコピーします。

      

3. UI Builder で ホームページの Sys Admin home バリアントを開きます。

   1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
   2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。
   3. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントを選択します。

4. イベントハンドラーを表示方法にマッピングします。

   1. このページの [期限切れの NeedIt] データの表示方法を選択します。

      

   2. [構成] パネルの [イベント] タブを選択します。

   3. [[表示方法] がクリックされました] イベントを展開します。

      注意：必ず、[[使用廃止] [表示方法] がクリックされました] イベントではなく、[[表示方法] がクリックされました] イベントを操作してください。

   4. [新しいイベントハンドラーを追加] リンクをクリックします。

      

   5. [イベントハンドラープレビュー] フライアウトで、[宛先にリンク] イベントハンドラーを選択します。

   6. [宛先にリンク] イベントハンドラーを構成します。

      1. フライアウトの [宛先にリンク (UXR 空白アプリシェル)] セクションで、[宛先を選択 (Select destination)] ボタンをクリックします。

      2. [ナビゲーションの設定] ダイアログの [宛先を選択] で、[アプリルート] を展開し、[簡易リスト] ページを選択します。

      3. [選択されたルート] を宛先に構成します。

         table： <前にコピーしたテーブル名>
         listTitle： 期限切れの NeedIt (Overdue NeedIts)
         listView： Experience_list

      4. [選択されたルート] に使用するクエリを取得します。

         1. ServiceNow ブラウザーのメインウィンドウで Application Navigator を使用して、[NeedIt] > [すべて] を開きます。

         2. リストにフィルターを追加します。

            [アクティブ] [次の値に等しい] [true] AND
            [必要な場合] [次の日より前 (before)] [今日]
            

         3. [実行] ボタンをクリックします。

         4. フィルターブレッドクラムの最後の項目を右クリックし、[クエリのコピー] メニューアイテムを選択します。

            

      5. クエリを追加します。

         1. UI Builder の ブラウザータブに切り替えます。
         2. [ナビゲーションの設定] ダイアログの [クエリ] フィールドに <コピーしたクエリ> を貼り付けます。

      6. [OK] ボタンをクリックします。

      7. [追加] ボタンをクリックします。

   7. [保存] ボタンをクリックし、[開く] ボタンをクリックしてページを表示します。

      

   8. データの表示方法の [期限切れの NeedIt] スコアをクリックし、[期限切れの NeedIt] リストが開くことを確認します。

      

5. Experience のブラウザータブを閉じます。

前の演習では、データの表示方法コンポーネントのイベントで静的な値を使用して、[簡易リスト] ページを開きました。静的な値には制限があります。

• イベントとコンポーネントが同じ値を使用している場合、その値が変更されると、複数の場所で値を更新する必要があります。たとえば、データの表示方法コンポーネントのタイトルは期限切れの NeedIt (Overdue NeedIts) であり、イベントは開いた [簡易リスト] ページに同じタイトルを使用していました。ページ開発者がデータの表示方法コンポーネントのタイトルを変更した場合、コンポーネントと [簡易リスト] ページの整合性を保つために、イベント内のタイトルも変更する必要があります。
• コンポーネントは、ユーザーがコンポーネントを操作する場所に基づいて、異なる情報を渡すことができます。たとえば、要求タイプ別のアクティブな NeedIt (Active NeedIts by Request type) データの表示方法コンポーネントは円グラフです。ユーザーは、クリックするスライスの要求タイプに一致するレコードのリストを期待して、円グラフのスライスをクリックすることがあります。静的なクエリ値では、クリックされたスライスを動的にフィルタリングできません。

データリソースは、ページのコンポーネント用にフェッチするデータを動的に定義します。フィールドのデータバインディングを使用してデータリソースにアクセスします。フィールドで静的な値の代わりにデータバインディングを使用するには、フィールドに @ を入力するか、[動的なデータバインディング] アイコン () をクリックします。

データバインディングはデータリソースオブジェクトにアクセスします。フィールドにバインドするデータリソースオブジェクトを入力するか、選択します。イベントに使用される最も一般的なデータリソースオブジェクトは payload オブジェクトです。payload オブジェクトには、イベントのコンポーネントのプロパティが含まれています。たとえば、データの表示方法コンポーネントのテーブルを使用するには、payload.params.table プロパティをバインドします。

イベントに使用されるその他のデータリソースは次のとおりです。

• コンテキスト：セッションとページのパラメーターを含むページコンテキストデータ
• データ：テーブル、クエリ、または API からのデータ
• ステータス：クライアントステータスパラメーター

注意：データリソースの詳細については、学習モジュール「UI Builder のデータリソース」を参照してください。

この演習では、データの表示方法の値への動的なデータバインディングを使用して、[簡易リスト] ページを開きます。

円グラフからページを開く

演習のこのセクションでは、イベントハンドラーを円グラフの [[表示方法] がクリックされました] イベントにマッピングします。イベントハンドラーにより、[簡易リスト] ページが開きます。開くリストを、クリックした円グラフのスライスに基づいてフィルタリングする必要があります。たとえば、ユーザーが [施設] スライスをクリックした場合、リストにはアクティブな施設の NeedIt レコードが表示される必要があります。

1. 前回の演習で NeedIt アプリケーションを Studio で開いていない場合は、ここで開きます。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
   2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。

2. UI Builder で ホームページの Sys Admin home バリアントを開きます。

   1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
   2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。
   3. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントを選択します。

3. イベントハンドラーを表示方法にマッピングします。

   1. ページで、[要求タイプ別のアクティブな NeedIt] データの表示方法を選択します。

      

   2. [構成] パネルの [イベント] タブを選択します。

   3. [[表示方法] がクリックされました] イベントを展開します。

   4. [新しいイベントハンドラーを追加] リンクをクリックします。

   5. [イベントハンドラープレビュー] フライアウトで、[宛先にリンク] イベントハンドラーを選択します。

   6. [宛先にリンク] イベントハンドラーを構成します。

      1. フライアウトの [宛先にリンク (UXR 空白アプリシェル)] セクションで、[宛先を選択 (Select destination)] ボタンをクリックします。

      2. [ナビゲーションの設定] ダイアログの [宛先を選択] で、[アプリルート] を展開し、[簡易リスト] ページを選択します。

      3. [選択されたルート] を宛先に構成します。

         table： @payload.params.table
         listTitle： @payload.title
         query： @payload.params.query
         listView： Experience_list
         

      4. [OK] ボタンをクリックします。

      5. [追加] ボタンをクリックします。

   7. [保存] ボタンをクリックし、[開く] ボタンをクリックしてページを表示します。

4. イベントハンドラーを確認します。

   注意：ご使用の環境でランダムな NeedIt レコードが生成されています。実際の NeedIt レコードとレコード数は、画像とは異なります。

   1. [要求タイプ別のアクティブな NeedIt (Active NeedIts by Request type)] 円グラフの [法務] スライスをクリックし、[要求タイプ別のアクティブな NeedIt (Active NeedIts by Request type)] リストが開いていることを確認します。

   2. [フィルターパネル] ボタン () をクリックして [フィルター] パネルを開き、リストに要求タイプ = 法務の NeedIt レコードが表示されていることを確認します。

      

   3. ブラウザーの [戻る] ボタンをクリックして、ホームページに戻ります。

   4. [要求タイプ別のアクティブな NeedIt (Active NeedIts by Request type)] 円グラフの [施設] スライスをクリックします。

   5. 開いたリストが、要求タイプ = 施設の NeedIt レコードのみを表示するようにフィルタリングされていることを確認します。

      

5. Experience のブラウザータブを閉じます。

[レコード] ページの作成

演習のこのセクションでは、レコードを表示するページを作成します。

1. UI Builder の [メニュー] メニューを開いて、[ページの作成] メニューアイテムを選択します。

2. [ページの作成] ダイアログでページを構成します。

   ページの名前： レコード (Record)
   ページテンプレート： レコード (Record)
   テンプレートをどのように使用しますか？： テンプレートコンテンツをコピー (フルカスタマイズ可能)
   

3. [作成] ボタンをクリックします。

4. 必須パラメーターを設定します。

   1. [成功 (Success!)] ダイアログで [必須パラメーターを追加] ボタンをクリックします。

   2. [+ 追加] ボタンをクリックします。

   3. 必須パラメーター名 table を入力します。

   4. [+ 追加] ボタンをクリックします。

   5. 必須パラメーター名 sysId を入力します。sysId の大文字 Iに注意してください。必須パラメーターでは大文字と小文字が区別されます。

      

   6. [保存] ボタンをクリックします。

5. [成功！ (Success!)] ダイアログの [完了] ボタンをクリックします。

6. [レコード] ページをテストします。

   1. NeedIt レコードのシステム ID をコピーします。
      1. ServiceNow のメインウィンドウで、Application Navigator を使用して [NeedIt] > [すべて] を開きます。
      2. リスト内の任意のレコードの [数値] の値をクリックします。
      3. フォームヘッダーで、[他のアクション] メニュー () を開いて、[sys_id のコピー] メニューアイテムを選択します。
   2. テスト値を設定します。
      1. UI Builder の ブラウザータブに切り替えます。
      2. UI Builder ヘッダーで [URL] フィールドをクリックします。
      3. [値] ダイアログで値を構成します。
         table： x_58872_needit_needit
         sysId： <NeedIt レコードからコピーしたシステム ID をペースト>
      4. [値] ダイアログを閉じます。
   3. [保存] ボタンをクリックします。
   4. [開く] ボタンをクリックして、[レコード] ページを表示します。
   5. 新しいブラウザータブで、NeedIt レコードが開くことを確認します。レコードが開かない場合は、table と sysId のパラメーター名 (大文字と小文字が区別される) と値が正しいことを確認してください。
   6. Experience のブラウザータブを閉じます。

課題：ホームページのリストから [レコード] ページを開く

演習のこのセクションでは学習した内容を適用して、ホームページ の [すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] コンポーネントの行の第 1 列の値をユーザーがクリックしたときに、[レコード] ページが開くようにします。必ずホームページの Sys Admin home バリアントでの作業を完了してください。

要件：

• ホームページの Sys Admin home バリアントを更新します。
• [行がクリックされました] イベントにイベントハンドラーを追加して、[レコード] ページを開きます。
• リストのペイロードを使用して、[レコード] ページの必須パラメーターを動的に渡します。
• 構成をテストします。

ソリューション：

1. UI Builder で、ホームページの Sys Admin home バリアントに切り替えます。
2. [すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] コンポーネントの [構成] パネルで [イベント] タブを開きます。

3. [宛先にリンク] イベントハンドラーを [行がクリックされました] イベントに追加します。
4. table と sys_id のペイロード値を使用して、[レコード] ページを宛先として設定します。

5. イベントを保存してテストします。

データバインディングを使用すると、開発者はコンポーネントとイベントを動的に設定できますが、データを使用する前にデータの検証または結合が必要な場合はどうなるでしょうか。データバインディングでは、フォーム内での連結や操作ができません。複数のデータバインディングオブジェクトがフィールドに追加されている場合、データバインディングはランタイムで解決されません。

デフォルトでは、フォームを使用してイベントハンドラーを構成しますが、代わりにスクリプトを使用してイベントハンドラーを構成することもできます。

フォームの代わりにスクリプトが必要な場合をよりよく理解するために、Special Occasions アプリケーションの円グラフを考えます。円グラフには、今月発生する行事が、行事タイプ別にグループ化されて表示されます。データバインディングを使用して、開くデータのリストを動的にフィルタリングできますが、データバインディングではリストタイトルを更新してクエリに一致させることができません。円グラフのスライスをクリックすると、円グラフと同じタイトルを持つリストが開きますが、リストは円グラフのスライスと一致するようにフィルタリングされます。ユーザーはフィルターを調べて、どのようなレコードが表示されているのかを判断する必要があります。この例では、ユーザーが勤続記念日 (Work Anniversary) の円グラフのスライスをクリックしてその月の勤続記念日 (Work Anniversary) の行事リストを開くと、今月の行事 (This Month's Occasions) というタイトルが表示されます。

リストのフィルタリングに使用されたクエリに関する詳細を含むように、リストのタイトルを更新するには、スクリプティングが必要です。イベントハンドラーの構成のスクリプティングには、[イベントハンドラープレビュー] フライアウトの [モード] を [スクリプト] に変更します。

スクリプトエディターが開きます。[スクリプト] フィールドには、イベントハンドラーに固有のテンプレートがあります。return ステートメントのプロパティは、イベントハンドラーがフォームで構成されている場合に使用可能なフィールドに対応しています。宛先にリンクイベントハンドラーの場合、選択された [ルート] の必須パラメーターとオプションのパラメーターは、それぞれ fields プロパティと params プロパティにオブジェクトとして渡されます。スクリプトによって返されるオブジェクトは、イベントハンドラーごとに異なります。

スクリプト化されたイベントハンドラーをイベントが実行すると、evaluateEvent 関数が実行されます。スクリプトの evaluateEvent 関数の return ステートメントの前に、ロジックを追加します。

API オブジェクトと event オブジェクトが evaluateEvent 関数に渡されます。フォームモードで使用される payload オブジェクトは、event オブジェクトに含まれています。event.payload を使用して、スクリプト内の payload オブジェクトのプロパティにアクセスします。オブジェクト名の入力を開始して、提案された値を取得します。

return ステートメントのオブジェクトの値を更新して、イベントハンドラーを設定します。この例のスクリプトでは、次のロジックを使用しています。

• 円グラフのスライスからのクエリを使用して、結果リストのタイトルが決定されます。
• special_occasion フィールドの値を特定するには、クエリを解析する必要があります。
• タイトルは、special_occasion フィールドの値によって異なります。
  • 値が work_aniversary の場合、リストのタイトルは「今月の勤続記念日 (This Month's Work Anniversaries)」になります。
  • 値が birthday の場合、リストのタイトルは「今月の誕生日 (This Month's Birthdays)」になります。
• 値は、return ステートメントのオブジェクトで渡されます。

宛先にリンクイベントハンドラーのスクリプトの場合、[ルート] ページの必須パラメーターがオブジェクトとして fields プロパティに渡されます。[ルート] ページのオプションのパラメーターは、オブジェクトとして params プロパティに渡されます。

これで、ユーザーが円グラフのスライスをクリックしたときに、一致するタイトルを持つリストが開くようになります。

開発者向けのヒント：スクリプトを読みやすくするには、スクリプトエディターの [コードをフォーマット] ボタンと [ワードラップを有効にする] 設定を使用します。

[コードをフォーマット] ボタン () は、[スクリプト] フィールドのコードにフォーマットを適用します。

横方向のスクロールを避けるためにコードを折り返すには、[その他のオプション] メニュー () を開き、[ワードラップを有効にする] 設定をオンに切り替えます。

この演習では、[すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] コンポーネントのデータがフェッチされたときのアラートイベントハンドラーをページに追加します。基本的なアラートから始めます。次に、スクリプティングを使用してデータがフェッチされた際に使用されたクエリの詳細を含めるように、イベントハンドラーを更新します。

アラートイベントハンドラーの追加

演習のこのセクションでは、[すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] コンポーネントのデータがフェッチされたときのアラートイベントハンドラーを追加します。

1. 前回の演習で NeedIt アプリケーションを Studio で開いていない場合は、ここで開きます。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
   2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。

2. UI Builder で ホームページの Sys Admin home バリアントを開きます。

   1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
   2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。
   3. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントを選択します。

3. NeedIt レコードが正常にフェッチされたときのアラート通知を追加します。

   1. ページの [すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] を選択します。
   2. [構成] パネルの [イベント] タブを選択します。
   3. [データのフェッチに成功しました] イベントを展開し、[新しいイベントハンドラーを追加] リンクをクリックします。
   4. [イベントハンドラーEvent handler preview] フライアウトで、[アラート通知を追加] イベントハンドラーを選択します。
   5. [情報] アイコン () をクリックして、[アイテム] フィールドのツールヒントを表示します。

   質問：[アイテム] フィールドには何を入力する必要がありますか？
   
   回答：ツールヒントに「通知オブジェクトのアレイ」が表示されます。UI Builder はオブジェクトに JSON フォーマットを使用します。[アラート通知の追加] イベントハンドラーの書式設定の例については、ServiceNow ドキュメントサイトの「Events in UI Builder (UI Builder のイベント)」ページの「Events in UI Builder (イベントハンドラー)」セクションを参照してください。
   

   6. [アイテム] フィールドにカーソルを合わせて [編集] ボタンをクリックします。

      

   7. [アイテム] ダイアログに [{"content": "NeedIt records were fetched successfully."}] (NeedIt レコードが正常にフェッチされました) を入力します。

      質問：オブジェクトの JSON アレイにはどのプロパティと値が返されますか？
      
      回答：オブジェクトの JSON アレイは、content プロパティと値「NeedIt レコードが正常にフェッチされました」を返します。
      

   8. [適用] ボタンをクリックします。

   9. [追加] ボタンをクリックします。

4. [保存] ボタンをクリックします。

5. アラートをテストします。

   1. ページを開きます。

   2. ページがロードされるとすぐにアラート通知が表示されることを確認します。

      

   3. [すべてのアクティブな NeedIt] リストの [必要な場合] 列ヘッダーをクリックして列をソートします。

   質問：[必要な場合] 列でソートするとどうなりますか？
   
   回答：2 番目のアラートがページの上部に表示されます。

   

   ページからアラートをクリアすることはまだできません。また、レコードを再度フェッチしてもアラートは消えません。演習の次のセクションで、イベントを更新して古いアラートをクリアし、既存のアラートをクリアできるようにします。

   3. Experience のブラウザータブを閉じます。

アラートの解除

演習のこのセクションでは、ユーザーが手動でアラートを解除できるようにアラート通知の追加イベントハンドラーを更新します。アラート通知の追加イベントハンドラーは、アラートコンポーネントを使用します。まず、アラートコンポーネントの構成オプションを調べます。

1. アラートコンポーネントの構成オプションを調査します。

   1. アラートコンポーネントのドキュメントを開きます。
   2. ドキュメントの「API」セクションを選択します。
   3. アラートコンポーネントのプロパティを確認します。

   質問：アラートを解除するには、どのプロパティを構成する必要がありますか？
   
   回答：アラートを解除できるようにするには、action プロパティに dismiss の type を設定する必要があります。Items アレイ内で、action プロパティを設定する JSON は次のとおりです。

   "action": { "type": "dismiss" }

   質問：content プロパティに渡すことができる情報のタイプはどれですか？
   
   回答：content プロパティは文字列またはオブジェクトにすることができます。以前は文字列のみを渡していました。オブジェクトを渡すと、オブジェクトは type と value のキーを持ちます。value を HTML 構文でフォーマットするには、type キーを html に設定します。

   "content": { "type": "html", "value": "<span>The <em>formatted</em> text to show in the alert.</span>" }

2. アラート通知の追加イベントハンドラーの設定を変更します。

   1. UI Builder で、ホームページの Sys Admin home バリアントをまだ開いていない場合は開きます。

   2. ページの [すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] を選択します。

   3. [構成] パネルの [イベント] タブを選択します。

   4. [データのフェッチに成功しました] イベントで、アラート通知の追加 (ホーム) イベントハンドラーの [編集] アイコン () をクリックします。

   5. [アイテム] フィールドをクリックして [アイテム] ダイアログを開き、値を編集します。

   6. 既存のアレイをこの新しいアレイで置き換えます。

      [ { "content": { "type": "html", "value": "<span><em>NeedIt</em> records were fetched successfully.</span>" }, "action": { "type": "dismiss" } } ]

   7. [アイテム] ダイアログの [適用] ボタンをクリックします。

   8. [イベントハンドラープレビュー] フライアウトの [適用] ボタンをクリックします。

   9. [保存] ボタンをクリックします。

3. アラートをテストします。

   1. ページをプレビューします。

   2. ページがロードされるとすぐにアラート通知が表示されることを確認します。

      

   3. アラートの [閉じる] ボタン () をクリックして、アラートを閉じます。

   4. [すべてのアクティブな NeedIt] リストの [番号] 列ヘッダーをクリックして列をソートします。アラートが再表示されることを確認します。そのアラートを閉じないでください。

   5. [番号] 列ヘッダーをもう一度クリックして、逆順でソートします。手動でアラートを閉じていない場合、2 番目のアラートが表示されることを確認します。

   6. Experience のブラウザータブを閉じます。

イベントハンドラーのスクリプトの作成

リストデータのフェッチに使用したクエリを含めるように、アラート通知を設定するとします。フォームにクエリを含めるアラートは設定できません。演習のこのセクションでは、スクリプトを使用するようにアラート通知の追加イベントハンドラーを構成します。このスクリプトを使用して、アラートメッセージテキストにクエリを含めます。

1. アラート通知の追加イベントハンドラーの設定を変更します。

   1. UI Builder で、ホームページの Sys Admin home バリアントをまだ開いていない場合は開きます。

   2. ページの [すべてのアクティブな NeedIt のリスト (All Active NeedIts List)] を選択します。

   3. [構成] パネルの [イベント] タブを選択します。

   4. [データのフェッチに成功しました] イベントで、アラート通知の追加 (ホーム) イベントハンドラーの [編集] アイコン () をクリックします。

   5. イベントハンドラーの [モード] 選択リストを開き、[スクリプト] の選択肢を選択します。

      

   6. [その他のオプション] メニュー () を開き、[ワードラップを有効にする] 設定を選択します。

      

   7. スクリプト全体を次のスクリプトで置き換えます。

      /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports */ function evaluateEvent({ api, event }) { // Get the query value from the payload var payloadQuery = event.payload.query; return { items: [{ "content": { "type": "html", "value": "<span><em>NeedIt</em> records were fetched successfully with query <strong>" + payloadQuery + "</strong>.</span>" }, "action": { "type": "dismiss" } }] }; }

      

   8. スクリプトとスクリプトのコメントを読んで、スクリプトの機能を判断します。

   9. [適用] ボタンをクリックします。

   10. [保存] ボタンをクリックします。

2. アラートをテストします。

   1. ページをプレビューします。

   2. ページがロードされるとすぐにアラート通知が表示されることを確認します。そのアラートを閉じないでください。

      

   3. [すべてのアクティブな NeedIt] リストの [番号] 列ヘッダーをクリックして列をソートします。2 番目のアラートとともに、クエリに含まれているソートが表示されることを確認します。

      

      注意：リストで実行したソートによっては、クエリが異なる場合があります。

   4. Experience のブラウザータブを閉じます。

課題：データをフェッチする前にアラートをクリアする

混乱を避けるために、現在のデータフェッチのアラートを追加する前に、前のフェッチのアラートをクリアする必要があります。学習した内容を使用して、データのフェッチに成功しましたイベントが発生する前に、既存のアラートを削除してください。

ソリューション：

回答：データフェッチが要求されましたイベントを使用して、ユーザーが新しいデータフェッチを要求したときにアラートをクリアします。データフェッチが要求されたときにアラートをクリアするために、アラート通知をクリアイベントハンドラーを追加します。

この演習では、学習した内容を他のホームページバリアントに適用します。

NeedIt User home バリアントの更新

NeedIt User home バリアントには、[リスト - 簡易] コンポーネントがあります。学習した内容を使用して、次の操作を行います。

1. [行がクリックされました] イベントの [レコード] ページを開きます。
2. [[すべて表示] がクリックされました] イベントの [簡易リスト] ページを開きます。

バリアントをテストするには、次のことを行います。

1. Beth Anglin が x_58872_needit.needit_user ロールを持つことを確認します。

2. Beth Anglin の代理操作を行います。

3. Application Navigator を使用して、[NeedIt] > [The NeedIt Experience] を開きます。

4. レコード <番号> をクリックして、[行がクリックされました] イベントをテストします。

5. ブラウザーの [戻る] ボタンを使用して、ホームページに戻ります。

6. [すべて表示] リンクをクリックして、[[すべて表示] がクリックされました] イベントをテストします。

   

7. Experience のブラウザータブを閉じます。

NeedIt Admin home バリアントの更新

NeedIt Admin home バリアントには、[データの表示方法] コンポーネントが 3 つ、[リスト - 簡易] コンポーネントが 1 つあります。学習した内容を使用して、次の操作を行います。

1. 各 [データの表示方法] コンポーネントの [簡易リスト] ページを開きます。
2. [行がクリックされました] イベントの [レコード] ページを開きます。
3. [[すべて表示] がクリックされました] イベントの [簡易リスト] ページを開きます。

バリアントをテストするには、次のことを行います。

1. Fred Luddy が x_58872_needit.admin ロールを持つことを確認します。

2. Fred Luddy の代理操作を行います。

3. Application Navigator を使用して、[NeedIt] > [The NeedIt Experience] を開きます。

4. レコード <番号> をクリックして、[行がクリックされました] イベントをテストします。

5. ブラウザーの [戻る] ボタンを使用して、ホームページに戻ります。

6. [すべて表示] リンクをクリックして、[[すべて表示] がクリックされました] イベントをテストします。

   

7. Experience のブラウザータブを閉じます。

8. 完了したら、必ず代理操作を終了してください。

開発者は、GitHub のようなソースコントロールアプリケーションを使用して、個人開発者インスタンス (PDI) の外部で変更をコミット (完了した作業を保存) できます。アプリケーションに対する変更内容をコミットして、作業をソースコントロールに保存します。

この演習では、このモジュールで完了した作業を GitHub リポジトリに保存します。

注意：ServiceNow が開発者プログラムの学習コンテンツで GitHub を使用する方法の詳細と、作業を保存する方法に関するビデオを見るには、『GitHub ガイド』を参照してください。

変更をコミット (Commit Changes)

1. NeedIt アプリケーションが Studio で開かれていない場合は、ここで開きます。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。

   2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。

2. [ソースコントロール] メニューを開き、[変更をコミット] メニューアイテムを選択します。

   

3. コミットする更新を選択します。

   1. [<アプリケーション> のソースコントロールにコミットするファイルを選択] ダイアログで、[すべての Update Sets] を選択します。
   2. コミットするアプリケーションファイルを確認します。
   3. [続行] ボタンをクリックします。
   

4. [NeedIt のソースコントロールにコミットするファイルを確認] ダイアログの [コミットのコメント] に 「UIB イベントモジュール完了」などと入力します。

5. [コミットファイル] ボタンをクリックします。

   

6. [変更をコミット] ダイアログが成功を報告したら、[閉じる] ボタンをクリックします。

   

   注意：変更のコミットに失敗した場合は、フォークしたリポジトリ URL ではなく ServiceNow のリポジトリ URL を [URL] フィールドに入力している可能性があります。GitHub 接続問題のトラブルシューティング方法については、『GitHub ガイド』の 「GitHub 問題のトラブルシューティング」 セクションを参照してください。

「UI Builder のイベント」の理解度をを確認しましょう。自分の進行状況を評価するには、次の質問が役立ちます。質問ごとに回答を決定し、質問の任意の場所をクリックして回答を表示します。

質問：UI Builder のイベントとは何かを最も的確に説明している文は次のどれですか？

1. ServiceNow で、何か注目すべきことが発生したことを示すもの
2. エクスペリエンスのデザイナーと開発者が集まってデザインのアイデアを共有する会議
3. ビジネスサービスに問題が発生したときのアラート
4. ユーザーが実行するアクション、またはページ上で発生する事象
5. ユーザーがページのコンテンツを操作したときに実行されるアクション

回答：正解は 4 です。選択肢はすべて「イベント」のタイプですが、UI Builder のイベントは選択肢 4 のみです。イベントは、ユーザーが実行するアクション、またはページ上で発生する事象です。

---

質問：検索結果コンポーネントのイベントは次のどれですか？コンポーネントのドキュメントを参照してから、回答してください。複数の回答が正解の場合があります。

1. PAGINATION_BUTTON_CLICKED
2. NAVIGATION_EXECUTED
3. SEARCH_EXECUTED
4. VIEW_ALL_CLICKED
5. DECLARATIVE_ACTION

回答：正解は 1、3、5 です。

---

質問：正誤問題？コンポーネントには、イベントハンドラーにマッピングされていないイベントが含まれていてもかまいません。

回答：正解は正しいです。イベントがイベントハンドラーにマッピングされていない場合、そのイベントが発生しても何も起こりません。

---

質問：UI Builder でイベントハンドラーをイベントにマッピングする方法を最も的確に説明している文は次のどれですか？

1. コンポーネントを選択して [イベント] パネルを開き、[イベントハンドラーのマッピング (Map Event Handler)] リンクをクリックして、イベントハンドラーを選択して構成します。
2. コンポーネントを右クリックし、[新しいイベントハンドラーを追加] メニューアイテムを選択し、イベントハンドラーを選択して構成します。
3. Flow Designer で UI Builder イベントトリガーを使用するフローを作成し、アクションを追加します。
4. コンポーネントのイベント登録にイベントを追加し、アクションのスクリプトを作成します。
5. イベントを選択して [新しいイベントハンドラーを追加] リンクをクリックし、イベントハンドラーを選択して構成します。

回答：正解は 5 です。[構成] パネルの [イベント] タブでイベントを選択し、[新しいイベントハンドラーを追加] リンクをクリックして、イベントハンドラーを選択して構成します。

---

質問：イベントハンドラーを動的に設定するために使用されるものは次のどれですか？

1. ドット連結
2. データバインディング
3. クライアントステータスパラメーター
4. データソース
5. データピル

回答：正解は 2 です。データリソースにアクセスするには、動的なデータバインディングを使用します。

---

質問：ユーザーが操作するコンポーネントからの情報を含むオブジェクトは次のどれですか？

1. payload
2. context
3. event
4. data
5. state

回答：正解は 1 です。context オブジェクトには、ページとセッションに関する情報が含まれます。event オブジェクトには、イベント関連の情報が含まれます。data オブジェクトはデータリソースインスタンスにアクセスします。state オブジェクトは、クライアントステータスパラメーターにアクセスします。

---

質問：インスタンスで、[イベントハンドラー] ダイアログを開きます。デフォルトのイベントハンドラーは次のどれですか？複数の回答が正解の場合があります。

1. 宛先にリンク
2. アラート通知を追加
3. [表示方法] がクリックされました
4. クライアントステータスパラメーターを更新
5. 行がクリックされました

回答：正解は 1、2、4 です。[表示方法] がクリックされましたおよび行がクリックされましたはイベントであり、イベントハンドラーではありません。

コアコンセプト：

• イベントは、ユーザーが実行するアクション、またはページ上で発生する事象です。
• イベントハンドラーは、イベントが発生したときに実行されるアクションです。
• イベントマッピングは、イベントハンドラーをイベントに追加するプロセスです。
• データバインディングは、データリソースを使用してイベントハンドラー構成を動的にします。
  • payload オブジェクトには、コンポーネント構成の詳細が含まれます。
  • context オブジェクトには、ページとセッションの詳細が含まれます。
• 複数のデータリソースを結合するとき、またはデータを検証するときのイベントハンドラーのスクリプトを作成します。
• Now Experience コンポーネントライブラリには、コンポーネントとイベントのドキュメントがあります。