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

• データリソースの定義
• 基本データリソースからのデータリソースインスタンスの作成
• データリソースの構成
• コンポーネントへのデータリソースのバインド
• データリソースの作成と使用

この学習モジュールは、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. 分岐を構成します。

   分岐名： UIBDataResourcesModule
   タグから作成： LoadForUIBDataResourcesModule

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

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

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

LoadForUIBDataResourcesModule タグなしでの分岐の作成

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

1. 分岐を構成します。
   分岐名： UIBDataResourcesModuleUpdateSet
   タグから作成： 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. [コミットファイル] ボタンをクリックします。

データリソースは、ページのコンポーネント用にフェッチするデータを定義します。データリソースを使用すると、ハードコードされたコンポーネント構成からデータフェッチを切り離すことができます。データを動的にフェッチすると、エクスペリエンスとユーザーの両方がデータにアクセスできる限り、複数のページやエクスペリエンス間でコンポーネントが再利用可能になります。

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

[データリソース] パネルには、次の 3 つのセクションがあります。

• データリソースインスタンス：エクスペリエンスの一部を構成するデータリソース
• 構成/イベント：エクスペリエンス用に構成されたデータリソースとイベント
• プレビュー：データリソースによって返された情報の JSON

データリソースには、次のものがあります。

• クライアント側またはサーバー側
• 継承またはローカル

クライアント側とサーバー側の違い

データリソースは、クライアント側またはサーバー側のいずれかにすることができます。クライアント側のデータリソースは、ドメイン固有のステータス、ユーザー初期設定、ユーザーセッションデータなどのクライアント情報を返すクライアントステータスマネージャーです。サーバー側のデータリソースは、テーブルレコードのリスト、GlideRecord クエリ、アプリケーションプロパティなどのデータを ServiceNow インスタンスから取得します。

継承とローカルの違い

継承されたデータリソースは、特定の UI Builder ページに追加されませんが、現在のページとデータリソースの定義場所との関係によって使用できます。たとえば、データリソースはアプリケーションシェルまたは親ページから継承できます。ローカルデータリソースは、UI Builder のページに直接追加されます。

既存のデータリソースをページに追加するには、[データリソースインスタンス] セクションの [+ 追加] ボタンをクリックします。

[データリソース] フライアウトで、アプリケーションを選択します。セキュリティ権限があれば、任意のアプリケーションのデータリソースを任意のページに追加できます。一般的に使用されるデータリソースの多くは、グローバルアプリケーションの一部です。

データリソースは、ローカルデータリソースインスタンスとして追加されます。

データリソースを追加すると、[構成] セクションと [プレビュー] セクションにエラーが表示されます。UI Builder は、データリソースが追加されたときにその評価を試みます。データリソースが構成されるまで、エラーは残ります。

[データリソースインスタンス] セクションで、構成するデータリソースインスタンスを選択します。[構成/イベント] セクションの [構成] タブを選択します。

データリソースインスタンスごとに、わかりやすいラベルと ID を指定します。[ラベルと ID を編集] アイコン () をクリックします。[データブローカーの詳細 (Data broker details)] ダイアログの [データブローカーラベル (Data broker label)] フィールドと [データブローカー ID (Data broker ID)] フィールドに値を入力し、[適用] ボタンをクリックします。

注意：データブローカーは、データリソースの別名です。

データリソースインスタンスの構成を続行します。構成フィールドは、選択したデータリソースインスタンスによって異なります。この例の自分の勤続記念日 (My Work Anniversary) データリソースは、 行事 (Occasion) テーブルをクエリし、現在ログインしているユーザーの勤続記念日を返すように設定されています。

[プレビュー] セクション

[プレビュー] セクションには、データリソースインスタンスによって返された JSON が動的に表示されます。JSON の構造と内容は、データリソースインスタンスのタイプによって異なります。一部の JSON プロパティはハードコードされています。データリソースインスタンスの構成によって、JSON プロパティに追加したり、 他のプロパティの値を変更したりすることができます。この例では、すべてのデータルックアップレコードインスタンスに対して _row_data プロパティと number プロパティが返されます。[フィールドを返す] 構成フィールドによって、occasion_date プロパティが追加されています。

この演習では、レコードを検索データリソースを NeedIt アプリケーションに追加します。データリソースは、現在ログインしているユーザーが要求元である次の NeedItレコードを返します。

準備 - NeedIt レコードの更新または作成

