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

• クライアント側インタラクションの定義
• クライアントステータスパラメーターの作成
• イベントハンドラーによるクライアントステータスパラメーターの更新
• 複数のアクションをグループ化する、処理されるイベントの作成
• クライアントスクリプトの適用による、ページへのインタラクティブ機能の追加

この学習モジュールは、UI Builder を使用したページとイベントの操作方法に精通していることを前提としています。

• ページの作成
• ページバリアントの作成
• ページへのコンテナーとコンポーネントの追加
• コンポーネントの構成
• イベントへのイベントハンドラーのマッピング

ページの作成の詳細については、学習モジュール「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. 分岐を構成します。

   分岐名： UIBCSIModule
   タグから作成： LoadForUIBCSIModule

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

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

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

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

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

LoadForUIBCSIModule タグなしで分岐を作成

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

1. 分岐を構成します。

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

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

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

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

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

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

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

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

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

      

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

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

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

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

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

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

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

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

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

      

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

   5. UIB クライアント側インタラクション用ファイルのコミットコメントを追加します。

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

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

Web ベースのアプリケーションでは、ブラウザーで行われる処理はすべてクライアント側で実行されます。クライアント側インタラクションは、ユーザーがクリックしてエクスペリエンスコンポーネントを操作するときに発生します。クライアント側インタラクションの例は次のとおりです。

• ボタンのクリック
• フィルターの適用
• リストのソート
• リストの更新
• インライン検索結果の提供
• 不完全または不正確なデータのユーザーへのアラート生成

ユーザーは、他のページに移動するためにページを操作することがあります。他には、ユーザーはページのコンテンツ、外観、またはデータを更新することがあります。クライアント側インタラクションでは、ページ全体が更新されるのではなく、ページの影響を受ける部分のみ更新されます。

たとえば、ユーザーは列ヘッダーをクリックしてリストをソートできます。ソートすると、ページ全体ではなくリストのみが再描画されます。

UI Builder のクライアント側インタラクションを作成するのに必要なものは次のとおりです。

• クライアントステータスパラメーター
• イベント
• クライアントスクリプト

注意：この学習モジュールは、イベント、イベントハンドラー、およびイベントハンドラーをイベントにマッピングする方法について理解していることを前提としています。UI Builder のイベントの詳細については、学習モジュール「UI Builder のイベント」を参照してください。

クライアントステータスパラメーターはページ変数です。クライアントステータスパラメーターを定義して構成し、値を使用してコンポーネントを構成します。クライアントステータスパラメーターは、ページコンポーネントの構成値の管理を一元化します。

例として、ページに colorというクライアントステータスパラメーターがあるとします。3 つのコンポーネントのうち 2 つは、color クライアントステータスパラメーターを使用するように構成されています。color が orange に設定されている場合、コンポーネントはオレンジ色になります。color が purple に設定されている場合、コンポーネントは紫色になります。color が green に設定されている場合、コンポーネントは緑色になります。クライアントステータスパラメーターは、ページの共通の値を管理する単一の場所です。クライアントステータスパラメーターがないと、値を使用する各コンポーネントは、その値が変更された場合に個別に更新する必要があります。

たとえば、Web エクスペリエンスでは、コンポーネントによって使用されるプライマリ色が color クライアントステータスパラメーターに保存されます。コンポーネントがクライアントステータスパラメーターを使用するように構成されている場合、クライアントステータスパラメーターの値を変更すると、コンポーネントが新しい値に更新されます。

エクスペリエンスにボタンを追加して、ユーザーがページコンポーネントの色を選択できるようにすることができます。ユーザーは 1 回のクリックで、ページ上のすべてのコンポーネントの色を同時に変更できます。ユーザーの色の選択をクライアントステータスパラメーターに保存してから、クライアントステータスパラメーターを使用してページのコンポーネントを構成します。ユーザーのインタラクションによってクライアントステータスパラメーターの値が変更されると、ページのコンポーネントがリアルタイムで更新されます。

デフォルトでは、[クライアントステータス] パネルは折りたたまれています。アイコンバーの [クライアントステータス] アイコン () をクリックして、[クライアントステータス] パネルを開きます。

[クライアントステータス] パネルには、次の 2 つのセクションがあります。

• クライアントステータスパラメーター：ページのクライアントステータスパラメーター
• クライアントステータスのプレビュー：ページのクライアントステータスパラメーターの JSON

クライアントステータスパラメーターをページに追加するには、[クライアントステータスパラメーター] セクションの [+ 追加] ボタンをクリックします。

クライアントステータスパラメーターには、3 つの構成フィールドがあります。

• 名前：パラメーターの名前です。名前にスペースを含めることはできません。
• タイプ：パラメータータイプです。
  • 文字列
  • 番号
  • ブーリアン
  • JSON
• 初期値：パラメーターのデフォルト値。

この例では、[クライアントステータス] パネルに 2 つのクライアントステータスパラメーターがあります。

• occasionTypeQuery は String で、デフォルト値はありません。
• occasionListTitle は String で、デフォルト値は All Special Occasions です。

クライアントステータスパラメーターを作成したら、それを使用して何ができるのでしょうか。クライアントステータスパラメーターを使用するには、まずクライアントステータスパラメーターの値をコンポーネント構成にバインドします。クライアントステータスパラメーターの値が変更されると、コンポーネントは新しい値を使用するように更新されます。クライアントステータスパラメーターの値を変更する 1 つの方法として、イベントハンドラーがあります。

「クライアントステータスパラメーターの作成」ページの例では、2 つのクライアントステータスパラメーター (occasionTypeQuery と occasionListTitle) を Special Occasions アプリケーションに追加しました。occasionTypeQuery パラメーターにはデフォルトでは値がなく、occasionListTitle のデフォルト値は All Special Occasions です。これらのクライアントステータスパラメーターは、[行事リスト (Occasion List)] コンポーネントに適用され、リストのタイトルとフィルターを設定します。ボタンを使用してこれらのクライアントステータスパラメーターの値が更新され、リストが動的に更新されます。

クライアントステータスパラメーターのバインディング

クライアントステータスパラメーターの値は、ページコンテキスト、ペイロード、およびデータリソースと同じ方法でコンポーネント構成フィールドにバインドできます。コンポーネントを構成するときには、フィールドにカーソルを合わせて [動的なデータバインディング] ボタン () を選択し、クライアントステータスパラメーターをフィールド値にバインドします。この例では、[動的なデータバインディング] ボタンが、[行事リスト (Occasion List)] コンポーネントの [フィルター] フィールドで強調表示されています。

文字 @ はデータバインディングを示しており、state オブジェクトにはクライアントステータスパラメーターが含まれています。選択リストからクライアントステータスパラメーターを選択します。次の例は、occasionTypeQuery クライアントステータスパラメーターを選択しているところを示しています。occasionTypeQuery クライアントステータスパラメーターのデフォルト値は空であるため、デフォルトではフィルターは適用されません。