作成するデータリソースには、システム管理者が要求元であり、必要な場合が将来の日付である NeedIt レコードが必要です。

1. ServiceNow ブラウザーのメインウィンドウ (Studio または UI Builder ではない) で、Application Navigator を使用して [NeedIt] > [オープン] を開きます。
2. NeedIt レコードのリストを調べます。リストをカスタマイズして、[要求元] フィールドおよび [必要な場合] フィールドを含める必要がある場合があります。
3. 次の条件を満たす 2 つのレコードを探します。条件を満たすレコードがない場合は、既存のレコードを更新するか、レコードを作成します。
   1. レコード 1：
      要求元： システム管理者
      必要な場合： <約 1 週間後の日付>
   2. レコード 2：
      要求元： システム管理者
      必要な場合： <約 1 か月後の日付>
4. [必要な場合] が約 1 週間先の日付である NeedIt レコードのレコード番号をメモします。

ページへのデータリソースの追加

演習のこのセクションでは、NeedIt Experience の Sys Admin home バリアントにレコードを検索データリソースを追加します。

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. UI Builder の [データリソース] パネルを開くには、アイコンバーの [データリソース] アイコン () をクリックします。

4. レコードを検索データリソースを追加します。

   1. [データリソースインスタンス] セクションの [+ 追加] ボタンをクリックします。

   2. [データリソース] フライアウトで、Global アプリケーションを選択します。

   3. レコードを検索データリソースを選択します。

      

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

   質問：データリソースの [構成/イベント] および [プレビュー] セクションにエラーがあるのはなぜですか？
   回答：UI Builder は、追加したデータリソースのデータをロードしようとしました。レコードを検索データリソースがまだ構成されていないため、UI Builder はロードするデータを認識しません。エラーは無視してかまいません。

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

レコードを検索データリソースの構成

演習のこのセクションでは、次の NeedIt レコードを検索するようにレコードを検索データリソースを構成します。データリソースは [必要な場合] フィールドを使用して、[要求元] の値が現在ログインしているユーザーである次の NeedIt レコードを返します。

1. データリソースのラベルと ID を変更します。

   1. [構成] セクションで、[ラベルと ID を編集] アイコン () をクリックします。

   2. [データブローカーの詳細 (Data broker details)] ダイアログで、ラベルと ID を構成します。

      データブローカーラベル： 自分の次の NeedIt (My Next NeedIt)
      データブローカー ID： my_next_needit
      

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

2. [構成] セクションで、他の [データリソース] フィールドを構成します。

3. テーブル：NeedIt

4. 結果の最大数：1

5. [フィールドを返す] フィールドをクリックし、選択リストから [必要な場合] を選択します。

6. [フィールドを返す] フィールドに、[システム ID]、[簡単な説明]、および [数値] の 3 つのフィールドを追加します。

   

7. [プレビュー] セクションを確認します。JSON には返された単一のレコードが表示されていることがわかります。

8. データリソース構成に条件を追加します。

9. [条件] フィールドの [条件を編集] ボタンをクリックします。

10. [条件] ダイアログで、条件 [アクティブ] [次の値に等しい ] [true] を追加します。

11. [and] ボタンをクリックし、2 番目の条件 [要求元] [次の条件に一致] [自分] を追加します。

12. [and] ボタンをクリックし、3 番目の条件 [必要な場合] [後] [今日] を追加します。

    

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

14. [プレビュー] セクションを確認します。JSON で返されるレコードは、この演習の「準備 - NeedIt レコードの更新または作成」セクションでメモしたレコードである必要があります。必要なプロパティ _row_data と [フィールドを返す] のフィールドフィールドが JSON に含まれていることを確認します。

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

データのバインドとは、情報を表示する UI 要素にデータを関連付けるプロセスです。

この例では、[定型化されたテキスト] コンポーネントの [テキスト] フィールドをデータリソースにバインドする方法を示します。ページには、[定型化されたテキスト] コンポーネントが 2 つあります。1 つのコンポーネントには、ハードコードされたテキスト「自分の勤続記念日：」が含まれています。2 番目の [定型化されたテキスト] コンポーネントはデータリソースを使用して、ログインしているユーザーの勤続記念日を表示します。

コンポーネントを構成するときには、フィールドにカーソルを合わせて [動的なデータバインディング] ボタン () を選択し、データリソースをフィールド値にバインドします。