コンポーネントのタイトルも同様の方法で設定できます。[タイトル] フィールドで [動的なデータバインディング] ボタンを選択するか、「@」と入力して、選択リストから state.occasionListTitle クライアントステータスパラメーターを選択します。occasionListTitle クライアントステータスパラメーターのデフォルト値は、All Special Occasions です。次の例は、[タイトル] と [フィルター] の両方がクライアントステータスパラメーターを使用するように構成されていることを示しています。

どちらにもクライアントステータスパラメーターが適用されている場合、リストにフィルターは適用されず、タイトルは All Special Occasions になります。

occasionTypeQuery および occasionListTitle クライアントステータスパラメーターの値は、ユーザーがクライアントステータスパラメーターの値を変更するコンポーネントを操作するまで変更されません。

クライアントステータスパラメーター値の変更

ランタイムのクライアントステータスパラメーターの値を変更するには、[クライアントステータスパラメーターを更新] イベントハンドラーを使用します。[クライアントステータスパラメーターを更新] イベントハンドラーには、更新するクライアントステータスパラメーターと、クライアントステータスパラメーターに使用する新しい値の 2 つのプロパティがあります。

例として、Special Occasions アプリケーションの [行事リスト (Occasion List)] コンポーネントの上に [誕生日] ボタンが追加されています。このボタンの目的は、リストの [タイトル] を [すべての誕生日 (All Birthdays)] に変更し、誕生日のみが表示されるようにリストのフィルターを調整することです。この目的を達成するため、2 つのイベントハンドラーがボタンの [クリックしたボタン] イベントにマッピングされます。1 つは occasionTypeQuery クライアントステータスパラメーターを変更し、もう 1 つは occasionListTitle クライアントステータスパラメーターを変更します。次の図は、[クライアントステータスパラメーターを更新] イベントハンドラーが、occasionTypeQuery クライアントステータスパラメーターを special_occasion=birthday に設定するよう構成されていることを示しています。この場合、リストがフィルタリングされ、誕生日のみが表示されます。

[クリックしたボタン] イベントが、occasionTypeQuery および occasionListTitle クライアントステータスパラメーターの両方を更新するイベントハンドラーにマッピングされている場合、ボタンをクリックするとクライアントステータスパラメーターが更新され、 [行事リスト (Occasion List)] コンポーネントが新しい値で自動的に更新されます。

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

注意：完了した他の学習モジュールによっては、既に NeedIt レコードを生成している可能性があります。開いている NeedIt レコードのリストを表示するには、Application Navigator を使用して [NeedIt] > [すべて] を開きます。ステータス値と要求タイプが異なる NeedIt レコードが少なくとも 50 件ある場合は、この演習をスキップできます。

[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 のブラウザータブを閉じます。

この演習では、クライアントステータスパラメーターとイベントハンドラーを使用して、 ホームページの Sys Admin home バリアントにある [すべてのアクティブな NeedIt (All Active NeedIts)] リストをインタラクティブにフィルタリングします。

フィルター用の折りたたみ可能なコンテナーの追加

演習のこのセクションでは、リストフィルターを格納する折りたたみ可能なコンテナーを追加して構成します。

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 (All Active NeedIts)] リストを選択します。

   2. [前に追加 (Add before)] ボタンをクリックして、リストの上にコンポーネントを追加します。

      

   3. [コンポーネント] フライアウトから、[折りたたみ可能なコンテナー] コンポーネントを選択します。

   4. コンポーネントのラベルと ID を更新します。

      1. ページの [すべてのアクティブな NeedIt (All Active NeedIts)] リストを選択します。
      2. [構成] パネルで、[コンポーネントのラベルと ID を編集] ボタン () をクリックします。
      3. コンポーネントの詳細を設定します。
         コンポーネントラベル： リストオプション
         コンポーネント ID： list_options
      4. [適用] ボタンをクリックします。

   5. [構成] パネルの [構成] タブで折りたたみ可能コンテナーコンポーネントを構成します。

      ラベル： リストオプション
      折りたたみ： 有効

      注意：[折りたたみ (Collapsed)] プロパティは、折りたたみ可能なコンテナーコンポーネントのデフォルトのステータスを設定します。コンテナーは、ページ上のコンポーネントを操作するためにページで展開できますが、折りたたみ可能なコンテナーコンポーネント上のコンポーネントは、[ページ] パネルの [コンテンツ] セクションからの方が簡単にアクセスできます。

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

クライアントステータスパラメーターの作成

演習のこのセクションでは、リストフィルターとリストタイトルのクライアントステータスパラメーターを作成します。次に、[すべてのアクティブな NeedIt (All Active NeedIts)] リストコンポーネント構成のデータバインディングを更新して、クライアントステータスパラメーターを参照します。[すべてのアクティブな NeedIt (All Active NeedIts)] リストコンポーネントのラベルと ID も変更します。選択したフィルターに応じて異なる NeedIt レコードがリストに表示されるためです。

注意：この学習モジュールの演習では、アラートを使用して、[すべてのアクティブな NeedIt (All Active NeedIts)] リスト コンポーネントがデータをフェッチするたびにレコードの取得に使用されるクエリを表示します。[リスト - 簡易] コンポーネントには、レコードのリストに適用されたフィルターが表示されないため、アラートはクエリを表示するのに便利な方法です。アラートの作成方法の詳細については、「UI Builder のイベント」学習モジュールの「演習：スクリプトイベントハンドラー」を参照してください。

1. UI Builder で、アイコンバーの [クライアントステータス] アイコン () をクリックします。

2. [クライアントステータス] パネルの [クライアントステータスパラメーター] セクションで [+ 追加] ボタンをクリックします。

3. リストクエリクライアントステータスパラメーターを作成します。

   名前： listQuery
   タイプ： 文字列
   初期値： active=true

4. このプロセスを繰り返して、リストタイトルクライアントステータスパラメーターを作成します。

   名前： listTitle
   タイプ： 文字列
   初期値： アクティブな NeedIt (Active NeedIts)
   

5. UI Builder ヘッダーにある [保存] ボタンをクリックします。

6. アイコンバーの [クライアントステータス] アイコンをクリックして、[クライアントステータス] パネルを開きます。

7. [すべてのアクティブな NeedIt (All Active NeedIts)] リストコンポーネントのラベルと ID を変更します。

   1. ページの [すべてのアクティブな NeedIt (All Active NeedIts)] リストを選択します。
   2. [構成] パネルで、[コンポーネントのラベルと ID を編集] ボタン () をクリックします。
   3. コンポーネントの詳細を設定します。
      コンポーネントラベル： NeedIt リスト
      コンポーネント ID： needits_list
   4. [適用] ボタンをクリックします。

8. クライアントステータスパラメーターを使用するようにNeedIt リストコンポーネントを更新します。

   1. コンポーネントタイトルを更新します。

      1. [構成] パネルの [構成] タブで、[タイトル] フィールドの [動的なデータバインディング] アイコン () をクリックします。

      2. [タイトル] フィールドを @state.listTitle にバインドします。

         

   2. コンポーネントクエリを更新します。

      1. [構成] パネルの [構成] タブで、[フィルター] フィールドの [動的なデータバインディング] アイコンをクリックします。

      2. [フィルター] フィールドを @state.listQuery にバインドします。

         

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

10. NeedIt リストコンポーネント構成をテストします。

    1. [開く] ボタンをクリックして、ホームページを表示します。

    2. NeedIt リストコンポーネントのタイトルが、listTitle クライアントステータスパラメーターのタイトル「アクティブな NeedIt (Active NeedIts)」と一致することを確認します。

    3. ページ上部のアラートのクエリが active=true であることを確認します。

       

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

承認待ち NeedIt (NeedIts Awaiting Approval) を表示するボタンの作成

演習のこのセクションでは、クライアントステータスパラメーターを更新するボタンを作成します。クライアントステータスパラメーターが更新されると、リストも更新されます。作成したボタンをクリックすると、承認待ちの NeedIt レコードがリストに表示されます。