文字 @ はデータバインディングを示します。選択リストからデータリソースを選択します。この例は、自分の勤続記念日データリソースを選択していることを示しています。フィールドのバインドされたデータの装飾 () は、フィールド値がバインドされていることを示します。

デフォルトでは、データリソース (results) によって返される JSON オブジェクト全体がフィールドに渡されます。

返された JSON 内から特定のプロパティ値にドット連結するには、ピリオド (ドット) 文字を入力するかフィールドの最後をクリックし、選択リストから選択します。特定のプロパティ値を取得したり、値を表示したりするには、ドット連結を数回行う必要がある場合もあります。

これで、ページの [定型化されたテキスト] コンポーネントが自分の勤続記念日データリソースにバインドされました。[定型化されたテキスト] コンポーネントの値は動的に決定されます。コンポーネントには、[行事の日付] フィールドの表示値が含まれています。

この演習では、レコードヘッダーコンポーネントを Sys Admin Home バリアントに追加します。[自分の次の NeedIt (My Next NeedIt)] データリソースをレコードヘッダーコンポーネントにバインドします。

レコードヘッダーコンポーネントの追加

演習のこのセクションでは、NeedIt Experience の Sys Admin home バリアントにレコードヘッダーコンポーネントを追加します。

1. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントが選択されていることを確認します。

2. [コンテンツ] セクションで、[Next NeedIt] コンテナーの [メイン] スロットにある [+ コンポーネントを追加] リンクをクリックします。

   

3. [コンポーネント] フライアウトで、[レコードヘッダー] コンポーネントを検索して追加します。

   

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

レコードヘッダーコンポーネントの構成

演習のこのセクションでは、レコードヘッダー 1 コンポーネントを構成します。[自分の次の NeedIt (My Next NeedIt)] データリソースをコンポーネントにバインドします。

1. コンポーネント名を変更します。
   1. [構成] タブで、[コンポーネントのラベルと ID を編集] アイコン () をクリックします。
   2. [コンポーネントの詳細] ダイアログで、ラベルと ID を構成します。
      コンポーネントラベル： 自分の次の NeedIt レコード (My Next NeedIt Record)
      コンポーネント ID： my_next_needit_record
   3. [適用] ボタンをクリックします。
2. 追加のコンポーネントフィールドを構成します。
   テーブル： NeedIt
   プライマリ値： 自分の次の NeedIt (My Next NeedIt)
3. [システム ID] フィールドを [自分の次の NeedIt (My Next NeedIt)] データリソースの sys_id プロパティ値にバインドします。
   1. [システム ID] フィールドをクリックし、[動的なデータバインディング] ボタン () を選択します。
   2. 選択リストを使用して @data.my_next_needit.results を選択します。
      
   3. [システム ID] フィールドの最後をクリックするか、キーボードからピリオド文字を入力して、@data.my_next_needit.results.0 を選択します。
   4. @data.my_next_needit.results.0.sys_id.value まで、ドット連結するプロセスを繰り返します。
4. [サブ見出し] フィールドを @data.my_next_needit.results.0.u_when_needed.value にバインドします。
5. [保存] ボタンをクリックします。
6. ページのステージにある自分の次の NeedIt レコード (My Next NeedIt Record) コンポーネントを確認します。コンポーネントは、現在ログインしているユーザーの次の NeedIt レコードの日付を動的に表示する必要があります。

Glide フォームデータリソースは、フィールド、セクション (タブ)、ヘッダー、アクティビティストリーム、アクティビティログ、リボンを含むフォームまたはフォームの一部を動的にレンダリングするために使用される基本データリソースです。

Glide フォームデータリソースは、@servicenow/now-record-form-connected アプリケーションの一部です。

Glide フォームデータリソースは、フォーム、フォームフィールド、レコードヘッダーのコンポーネントなど、フォームを使用するコンポーネントにバインドされています。

フォーム - フィールドコンポーネントでユーザーの勤続記念日レコードを表示するには、GlideForm データリソースを使用します。フォーム内でレンダリングするレコードを Glide フォームデータリソースに指示するには、 自分の勤続記念日データリソースレコードの sys_id 値を Glide フォームデータリソースの [システム ID] フィールドにバインドします。

[フォーム - フィールド] コンポーネントがレンダリングされるときに、レコードが動的に決定されます。この例のレコードは、システム管理者の勤続記念日用です。