1. 承認待ち NeedIt (NeedIts Awaiting Approval) を表示するボタンを作成します。

   1. [ページ] パネルの [コンテンツ] セクションで、リストオプションコンポーネントの [メイン] スロットにある [コンポーネントを追加] リンクをクリックします。

      

   2. [コンポーネント] フライアウトから、ボタンコンポーネントを選択します。

   3. コンポーネントのラベルと ID を更新します。

      1. [構成] パネルで、[コンポーネントのラベルと ID を編集] ボタン () をクリックします。
      2. コンポーネントの詳細を設定します。
         コンポーネントラベル： [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタン
         コンポーネント ID： needits_awaiting_approval_button
      3. [適用] ボタンをクリックします。

   4. ボタンのプロパティを設定します。

      ラベル： 承認待ち NeedIt (NeedIts Awaiting Approval)
      ツールヒントラベル： 承認が必要な NeedIt レコードを表示します

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

   6. イベントハンドラーを [クリックしたボタン] イベントにマッピングします。

      1. 使用するクエリを取得します。

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

         2. リストフィルターを更新して、[ステータス] [次の値に等しい] [承認待ち] となっているレコードを表示します。

            

         3. [実行] ボタンをクリックして、フィルターを適用します。後で比較できるように、クエリに一致するレコードの数をメモしておきます。

         4. [ステータス = 承認待ち]フィルターブレッドクラムを右クリックし、[クエリのコピー] メニューアイテムを選択します。

            

      2. イベントハンドラーをマッピングし、listQuery クライアントステータスパラメーターを更新します。

         1. UI Builder で、ページの [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンが選択されていることを確認します。

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

         3. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。

         4. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。

         5. イベントハンドラーを設定します。

            クライアントステータスパラメーター名： listQuery
            新しい値： <前にコピーしたクエリをペースト>

            質問：state=14 はどういう意味ですか？
            
            回答：[ステータス] 選択リストで [承認待ち] に選択されている値は 14 です。
            

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

      3. イベントハンドラーをマッピングし、listTitle クライアントステータスパラメーターを更新します。

         1. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。
         2. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。
         3. イベントハンドラーを設定します。
            クライアントステータスパラメーター名： listTitle
            新しい値： 承認待ち NeedIt (NeedIts Awaiting Approval)
         4. [追加] ボタンをクリックします。

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

2. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンをテストします。

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

   2. [リストオプション (List Options)] 折りたたみ可能コンテナーを展開します。

   3. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンをクリックします。

   4. ボタンが機能したことを確認します。

      1. ページ上部のアラートで、クエリ state=14 によってレコードがフェッチされたことを確認します。
      2. リストのタイトルが「承認待ち NeedIt (NeedIts Awaiting Approval)」であることを確認します。
      3. レコードの数が、[ステータス] [次の値に等しい] [承認待ち] フィルターを適用したときに記録したレコードの数と一致することを確認します。
      

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

アクティブな NeedIt (Active NeedIts) レコードを表示するボタンの作成

演習のこのセクションでは、NeedIt リストコンポーネントにアクティブな NeedIt (Active NeedIts) (NeedIt リストコンポーネントのデフォルト) を表示するボタンを作成します。

1. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンの前にアクティブな NeedIt (Active NeedIts) レコードを表示するボタンを作成します。

   1. UI Builder で、ページの [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンが選択されていることを確認します。

      注意：リストオプションコンポーネントがページ上で折りたたまれている場合、[承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンは選択されていても表示されないことがあります。

   2. コンポーネントオプションメニュー () を開き、[前にコンポーネントを追加] メニューアイテムを選択します。

      

   3. [コンポーネント] フライアウトから、ボタンコンポーネントを選択します。

   4. コンポーネントのラベルと ID を更新します。

      1. [構成] パネルで、[コンポーネントのラベルと ID を編集] ボタンをクリックします。
      2. コンポーネントの詳細を設定します。
         コンポーネントラベル： アクティブな NeedIt ボタン (Active NeedIts Button)
         コンポーネント ID： active_NeedIt_button
      3. [適用] ボタンをクリックします。

   5. ボタンのプロパティを設定します。

      ラベル： アクティブな NeedIt (Active NeedIts)
      ツールヒントラベル： アクティブな NeedIt (Active NeedIts) レコードを表示

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

2. イベントハンドラーを [クリックしたボタン] イベントにマッピングします。

   1. イベントハンドラーをマッピングし、listQuery クライアントステータスパラメーターを更新します。
      1. [構成] パネルで [イベント] タブを選択します。
      2. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。
      3. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。
      4. イベントハンドラーを設定します。
         クライアントステータスパラメーター名： listQuery
         新しい値： active=true
      5. [追加] ボタンをクリックします。
   2. イベントハンドラーをマッピングし、listTitle クライアントステータスパラメーターを更新します。
      1. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。
      2. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。
      3. イベントハンドラーを設定します。
         クライアントステータスパラメーター名： listTitle
         新しい値： アクティブな NeedIt (Active NeedIts)
      4. [追加] ボタンをクリックします。
   3. [保存] ボタンをクリックします。

3. [アクティブな NeedIt (Active NeedIts)] ボタンをテストします。

   1. [開く] ボタンをクリックして、ページを表示します。[アクティブな NeedIt (Active NeedIts)] リスト内の NeedIt レコードの数をメモしておきます。
   2. [リストオプション (List Options)] 折りたたみ可能コンテナーを展開します。
   3. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンをクリックし、リストが [承認待ち NeedIt (NeedIts Awaiting Approval)] に変わることを確認します。
   4. [アクティブな NeedIt (Active NeedIts)] ボタンをクリックし、リストが [アクティブな NeedIt (Active NeedIts)] リストに戻ることを確認します。
   5. Experience のブラウザータブを閉じます。

課題：クローズ済み NeedIt (Closed NeedIt) レコードを表示するボタンの作成

このセクションでは、学習した内容を活かしてクローズ済み NeedIt (Closed NeedIt) レコードを表示するボタンを作成します。ボタンを作成したら、ページ上に水平に表示されるようにボタンのレイアウトを調整します。

1. クローズ済み NeedIt (Closed NeedIt) レコードを表示するボタンを作成します。[承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンの後にボタンを追加します。

   コンポーネントラベル： クローズ済み NeedIt (Closed NeedIt) ボタン
   コンポーネント ID： closed_NeedIt_button
   ラベル： クローズ済み NeedIt (Closed NeedIt)
   ツールヒントラベル： クローズ済み NeedIt (Closed NeedIt) レコードを表示
   ボタンをクリックした後のリストタイトル： クローズ済み NeedIt (Closed NeedIt)

   質問：listQuery クライアントステータスパラメーターに使用する値をどのように決定できますか？
   
   回答：すべての NeedIt レコードのリストを開き、表示するレコードにフィルターを適用した後、フィルターブレッドクラムコンテキストメニューからクエリをコピーします。この場合、[ステータス] が [完了してクローズ] であるレコードのフィルターです。

2. ボタンのレイアウトを調整します。

   1. [ページ] パネルの [コンテンツ] セクションで、[リストオプション (List Options)] コンテナーの [メイン] スロットを選択します。
   2. [構成] パネルでスロット構成を更新します。
      フレックス方向： 行
      コンテンツの位置揃え： 間隔
   3. [保存] ボタンをクリックします。

3. [クローズ済み NeedIt (Closed NeedIt)] ボタンをテストします。

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

   2. [リストオプション (List Options)] 折りたたみ可能コンテナーを展開します。

   3. [クローズ済み NeedIt (Closed NeedIt)] ボタンをクリックします。

   4. ページ上部のアラートで、クエリ state=3 によってレコードがフェッチされたことを確認します。

   5. リストのタイトルが「クローズ済み NeedIt (Closed NeedIt)」であることを確認します。

      

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

処理されるイベントは、カスタムイベントハンドラーを作成するために使用されるラッパーです。処理されるイベントを作成すると、処理されるイベントは、イベントハンドラーをマッピングできるページイベントになります。

処理されるイベントは、どのように使用するのでしょうか？処理されるイベントは、イベントハンドラーとしてコンポーネントイベントにマッピングできます。

処理されるイベントのペイロードフィールドを使用して、イベントから、処理されるイベントにマッピングされたイベントハンドラーに値を渡します。この例では、処理されるイベントに 2 つのペイロードフィールドがあります。処理されるイベントの 1 つのインスタンスのペイロード値は緑と紫であり、処理されるイベントにマッピングされたイベントハンドラーはこれらの値を使用します。処理されるイベントの他のインスタンスのペイロード値はオレンジと黄色です。この場合も、処理されるイベントにマッピングされたイベントハンドラーはペイロード値を使用します。

処理されるイベントは、1 つのイベントに対して複数のアクションを実行する場合に便利です。たとえば、前の演習では、複数のイベントハンドラーを各ボタンの [クリックしたボタン] イベントにマッピングしました。処理されるイベントでは、単一のイベントハンドラーを使用して、複数のクライアントステータスパラメーターを更新できます。処理されるイベントのペイロードフィールドを使用して、処理されるイベントにマッピングされたイベントハンドラーに値を渡すことができます。次の図では、クリックしたボタンイベントは元々 2 つのイベントハンドラーにマッピングされていました。処理されるイベントフォルダーを使用すると、各クリックしたボタンイベントが処理されるイベントにマッピングされます。処理されるイベントに渡された値は、マッピングされたイベントハンドラーに伝播されます。

追加のメリットとして、処理されるイベントによって実行されたアクションを更新する必要がある場合、処理されるイベントにマッピングされたすべてのイベントが自動的に更新されます。たとえば、処理されるイベントによって 2 つのイベントハンドラーが実行され、開発者が 3 つ目のイベントハンドラーを追加する場合、処理されるイベントに追加のイベントハンドラーをマッピングできます。新しいイベントハンドラーにコンポーネントイベントからの入力が必要な場合を除き、処理されるイベントイベントハンドラーにマッピングされたイベントを変更する必要はありません。

ページ Body の [構成] パネルの [イベント] タブを使用して、処理されるイベントを作成および設定します。

処理されるイベントを作成するには、[イベント] タブの [処理されるイベント] セクションで [+ 追加] ボタンをクリックします。

[イベントを作成] ダイアログで、処理されるイベントを構成します。

• イベントラベル：イベントの分かりやすい説明
• イベント名：プラットフォームによって使用されるイベントの自動生成名
• ペイロードフィールド：イベントハンドラーとして使用されるときに、処理されるイベントによって受け入れられる入力値
  • 名前：プラットフォームによって使用されるイベントの名前。処理されるイベントとペイロード値をバインドするデータとのインタラクションのスクリプト作成時に使用されます。
  • ラベル：処理されるイベントをイベントハンドラーとして設定するときにユーザーに表示されるペイロードフィールドの分かりやすい説明
  • タイプ：ペイロードフィールドに格納される情報のタイプ
  • インターフェイス API 名：詳細設定オプション (この学習モジュールの対象外です)

処理されるイベントを使用する方法は、次のとおりです。

1. イベントハンドラーを処理されるイベントにマッピングします。
2. 処理されるイベントを、イベントハンドラーとしてコンポーネントイベントにマッピングします。

処理されるイベントへのイベントハンドラーのマッピング

イベントハンドラーを処理されるイベントにマッピングし、処理されるイベントが呼び出されるときにアクションを実行します。

処理されるイベントは、Body 分岐の [構成] パネルの [イベント] タブにある [ページイベントマッピング] セクションに表示されます。

[新しいイベントハンドラーを追加] リンクをクリックして、他のタイプのイベントと同様に、処理されるイベントにイベントハンドラーを追加します。

payload オブジェクトを使用して、処理されるイベントのペイロードフィールドをイベントハンドラーに渡します。この例では、処理されるイベントの newQuery ペイロードフィールドが occasionTypeQuery クライアントステータスパラメーターに渡されます。

イベントハンドラーとしての処理されるイベントのマッピング

処理されるイベントは、イベントハンドラーとしてイベントにマッピングすることによって呼び出されます。

処理されるイベントがイベントハンドラーとして選択されている場合、ペイロードフィールドを使用してイベントハンドラーが構成されます。

ユーザーが [勤続記念日] ボタンをクリックすると、ペイロード値が処理されるイベントに渡された後、クライアントステータスパラメーターを更新するイベントハンドラーにペイロード値が渡されます。結果は、2 つの別々のイベントハンドラーがある場合と同じですが、必要なイベントハンドラーは 1 つだけです。

たとえば、前の演習では、2 つのイベントハンドラーを各ボタンの [クリックしたボタン] イベントにマッピングしました。この演習では、処理されるイベントを作成します。その後、処理されるイベントを単一のイベントハンドラーとして構成し、両方のクライアントステータスパラメーターを更新します。

処理されるイベントの作成

演習のこのセクションでは、処理されるイベントを作成し、複数のクライアントステータスパラメーターの更新を単一のイベントハンドラーに結合します。

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. [ページ] パネルの [コンテンツ] セクションで、Body 分岐を選択します。

      

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

   3. [処理されるイベント] セクションの [+ 追加] ボタンをクリックします。

   4. [イベントの作成] ダイアログで、[イベントラベル] を「リストクエリとタイトルの更新」に設定します。

   5. 処理されるイベントにペイロードフィールドを追加します。

      1. [ペイロードフィールド] セクションで、[+ 追加] ボタンをクリックします。
      2. ペイロードフィールドを構成します。
         名前： heListQuery
         ラベル： リストクエリ
      3. 2 番目のペイロードフィールドを追加します。
         名前： heListTitle
         ラベル： リストタイトル

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

4. イベントハンドラーを処理されるイベントに追加します。

   1. [ページイベントマッピング] セクションで、処理されたイベント「リストクエリとタイトルの更新」の [新しいイベントハンドラーを追加] リンクをクリックします。

      

   2. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。

      1. イベントハンドラーを設定します。
         クライアントステータスパラメーター名： listQuery
         新しい値： @payload.heListQuery
      2. [追加] ボタンをクリックします。

   3. イベントハンドラーをマッピングし、listTitle クライアントステータスパラメーターを更新します。

      1. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。
      2. [イベントハンドラープレビュー] フライアウトで、[クライアントステータスパラメーターを更新] イベントハンドラーを選択します。
      3. イベントハンドラーを設定します。
         クライアントステータスパラメーター名： listTitle
         新しい値： @payload.heListTitle
      4. [追加] ボタンをクリックします。

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

処理されるイベントの使用

演習のこのセクションでは、この学習モジュールの前の手順でマッピングしたボタンイベントハンドラーを新しい処理されるイベントに置き換えます。

1. [すべてのアクティブな NeedIt (All Active NeedIts)] ボタンを更新します。

   1. [ページ] パネルの [コンテンツ] セクションで、階層内の[アクティブな NeedIt ボタン (Active NeedIts Button)]コンポーネントを選択します。

   2. [構成] パネルの [イベント] タブで、各クライアントステータスパラメーターの更新 (ホーム) イベントハンドラーの 削除アイコン () をクリックし、[イベントハンドラーを削除] ダイアログの [削除] ボタンをクリックします。

      

   3. [ボタンがクリックされました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。

   4. [イベントハンドラープレビュー] フライアウトで、リストクエリとタイトルの更新イベントハンドラーを選択します。

      1. イベントハンドラーを設定します。
         リストクエリ： active=true
         リストタイトル： アクティブな NeedIt (Active NeedIts)

      質問：イベントハンドラーのリストクエリおよびリストタイトルパラメーターはどこから取得されますか？
      
      回答： リストクエリとリストタイトルは、処理されるイベントのペイロードフィールドです。
      

2. プロセスを繰り返して、[承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンを更新します。

   リストクエリ： state=14
   リストタイトル： 承認待ち NeedIt (NeedIts Awaiting Approval)

3. プロセスを繰り返して、[クローズ済み NeedIt (Closed NeedIt)] ボタンを更新します。

   リストクエリ： state=3
   リストタイトル： クローズ済み NeedIt (Closed NeedIt)

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

5. ボタンをテストします。

   1. [開く] ボタンをクリックして、ページを表示します。
   2. 各ボタンをテストして、NeedIt リストコンポーネントのクエリとタイトルが正常に更新されることを確認します。

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

クライアントステータスパラメーターと処理されるイベントにより、開発者はページ上のクライアントエクスペリエンスを制御できるようになりますが、一部のインタラクションには追加のロジックが必要です。解決策はクライアントスクリプトです。クライアントスクリプトは、イベントを通じてクライアントステータスを更新するために使用される JavaScript です。

クライアントスクリプトを使用すると、値を使用する前にイベントペイロードまたはクライアントステータスパラメーター値を調整できます。たとえば、ラジオボタンを使用してリストをフィルタリングするようにページが構成されているとします。ラジオボタンの値は、[誕生日]、[勤続記念日]、および [すべて] です。クライアントスクリプトは、これらの値をクエリに追加してから、

ユーザーがリスト上のフィルターを変更するラジオボタンをオンにした場合、ラジオボタンの値は、リストのクエリ全体ではなく、ユーザーが選択した特定の値を渡します。クライアントステータスパラメーターを直接更新する代わりに、ラジオボタンの値がスクリプトに渡され、値がクエリに追加されます。その後、スクリプトはクエリのクライアントステータスパラメーターを更新してリストを更新します。

クライアントスクリプトの別のユースケースとして、特定の順序で複数のロジックステップを実行できます。イベントに複数のイベントハンドラーがある場合、イベントハンドラーは特定の順序で実行されることがなく、同時に実行することもできます。イベントハンドラーのロジックが、別のイベントハンドラーの完了に依存することはありません。クライアントスクリプトは、複数のイベントハンドラーを、特定の順序で実行する必要があるロジックに置き換えることができます。

デフォルトでは、[クライアントスクリプト] パネルは折りたたまれています。アイコンバーの [クライアントステータス] アイコン () をクリックして、[クライアントスクリプト] パネルを開きます。

[クライアントスクリプト] パネルには、次の 3 つのセクションがあります。

• ページスクリプト：選択したページのクライアントスクリプト
• 詳細： [ページスクリプト] セクションで選択されたスクリプトの名前とその他の構成オプション
• スクリプト：スクリプト

クライアントスクリプトをページに追加するには、[ページスクリプト] セクションの [+ 追加] ボタンをクリックします。

スクリプトに名前を付け、handler 関数にコードを追加します。handler 関数は、クライアントスクリプトがイベントハンドラーとして呼び出されたときに実行されます。

スクリプトインクルードおよび関連コンポーネントは、この学習モジュールの対象範囲外となる高度なトピックです。

クライアントスクリプトで使用される最も一般的なプロパティは、クライアントステータスパラメーター、ページコンテキスト値、およびイベントペイロードの詳細を取得します。

• api.state.<clientStateParameter>：指定された <clientStateParameter> の値にアクセスします。
• event.payload.<payloadValue>：指定された <payloadValue> にイベントからアクセスします。
• api.context.props.<pageParameter/>：必須またはオプションの <pageParameter/> の値にアクセスします。
• api.context.session./<sessionProperty>：指定された /<sessionProperty> の値にアクセスします。

クライアントスクリプトで使用される最も一般的なメソッドは、クライアントステータスパラメーター値を設定します。

• api.setState('<clientStateParameter>', '<newValue>)：<newValue> に指定された <clientStateParameter> を設定します。

クライアントスクリプトで使用可能なプロパティとメソッドの詳細なリストについては、UI Builder API のドキュメントを参照してください。

この例では、行事のフィルタークライアントスクリプトは、イベントペイロードから value 値を取得し、その値を使用してクエリを更新します。値が all の場合、フィルターは不要であるため、スクリプトは occasionTypeQuery クライアントステータスパラメーターを空白値に設定します。その他の値の場合、スクリプトは値を文字列 special_occasion= に追加して完全なクエリを作成し、occasionTypeQuery クライアントステータスパラメーターをクエリ値に設定します。

クライアントスクリプトは、イベントハンドラーとしてイベントにマッピングすることによって呼び出されます。クライアントスクリプトには構成フィールドがありません。スクリプトにより使用されるすべての値は、スクリプト自体に含められます。

ユーザーが [勤続記念日] ラジオボタンをクリックすると、行事のフィルタースクリプトが実行され、occasionTypeQuery クライアントステータスパラメーターとリストが更新されます。

この演習では、折りたたみ可能なコンテナーにラジオボタンコンポーネントを追加して、ユーザーが要求タイプでフィルター処理できるようにします。次に、クライアントスクリプトを作成して、ページ上のリストのクエリとタイトルを更新します。

ラジオボタンコンポーネントの追加

演習のこのセクションでは、折りたたみ可能なコンテナーにラジオボタンコンポーネントを追加して、ユーザーが要求タイプ値を選択してリストに表示できるようにします。また、ラジオボタンコンポーネントによって返されるペイロードを確認するクライアントスクリプトも作成します。

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. リストオプションコンポーネントを更新して、2 行のレイアウトを使用します。

   1. [ページ] パネルの [コンテンツ] セクションで、階層内のリストオプションコンポーネントを選択します。コンポーネントには、3 つのボタンがある [メイン] スロットしかない点に注意してください。

   2. [構成] パネルの [レイアウト] タブで、 [2 列] のレイアウトを選択します。

      

   3. [レイアウトの変更内容を確認] ダイアログで、[適用] ボタンをクリックします。

   質問：レイアウトを変更すると、[メイン] スロットにあった 3 つのボタンはどこに移動しますか？
   
   回答：[メイン] スロットにあった 3 つのボタンは、[行 1] スロットに配置されます。
   

   4. [構成] パネルで [行 1] スロット構成を選択して更新します。
      フレックス方向： 行
      コンテンツの位置揃え： 間隔

4. ラジオボタンコンポーネントをリストオプションコンポーネントの [行 2] スロットに追加します。

   1. [ページ] パネルの [コンテンツ] セクションで、[行 2] スロットの [+ コンポーネントを追加] リンクをクリックします。

   2. ラジオボタンコンポーネントを見つけて選択します。

   3. ラジオボタンコンポーネントのラベルと ID を更新します。

      1. [構成] パネルで、[コンポーネントのラベルと ID を編集] ボタンをクリックします。
      2. コンポーネントの詳細を設定します。
         コンポーネントラベル： 要求タイプラジオボタン
         コンポーネント ID： request_type_ration_buttons
      3. [適用] ボタンをクリックします。

   4. 要求タイプラジオボタンコンポーネントを構成します。

      ラベル： 表示する要求タイプ：
      選択したオプション： すべて
      レイアウト： 水平
      識別子： reqType

   5. [オプション] フィールドをクリックします。

   6. 次のアレイをコピーして [オプション] ダイアログに貼り付けます。

      [ { "id": "all", "label": "All", "checked": true }, { "id": "legal", "label": "Legal" }, { "id": "facilities", "label": "Facilities" }, { "id": "hr", "label": "Human Resources" } ]

      QUESTION: アレイは、コンポーネントに含まれるラジオボタンの数を定義します。このアレイはいくつのラジオボタンを作成しますか？ラジオボタンのラベルは何ですか？デフォルトのラジオボタンはどのラジオボタンですか？
      
      回答：アレイは 4 つのラジオボタン [すべて]、[法務]、[施設]、[人事] を作成します。[すべて] ラジオボタンがデフォルトとして構成されます。
      

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

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

      質問：ラジオボタンコンポーネントで利用できるイベントはどれですか？
      
      回答：ラジオボタンコンポーネントには、次の 2 つのイベントがあります。

      1. ラジオボタン値が設定されました
      2. ラジオボタンの無効が設定されました

      [構成] パネルの [イベント] タブを表示するか、ラジオボタンコンポーネントのドキュメントを表示して、コンポーネントで利用可能なイベントを確認できます。

5. コンポーネントのペイロードを表示するクライアントスクリプトを作成します。

   1. アイコンバーで、[クライアントスクリプト] アイコン () をクリックします。

   2. [ページスクリプト] セクションで、[+ 追加] ボタンをクリックします。

   3. [詳細] セクションで、[スクリプト名] を「ペイロードオブジェクトをコンソールに書き込み (Write payload object to console)」に設定します。

   4. この行をコピーして、スクリプトフィールドの handler 関数に貼り付けます。

      // Write the JSON payload of a component to the // browser's console as a string console.log(JSON.stringify(event.payload,null,4));

      

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

   6. [クライアントスクリプト] アイコンをクリックして、[クライアントスクリプト] パネルを閉じます。

6. クライアントスクリプトを使用して、要求タイプラジオボタンコンポーネントのペイロードを表示します。

   1. スクリプトをイベントハンドラーとしてマッピングします。
      1. ページで要求タイプラジオボタンコンポーネントが選択されていることを確認します。
      2. [構成] パネルで [イベント] タブを選択します。
      3. [ラジオボタン値が設定されました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。
      4. [イベントハンドラープレビュー] フライアウトで、[ペイロードオブジェクトをコンソールに書き込み (Write payload object to console)]イベントハンドラーを選択します。
      5. [追加] ボタンをクリックします。
      6. [保存] ボタンをクリックします。
   2. クライアントスクリプトをテストします。

      1. [開く] ボタンをクリックします。

      2. ブラウザーのコンソールを開きます。詳細については、ブラウザーのドキュメントを参照してください。

      3. [リストオプション (List Options)] 折りたたみ可能コンテナーを展開します。

      4. [法務] ラジオボタンを選択します。

      5. コンソールでペイロード出力を表示します。

         質問：ラジオボタンコンポーネントのペイロードは何ですか？
         
         回答：ラジオボタンコンポーネントは、name と value の 2 つのキーを持つオブジェクトを出力します。

         

         name キーの値は reqType です。これは、ラジオボタンコンポーネント構成の識別子です。name は、どのラジオボタンがオンになっていても同じになります。

         value キーの値は legal です。これは、オンになっているラジオボタンの値です。

         value は、後ほどクライアントスクリプトで使用します。

      6. 他のオプションを試して、出力を確認してください。

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

リストを更新するクライアントスクリプトの作成

演習のこのセクションでは、ページ上のリストのクエリとタイトルを動的に構成するクライアントスクリプトを作成します。このスクリプトは、リストオプションコンテナー内のボタンとラジオボタンの両方で機能します。スクリプトでは、リストクエリとタイトルの更新イベントのペイロードフィールドを使用します。次に、スクリプトをリストクエリとタイトルの更新イベントのイベントハンドラーとしてマッピングします。

1. クライアントスクリプトを作成して、リストのクエリとタイトルを生成します。

   1. アイコンバーで、[クライアントスクリプト] アイコン () をクリックします。

   2. [ページスクリプト] セクションで、[+ 追加] ボタンをクリックします。

   3. [詳細] セクションで、[スクリプト名] を「クエリとタイトルの生成 (Generate query and title)」に設定します。

   4. 既存のスクリプトテンプレートを次のスクリプトに置き換えます。

      /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({ api, event, helpers, imports }) { // Script overview: Get current client state parameter values and // update the values with the selected Request type // filter information // Get current client state parameter values var cspListQuery = api.state.listQuery; var cspListTitle = api.state.listTitle; // Clear Request type from existing query by splitting on the parameter // in the encoded query var cspListQueryArray = cspListQuery.split('^u_request_type='); // Clear Request type from existing title var cspListTitleArray = cspListTitle.split(' - '); // Get payload from handled event var passedQuery = event.payload.heListQuery; var passedTitle = event.payload.heListTitle; // Check to see if a Request type is passed in the payload // A Request type is passed when a radio button is selected if (passedQuery == 'legal' || passedQuery == 'facilities' || passedQuery == 'hr') { // If a Request type is passed, update the query and title to reflect // the selected Request type api.setState('listQuery', cspListQueryArray[0] + '^u_request_type=' + passedQuery); api.setState('listTitle', cspListTitleArray[0] + ' - ' + passedQuery); } else if (passedQuery == 'all') { // If the All radio button is selected, remove the Request type from // the query api.setState('listQuery', cspListQueryArray[0]); api.setState('listTitle', cspListTitleArray[0]); } else { // Else just pass the values passed to the event handler // This branch runs when filter buttons are clicked api.setState('listQuery', passedQuery); api.setState('listTitle', passedTitle); } }

   5. スクリプトを調べて、何をするスクリプトかを理解します。

      質問：クライアントステータスパラメーターの値を設定するために使用されるメソッドはどれですか？
      
      回答：クライアントステータスパラメーターの値を設定するには、api.setState() メソッドが使用されます。
      

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

   7. [クライアントスクリプト] パネルを閉じます。

2. リストクエリとタイトルの更新イベントマッピングを更新します。
   1. [ページ] パネルの [コンテンツ] セクションで、Body 分岐を選択します。
   2. [構成] パネルの [イベント] タブをクリックします。
   3. 各リストクエリとタイトルの更新イベントハンドラーの [削除] アイコン () をクリックし、[イベントハンドラーを削除] ダイアログの [削除] ボタンをクリックします。
   4. リストクエリとタイトルの更新イベントの [新しいイベントハンドラーを追加] リンクをクリックします。
   5. [イベントハンドラープレビュー] フライアウトで、[クエリとタイトルの生成 (Generate query and title)]イベントハンドラーを選択します。
   6. [追加] ボタンをクリックします。
   7. [保存] ボタンをクリックします。
3. イベントハンドラーを要求タイプラジオボタンコンポーネントにマッピングします。

   1. ページパネルの [コンテンツ] セクションで、階層内の要求タイプラジオボタンコンポーネントを選択します。

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

   3. [ラジオボタン値が設定されました] イベントの [+ 新しいイベントハンドラーを追加] リンクをクリックします。

   4. [イベントハンドラープレビュー] フライアウトで、リストクエリとタイトルの更新イベントハンドラーを選択します。

   5. イベントハンドラーを設定します。

      リストクエリ： @payload.value

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

      質問：クライアントスクリプトで使用するには、ボタンコンポーネントのイベントを更新する必要がありますか？
      
      回答：いいえ。ボタンコンポーネントは、前の演習の処理されるイベント「リストクエリとタイトルの更新」で動作するように既に設定されています。処理されるイベントのペイロードは変更されておらず、スクリプトは処理されるイベントからペイロードを動的にプルします。
      

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

4. 更新されたイベントをテストします。

   1. [開く] ボタンをクリックします。

   2. [リストオプション (List Options)] コンテナーを展開します。

   3. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンをクリックします。

   4. リストのタイトルが「承認待ち NeedIt (NeedIts Awaiting Approval)」であり、クエリが state=14 であることを確認します。

      

   5. [法務] ラジオボタンを選択します。

   6. リストのタイトルが「承認待ち NeedIt (NeedIts Awaiting Approval) - 法務」であり、クエリが state=14^u_request_type=legal であることを確認します。

      

   7. [クローズ済み NeedIt (Closed NeedIt)] ボタンをクリックします。タイトルとクエリが変化してすべてのクローズ済み NeedIt (Closed NeedIt) レコードが表示されていますが、ラジオボタンは引き続き [法務] がオンになっている点に注目してください。

      

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

要求タイプフィルターの永続化

リストとラジオボタンの混同を避けるために、ユーザーがボタンをクリックしてリストクエリとタイトルを更新するときに、選択した要求タイプを適用したままにします。このフィルターを永続化するには、クライアントステータスパラメーターを作成し、クライアントステータスパラメーターが使用されるようにクライアントスクリプトを更新します。このスクリプトを機能させるには、ユーザーが別のラジオボタンを選択したときに reqType クライアントステータスパラメーターを更新し、ボタンを押したときにパラメーターをクエリに適用する必要があります。

1. これまで学習した内容を利用して、クライアントステータスパラメーターを作成します。
   名前： reqType
   タイプ： 文字列
   初期値： all
2. クライアントスクリプトを更新します。

   1. [クエリとタイトルの生成 (Generate query and title)] クライアントスクリプトを開きます。

   2. 既存のスクリプトを次のスクリプトに置き換えます。

      /** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({ api, event, helpers, imports }) { // Script overview: Get current client state parameter values and // update the values with the selected Request type // filter information // Get current client state parameter values var cspListQuery = api.state.listQuery; var cspListTitle = api.state.listTitle; // Clear Request type from existing query by splitting on the parameter // in the encoded query var cspListQueryArray = cspListQuery.split('^u_request_type='); // Clear Request type from existing title var cspListTitleArray = cspListTitle.split(' - '); // Get payload from handled event var passedQuery = event.payload.heListQuery; var passedTitle = event.payload.heListTitle; // Check to see if a Request type is passed in the payload // A Request type is passed when a radio button is selected if (passedQuery == 'legal' || passedQuery == 'facilities' || passedQuery == 'hr') { // If a Request type is passed, update the query and title to reflect // the selected Request type api.setState('listQuery', cspListQueryArray[0] + '^u_request_type=' + passedQuery); api.setState('listTitle', cspListTitleArray[0] + ' - ' + passedQuery); // Update the reqType client state parameter value to the selected Request type api.setState('reqType', passedQuery); } else if (passedQuery == 'all') { // If the All radio button is selected, remove the Request type from // the query api.setState('listQuery', cspListQueryArray[0]); api.setState('listTitle', cspListTitleArray[0]); // Update the reqType client state parameter value to all api.setState('reqType', 'all'); } else { // Else just pass the values passed to the event handler // This branch runs when filter buttons are clicked // If the Request type value is something besides all, persist the value // in the query and the title by appending the reqType value if (api.state.reqType != 'all'){ passedQuery = passedQuery + '^u_request_type=' + api.state.reqType; passedTitle = passedTitle + ' - ' + api.state.reqType; } api.setState('listQuery', passedQuery); api.setState('listTitle', passedTitle); } }

   3. スクリプトをレビューして更新を確認します。

      質問：更新されたスクリプトで reqType クライアントステータスパラメーターをどのように使用しますか？
      
      回答：ラジオボタンの値がオンの場合、reqType クライアントステータスパラメーターの値がラジオボタンの値に設定されます。ボタンが押されると、スクリプトは reqType クライアントステータスパラメーターの値をチェックします。値が all 以外の場合、値はクエリとタイトルに追加されます。

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

3. 更新されたイベントをテストします。

   1. [開く] ボタンをクリックします。

   2. [リストオプション (List Options)] コンテナーを展開します。

   3. [承認待ち NeedIt (NeedIts Awaiting Approval)] ボタンをクリックします。

   4. リストのタイトルが「承認待ち NeedIt (NeedIts Awaiting Approval)」であり、クエリが state=14 であることを確認します。

   5. [人事] ラジオボタンを選択します。

   6. リストのタイトルが「承認待ち NeedIt (NeedIts Awaiting Approval) - 人事」であり、クエリが state=14^u_request_type=hr であることを確認します。

      

   7. [クローズ済み NeedIt (Closed NeedIt)] ボタンをクリックします。

   8. リストのタイトルが「クローズ済み NeedIt (Closed NeedIt) - 人事」であり、クエリが state=3^u_request_type=hr であることを確認します。

      

   9. [すべて] ラジオボタンを選択し、リストにすべてのクローズ済み NeedIt (Closed NeedIt) レコードが表示されることを確認します。

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

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

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

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

変更をコミット (Commit Changes)

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

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

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

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

   

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

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

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

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

   

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

   

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

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

質問：クライアント側インタラクションを作成するために使用されるのは次のうちどれですか？複数の回答が正解の場合があります。

1. クライアントスクリプト
2. GlideRecord
3. イベント
4. ページパラメーター
5. クライアントステータスパラメーター

回答：正解は 1、3、5 です。クライアントステータスパラメーター、イベント、およびクライアントスクリプトは、動的なユーザーエクスペリエンスを作成するために使用されます。GlideRecord はサーバー側の API であり、ページパラメーターは便利ですが、クライアント側インタラクションの作成に使用されるツールではありません。

---

質問：クライアントステータスパラメーターの作成と構成に使用されるパネルはどれですか？

1. ページ
2. データリソース
3. クライアント側インタラクション
4. クライアントステータス
5. クライアントスクリプト

回答：正解は 4 です。

---

質問：正誤問題？ページに作成されたクライアントステータスパラメーターは、エクスペリエンス内の他のすべてのページで使用できます。

回答：正解は誤りです。クライアントステータスパラメーターは、それらが作成されるページのバリアントに固有です。

---

質問：処理されるイベントの使用方法を説明する文は次のどれですか？

1. スクリプトを記述する
2. イベントハンドラーとしてマッピングする
3. 処理されるイベントを呼び出すコンポーネントを選択する
4. URL でパラメーターを渡す
5. 処理されるイベントは、ページが読み込まれたときに実行される

回答：正解は 2 です。処理されるイベントは、実行するイベントハンドラーとしてコンポーネントイベントにマッピングされます。

---

質問：処理されるイベントを使用するメリットは次のうちどれですか？

1. 処理されるイベントのイベントハンドラーが変更された場合、処理されるイベントにマッピングされたイベントを更新する必要はありません。
2. 処理されるイベントは、特定の順序で複数のイベントハンドラーを実行できます。
3. ユーザーがページ上で何らかの項目を移動する場合、処理されたイベントを使用する必要があります。
4. 処理されるイベントを使用すると、コンポーネントごとに単一のイベントハンドラーマッピングを使用して、複数のコンポーネントに対して複数のイベントハンドラーを実行できます。
5. 処理されるイベントは、他のアプリケーションからデータリソースにアクセスできます。

回答：正解は 1 と 4 です。特定の順序で実行する必要があるロジックを実行するには、スクリプトが必要です。

---

質問：スクリプトで myCSP と呼ばれるクライアントステータスパラメーターの値にアクセスするために使用されるプロパティとメソッドは次のうちどれですか？

1. event.payload.myCSP
2. api.getState(#singleQuotemyCSP#singleQuote)
3. api.state.myCSP
4. event.state.myCSP
5. api.helper.state.myCSP

回答：正解は 3 です。クライアントステータスパラメーターには、api.state でアクセスします。

コアコンセプト：

• クライアント側インタラクションは、ユーザーがページ全体を再ロードすることなくコンポーネントを操作すると、ページのセクションを更新する
• クライアント側インタラクションは次のもので構成されている
  • クライアントステータスパラメーター
  • イベント
  • クライアントスクリプト
• クライアントステータスパラメーターは、ページ上のコンポーネントを構成するために使用されるページ変数である
• イベントは、クライアントステータスパラメーターを更新してページを動的にするイベントハンドラーにマッピングできる
• 処理されるイベントは、1 つ以上のイベントハンドラーのラッパーとして機能するカスタムイベントである
• 処理されるイベントは、イベントハンドラーとしてイベントにマッピングされたときに実行される
• クライアントスクリプトは、ページ上のクライアントステータスパラメーターを操作するために使用される
• クライアントスクリプトロジックは、handler 関数に配置される
• クライアントスクリプトは通常、次のプロパティとメソッドを使用してクライアントステータスパラメーターおよびペイロード情報とやり取りする
  • api.state.<clientStateParameter>
  • event.payload.<payloadValue>
  • api.context.props.<pageParameter/>
  • api.context.session./<sessionProperty>
  • api.setState('<clientStateParameter>', '<newValue>)
• クライアントスクリプトは、イベントハンドラーとしてイベントにマッピングされたときに実行される