この演習では、Sys Admin home バリアントに Glide フォームデータリソースを追加します。[自分の次の NeedIt (My Next NeedIt)] データリソースを Glide フォームデータリソースにバインドします。ページの両方のデータリソースを、前の演習で追加したレコードヘッダーコンポーネントにバインドします。

Glide フォームデータリソースの追加

演習のこのセクションでは、NeedIt Experience の Sys Admin home バリアントに Glide フォームコンポーネントを追加します。[自分の次の NeedIt (My Next NeedIt)] データリソースを Glide フォームデータリソースにバインドします。

1. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントが選択されていることを確認します。

2. [データリソース] パネルが開いていない場合は、アイコンバーの [データリソース] アイコン () をクリックします。

3. Glide フォームデータリソースを追加します。

   1. [データリソースインスタンス] セクションの [+ 追加] ボタンをクリックします。

   2. [データリソース] フライアウトで、@servicenow/now-record-form-connected アプリケーションを選択します。

   3. Glide フォームデータリソースを選択します。

      

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

4. データリソースのラベルと ID を変更します。

   1. [構成] セクションで、[ラベルと ID を編集] アイコン () をクリックします。
   2. [データブローカーの詳細 (Data broker details)] ダイアログで、ラベルと ID を構成します。
   データブローカーラベル： 次の NeedIt フォーム
   データブローカー ID： next_needit_form
   3. [適用] ボタンをクリックします。

5. [テーブル] フィールドの値を NeedIt に設定します。

6. [システム ID] フィールドを [自分の次の NeedIt (My Next NeedIt)] データリソースにバインドします。

   1. [システム ID] フィールドをクリックし、[動的なデータバインディング] ボタン () を選択します。
   2. 選択リストを使用して @data.my_next_needit.results.0.sys_id.value を選択します。

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

NeedIt テーブルのヘッダー設定レコードの作成

NeedIt テーブルにはフォームが定義されていますが、フォームヘッダーは定義されていません。演習のこのセクションでは、NeedIt テーブルのフォームヘッダーレコードを作成します。

1. ServiceNow ブラウザーのメインウィンドウ (Studio や UI Builder ではなく) で、Application Navigator を使用して [Now Experience フレームワーク] > [構成設定] > [UX フォームヘッダー] を開きます。

2. [フォームヘッダー] リストの [新規] ボタンをクリックします。

3. フォームヘッダーを構成します。

   テーブル： NeedIt [x_58872_needit_needit]
   プライマリフィールド： 簡単な説明

4. [他のアクション] メニュー () を開いて、[保存] メニューアイテムを選択します。

5. セカンダリ値を追加します。

   1. [セカンダリ値] 関連リストの [新規] ボタンをクリックします。
   2. [フィールド] の値を [必要な場合] に設定します。
   3. [送信] ボタンをクリックします。

6. 別のセカンダリ値 [要求元] を追加します。

   

自分の次の NeedIt (My Next NeedIt) コンポーネント構成の更新

演習のこのセクションでは、次の NeedIt フォームデータリソースを使用するように自分の次の NeedIt (My Next NeedIt) コンポーネント構成を更新します。データリソースが、コンポーネント内でレンダリングするフィールドを決定します。

1. UI Builder に戻ります。

2. ページから自分の次の NeedIt (My Next NeedIt) コンポーネントを選択します。

   

3. [セカンダリ値] フィールドを、次の NeedIt フォームデータリソースによって返されるセカンダリ値にバインドします。

   1. [セカンダリ値] フィールドの [動的なデータバインディング] アイコンをクリックします。
   2. [セカンダリ値] フィールドを @data.next_needit_form.nowRecordCommonHeader.secondaryItems にバインドします。

4. [サブ見出し] フィールドを @data.next_needit_form.nowRecordCommonHeader.primaryValue にバインドします。

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

新しいコンポーネント構成をテスト

1. UI Builder のヘッダーにある [URL] フィールドの [開く] ボタンをクリックします。ページが新しいブラウザータブまたはウィンドウで開きます。

   

2. [簡単な説明]、[必要な場合]、および [要求元] のフィールドが自分の次の NeedIt (My Next NeedIt) コンポーネントに表示されることを確認します。実際の [必要な場合] および [簡単な説明] の値は、例に示されている値とは異なります。

   

3. NeedIt Experience のブラウザーウィンドウを閉じます。

この学習モジュールではこれまで、レコードを検索と Glide フォームの基本データリソースから作成されたデータリソースインスタンスについて説明してきました。

基本データリソースが、特定のユーザーエクスペリエンスコンポーネントに必要なデータを常に提供するとは限りません。アプリケーションのエクスペリエンスが必要とする、動的に決定されるデータを既存のデータリソースが提供できない場合、開発者はデータリソースを作成できます。データリソースを作成する一般的なプロセスは次のとおりです。

1. リソースタイプを選択します。

2. データリソースによって返されるものを定義します。

3. データリソースのアクセス制御を作成します。

データリソースを作成するには、[データ] パネルの [データリソースインスタンス] セクションにある [+ 追加] ボタンをクリックします。[データリソース] フライアウトの [+ 新規] ボタンをクリックします。

リソースタイプの選択

新しいデータリソースのタイプを選択します。

• GraphQL：GraphQL のクエリと変更を実行します。
• 変換：スクリプトを使用して入力データを別のフォーマットに変換します。
• クライアントステータス：クライアント情報、ドメイン固有のステータスまたはロジック、およびユーザー初期設定を送信します。
• 総合： 複数のデータリソースを結合して再利用可能な単一のデータリソースを作成します。
• REST：REST API 要求を作成します。

データリソースの定義

データリソースを定義するために必要な情報は、データリソースのタイプによって異なります。この例では、変換データリソースを定義します。[名前] フィールドの値は、[データリソース] 選択フライアウトで使用されます。

[プロパティ] フィールドを使用して、データリソースの構成フィールドを定義します。

[スクリプト] フィールドを使用して、データリソースから返されるデータを定義します。input オブジェクトには、[プロパティ] フィールドで定義されたプロパティが含まれています。その例は、input.userDisplayName です。

開発者向けのヒント：基本データリソース定義を見つけるには、Application Navigator を使用して [Now Experience フレームワーク] > [データ管理] > [<データリソースタイプ>] を開きます。

アクセス制御の作成

新しいデータリソースは、データリソースが作成されたアプリケーションスコープの一部です。データリソースの名前は、データリソース定義レコードから取得されます。

新しいデータリソースは、すべてのユーザーのアクセスを拒否します。

データリソースに権限を付与するアクセス制御を作成します。

• タイプ：ux_data_broker
• 操作：実行
• 名前：<データリソースのシステム ID>
• ロールが必要：<アクセスに必要なロール>

注意：語 ux_data_broker は、データリソースの別名です。

データリソースの追加、構成、およびバインド

基本データリソースと同様に、開発者により作成されたデータリソースの追加、構成、およびバインドを行います。

データリソースが作成されたアプリケーション内で、データリソースを見つけます。[データリソース] 列には、データリソースがタイプ別に整理されることに注意してください。[概要] 列には、データリソース定義レコードから値が自動的に読み込まれます。

データリソースを構成し、予期したデータをデータリソースが返すことを確認します。

データリソースを 1 つ以上のページ要素にバインドします。この例では、[定型化されたテキスト] コンポーネントの [テキスト] フィールドがハードコードではなく動的になっています。

この演習では、テキスト文字列をカスタマイズして作成するデータリソースを作成します。新しいデータリソースをコンポーネントの [プライマリ値] フィールドにバインドします。

データリソースの作成

演習のこのセクションでは、変換データリソースを作成します。

1. [ページ] パネルの [バリアント] セクションで、Sys Admin home バリアントが選択されていることを確認します。

2. [データリソースインスタンス] セクションの [+ 追加] ボタンをクリックします。

3. [データリソース] フライアウトの [+ 新規] ボタンをクリックします。

   

4. データリソースタイプとして [変換] を選択します。
   

   

5. データリソースレコードを構成します。

   名前： テキスト文字列にユーザーを追加 (Add User to Text String)
   説明： この変換データリソースは、形式「<ユーザーのフルネーム> の次の NeedIt」を使用して文字列を構築します。(This Transform Data Resource constructs a string using the format <user_full_name>'s Next NeedIt)
   

6. テキストをコピーして [プロパティ] フィールドに貼り付けます。

   [ { "name":"userFullName", "label":"User full name", "description":"", "readOnly":"false", "fieldType":"string", "mandatory":true, "defaultValue":"" } ]

7. [プロパティ] フィールドに定義したオブジェクトの構造を調べて、データリソースオブジェクトを構成するプロパティと値のペアを確実に理解します。

8. スクリプトをコピーして [スクリプト] フィールドに貼り付けます。

   function transform(input) { // Concatenate the user name from the Data Resource Configuration // with a string var newString = input.userFullName + "'s Next NeedIt"; return newString; }

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

10. [他のアクション] メニュー () を開いて、[保存] メニューアイテムを選択します。

11. [他のアクション] メニュー () を開いて、[sys_id のコピー] メニューアイテムを選択します。アクセス制御を作成するときに sys_id が必要になります。

アクセス制御の作成

演習のこのセクションでは、admin ロールを持つユーザーにテキスト文字列にユーザーを追加 (Add User to Text String) データリソースの使用を許可するアクセス制御を作成します。アクセス制御の詳細については、学習モジュール「Securing Applications Against Unauthorized Users (権限のないユーザーに対するアプリケーションの保護)」を参照してください。

1. システム管理者のセキュリティ権限を昇格させます。
   1. ServiceNow ブラウザーのメインウィンドウ (Studio や UI Builder ではない) で、バナーの [ユーザー] メニューを開いて [ロールを昇格] メニューアイテムを選択します。
      
      
   2. [ロールを昇格] ダイアログで、security_admin を選択します。
   3. [OK] ボタンをクリックします。
2. Application Navigator を使用して、[System Security] > [アクセス制御 (ACL)] を開きます。
3. [新規] ボタンをクリックします。
4. 新しいアクセス制御を構成します。
   タイプ： ux_data_broker
   操作： 実行
5. [名前] フィールドを構成します。
   1. [名前] フィールドのモード変更アイコン () をクリックします。
   2. [名前] フィールドに <データリソース用にコピーしたシステム ID> を貼り付けます。
6. アクセス制御に admin ロールを追加します。
7. [ロールが必要] リストまでスクロールし、[新規行を挿入] をダブルクリックします。
8. 検索フィールドに「admin」と入力し、リストから admin ロールを選択します。
   
   
9. [保存] ボタン () をクリックします。
10. [送信] ボタンをクリックします。

データリソースインスタンスの作成

演習のこのセクションでは、テキスト文字列にユーザーを追加 (Add User to Text String) データリソースのインスタンスを作成します。データリソースインスタンスを構成します。

1. [UI Builder] タブに切り替えます。UIB の外部でデータリソースが変更されたことを示すメッセージが表示された場合は、[ページを更新] ボタンをクリックします。

   注意：変更が再ロードされない場合は、ブラウザーの [再ロード] ボタンを使用してページのコンテンツを更新してください。メッセージが表示されないユーザーは、ブラウザーウィンドウを再ロードして、最新の構成を UI Builder に確実にロードする必要があります。

2. [データリソース] パネルが開いていない場合は、アイコンバーの [データリソース] アイコン () をクリックします。

3. テキスト文字列にユーザーを追加 (Add User to Text String) データリソースを追加します。

4. [データリソースインスタンス] セクションの [+ 追加] ボタンをクリックします。

5. [データリソース] フライアウトで、NeedIt アプリケーションを選択します。

6. テキスト文字列にユーザーを追加 (Add User to Text String) データリソースを選択します。
   

   

7. [データリソース] フライアウトの [ドキュメント] ペインを確認します。

   質問：テキスト文字列にユーザーを追加 (Add User to Text String) データリソースドキュメントの内容はどこから取得されますか？
   回答：テキスト文字列にユーザーを追加 (Add User to Text String) データリソースのドキュメントは、作成したデータリソースレコードのフィールドから取得されます。

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

9. [データリソースインスタンス] の [構成] セクションで、[ユーザーのフルネーム] フィールドを @context.session.user.fullName にバインドします。
   

   

10. [プレビュー] セクションを調べて、予期した出力が表示されることを確認します。
    

    

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

コンポーネントでのデータリソースインスタンスの使用

演習のこのセクションでは、自分の次の NeedIt レコード (My Next NeedIt Record) コンポーネントのフィールドにデータリソースインスタンスをバインドします。

1. ページから自分の次の NeedIt レコード (My Next NeedIt Record) コンポーネントを選択します。
2. [プライマリ値] フィールドを @data.add_user_to_text_string_1.output にバインドします。
3. [保存] ボタンをクリックします。

新しいコンポーネント構成をテストします。

1. UI Builder のヘッダーにある [URL] フィールドの [開く] ボタンをクリックします。ページが新しいブラウザータブまたはウィンドウで開きます。
2. 自分の次の NeedIt レコード (My Next NeedIt Record) コンポーネントのタイトルに、ログインしたユーザーの名前が含まれていることを確認します。
   

開発者は、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 のソースコントロールにコミットするファイルを確認] ダイアログの [コミットのコメント] に、「データリソースモジュール完了」などと入力します。

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

   

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

   

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

データリソースの理解度を確認しましょう。自分の進行状況を評価するには、次の質問が役立ちます。質問ごとに回答を決定し、質問の任意の場所をクリックして回答を表示します。

質問：データリソースに関して、正しい文は次のどれですか？複数の回答が正解の場合があります。

1. 1 つのアプリケーションでのみ使用できます。
2. コンポーネント構成フィールドでは @ 文字によって参照されます。
3. 複数のコンポーネントまたはページで使用できます。
4. 基本データリソースが使用できます。
5. クライアント側またはサーバー側の場合があります。

回答：正解は 2、3、4、5 です。データリソースは単一のアプリケーション内で定義されますが、他のアプリケーションスコープで使用できます。

---

質問：[データリソース] パネルにあるセクションは次のどれですか？複数の回答が正解の場合があります。

1. バインディング
2. プレビュー
3. ページ
4. データリソースインスタンス
5. 構成/イベント

回答：正解は 2、4、5 です。バインディングは構成フィールドで行われ、UI Builder のセクションではありません。[ページ] はページの定義に使用されるパネルであり、[データリソース] パネルの一部ではありません。

---

質問：正誤問題？データブローカーと ux_data_broker は、データリソースの同義語です。

回答：正解は正しいです。データリソース定義レコードは、データブローカーレコードです。データリソースのアクセス制御のアクセス制御タイプは ux_data_broker です。

---

質問：データリソースへのフィールドのバインドに関して、正しい文は次のどれですか？複数の回答が正解の場合があります。

1. [動的なデータバインディング] ボタンは、データリソースをフィールドにバインドします。
2. UI Builder のそれぞれの構成フィールドをバインドできます。
3. サーバー側のデータリソースのみをバインドできます。
4. データがバインドされているフィールドには、バインドされたデータの装飾があります。
5. フィールド内の @ 文字は、フィールドがデータリソースにバインドされていることを示します。

回答：正解は 1、4、5 です。[動的なデータバインディング] ボタンのあるフィールドのみをデータリソースにバインドできます。クライアント側とサーバー側の両方のデータリソースをバインドできます。

---

質問：Glide フォームデータリソースとともに使用する UI Builder のコンポーネントは次のどれですか？複数の回答が正解の場合があります。

1. 定型化されたテキスト
2. リスト - 簡易
3. フォーム
4. フォームフィールド
5. レコードヘッダー

回答：正解は 3、4、5 です。フォームをレンダリングするコンポーネントで Glide フォームという基本データリソースを使用します。

---

質問：データリソースタイプに関して、正しい文は次のどれですか？複数の回答が正解の場合があります。

1. GraphQL
2. 変換
3. クライアントステータス
4. 総合
5. REST

回答：すべて正解です。

---

質問：データリソースの作成ステップは次のどれですか？複数の回答が正解の場合があります。

1. データリソースタイプを選択します。
2. データリソースの読み込みアクセス制御を作成します。
3. データリソースの実行アクセス制御を作成します。
4. データリソースによって返されるものを定義します。
5. データリソースをコンポーネントのフィールドにバインドします。

回答：正解は 1、3、4 です。データリソースの読み込みアクセス制御を作成する必要はありません。実行アクセス制御を作成します。データリソースをコンポーネントにバインドすることはデータリソースを使用するステップであり、データリソースを作成するステップではありません。

コアコンセプト：

• データリソースは、ページのコンポーネント用にフェッチするデータを定義します。
• データリソースは再利用可能です。
• データリソースは、それを作成したアプリケーションの一部ですが、どのアプリケーションでも使用できます。
• エクスペリエンスにデータリソースを追加するには、データリソースインスタンスを作成します。
• データリソースを構成することで、それにより返されるデータを指定します。
• [データリソース] パネルの [プレビュー] セクションを使用して、次のことを行います。
  • 返される JSON のフォーマットを確認します。
  • データリソースにより返される値を確認します。
  • 必要なデータが返されることを確認します。
• データのバインドとは、情報を表示する UI 要素にデータを関連付けるプロセスです。
  • @ 文字とバインドされたデータの装飾で示されます。
  • フィールドの値を動的に決定します。
• 開発者はデータリソースを作成できます。