レコードを使用すると、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)] を開きます。

ランダムな NeedIt レコードの生成予定スクリプトの実行が見つからない場合、予定スクリプトの実行を作成する手順については、このセクションを展開してください。

予定スクリプトの実行がタグに追加される前に NeedIt リポジトリをフォークした場合は、予定スクリプトの実行を手動で追加する必要があります。[予定スクリプトの実行] を、インポートする XML ファイルとして以下に示します。

1. XML ファイルをダウンロードします。
   1. GenerateRandomNeedIts.xml.zip ファイルをダウンロードします。
   2. GenerateRandomNeedIts.xml.zip ファイルを解凍します。
   3. GenerateRandomNeedIts.xml ファイルを解凍する場所をメモします。
2. XML ファイルをインポートします。

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

   2. [番号] フィールドの 列の [オプション] メニュー () を開き、[XML のインポート] オプションを選択します。

      

   3. [XML のインポート] ウィンドウの [ファイルを選択] ボタンをクリックし、GenerateRandomNeedIts.xml ファイルを参照します。

   4. [アップロード] ボタンをクリックします。

3. [予定スクリプトの実行] を確認して開きます。
   1. Studio のブラウザータブに切り替えて、ウィンドウを再ロードします。
   2. アプリケーションエクスプローラーを使用して、[Server Development] > [予定スクリプトの実行] > [ランダムな NeedIt レコードの生成] を開きます。

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

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

   質問：スクリプトはいくつの [NeedIt] レコードを作成しますか？
   回答：スクリプトの 2 行目の [recordsToMake] 変数は、スクリプトの実行時に作成する [NeedIt] レコードの数を設定します。スクリプトが誤って実行された場合に備えて、サンプルスクリプトで生成するレコード数はデフォルトでゼロに設定されています。
   

   

4. recordsToMake 変数の値を変更して、50 件の NeedIt レコードを生成します。

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

この演習では、[簡易リスト] ページテンプレートのコンポーネントで使用可能なプロパティを表示して、パラメーターを作成します。

コンポーネントのフィールド値の表示

演習のこのセクションでは、[簡易リスト] ページを表示して、パラメーターとして構成するフィールド値を特定します。

1. 前回の演習で UI Builder を開いていない場合は、ここで開きます。

   1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
   2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。

2. [ページ] パネルの [ページ] 選択リストを開き、[簡易リスト] ページを選択します。

   

   質問：情報メッセージ「読み取り専用。ページテンプレートに保護ポリシーがあります。」がページ上部に表示されます。このメッセージはどういう意味ですか？

   
   
   
   回答：ページの作成時に、[元のテンプレートを使用] オプションを選択していました。ページ自体は変更できません。アプリケーション固有の詳細を含むページを構成するには、パラメーターを渡す必要があります。
   

3. コンポーネントプロパティを表示します。

   1. [ページ] パネルの [コンテンツ] セクションで、[リスト 1] コンポーネントを選択します。
   2. [構成] パネルの [構成] タブを選択します。

質問：[構成] タブのどのフィールドがページパラメーターを使用しますか？ページパラメーターを構成するときの各パラメーターの名前は何ですか？

回答：ページパラメーターは、context.props オブジェクトのプロパティに値を渡します。context.props オブジェクトは、[構成] パネルから @context.props の構文で参照されます。パラメーター名は、context.props オブジェクトのプロパティ名と一致する必要があります。

必須パラメーターの設定

演習のこのセクションでは、[簡易リスト] ページの必須パラメーターを作成し、テスト値を設定します。

1. [ページ] パネルで、[ページ] 選択リストの [オプション] メニュー () を開き、[必須パラメーターを編集] メニューアイテムを選択します。

2. [必須パラメーターを編集] ダイアログの [+ 追加] リンクをクリックします。

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

   

4. [必須パラメーターを編集] ダイアログの [保存] ボタンをクリックします。

5. テスト値として使用するテーブル名を取得します。

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

      

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

      

6. table パラメーターのテスト値を設定します。

   1. UI Builder の ブラウザータブに切り替えます。
   2. UI Builder ヘッダーで [URL] フィールドをクリックします。
   3. [値] ダイアログの table 値に、<前にコピーしたテーブル名> (x_58872_needit_needit) を貼り付けます。
   4. [値] ダイアログを閉じます。これで、NeedIt レコードのリストがページに表示されます。

注意：[保存] ボタンがアクティブのように見えても、テンプレートのテスト値を保存することはできません。オプションのパラメーターを設定する場合を含め、現在のページ構成を終了するたびにテスト値をリセットする必要があります。

質問：リストのタイトルは何ですか？リストのレコード数はいくつですか？リストにはどの列が表示されますか？

回答：リストにはタイトルがありません。レコード数は、メインの ServiceNow インターフェイスで [NeedIt] > [すべて] モジュールを開いたときの NeedIt レコードの数と一致します。実際の数値は画像とは異なります。デフォルトの列リストは、テーブルのフィールドのアルファベット順リストです。

課題：オプションのパラメーターの作成

学習した内容を使用して、[簡易リスト] ページのオプションのパラメーターを 3 つ作成します。[このページには未保存の変更があります (This page has unsaved changes)] ダイアログが表示されたら、[変更を破棄] ボタンをクリックします。

• listTitle
• query
• listView

ソリューション：

オプションのパラメーターのテスト

演習のこのセクションでは、オプションのパラメーターにテスト値を追加して、オプションのパラメーターがリストにどのように影響するかを確認します。

1. listTitle パラメーターを設定します。

   1. UI Builder ヘッダーで [URL] フィールドをクリックします。

   2. [値] ダイアログを構成します。

      table： x_58872_needit_needit
      listTitle： Open NeedIts

   3. [値] ダイアログを閉じます。これで、NeedIt レコードのリストがタイトル付きでページに表示されます。

      

2. コピーしたクエリを使用して、query パラメーターを設定します。

   1. リストに渡すクエリをコピーします。

      1. ServiceNow のメインブラウザーウィンドウで、Application Navigator を使用して [NeedIt] > [オープン] を開きます。
      2. [完了してクローズではないステータス (State not in Closed Complete)] フィルターブレッドクラムを右クリックし、[クエリのコピー] メニューアイテムを選択します。
      3. レコード数をメモします。

   2. UI Builder のブラウザーウィンドウの [URL] フィールドをクリックします。

   3. query パラメーターフィールドに <コピーしたクエリの値> (stateNOT IN3) を貼り付けます。

   4. [値] ダイアログを閉じます。NeedIt レコードの数が、開いている NeedIt レコードリストのレコード数と一致し、条件が設定されたことを示すフィルターが表示されていることを確認します。

      

3. 既存のリストビューを使用して listView パラメーターを設定します。

   1. リストビューの名前を取得します。

      1. Studio のアプリケーションエクスプローラーを使用して、[フォームと UI (Forms & UI)] > [リストレイアウト] > [NeedIt [エクスペリエンスリスト]] を開きます。

         [NeedIt [エクスペリエンスリスト]] リストレイアウトが見つからない場合、リストレイアウトを作成する手順については、このセクションを展開してください。
         
         リストレイアウトがタグに追加される前に NeedIt リポジトリをフォークした場合は、リストレイアウトを手動で追加する必要があります。

         1. リストレイアウトを作成します。
            1. Studio で [アプリケーションファイルを作成] リンクをクリックします。
            2. [フィルター...] フィールドにテキスト list を入力するか、左ペインのカテゴリから [フォームと UI (Forms & UI)] を選択します。
            3. 中央ペインでファイルタイプとして [リストレイアウト] を選択してから、[作成] ボタンをクリックします。
            4. [アプリケーションファイルを作成] ダイアログの [自分のテーブル] セクションで、NeedIt [x_58872_needit_needit] テーブルを選択します。
         2. リストレイアウトを構成します。
            1. スラッシュバケットを使用して、リストの列を次のように構成します。
               番号
               要求元
               簡単な説明
               ステータス
               担当者
         3. リストビューを構成します。
            1. [ リストビュー] セクションの [ビュー名] 選択リストを開き、[新規] 選択肢を選択します。
            2. [新規ビューの作成] ダイアログで、[ビュー名] を Experience list に設定します。
            3. [OK] ボタンをクリックします。
         4. [保存] ボタンをクリックします。
         

      2. ビュー名が Experience list であることに注意してください。ビューを listView パラメーター値の名前として使用するには、スペースをアンダースコアに置き換える必要があります。渡す値は Experience list になります。

      3. リストレイアウトに含まれるフィールドをメモします。

   2. UI Builder のブラウザーウィンドウの [URL] フィールドをクリックします。

   3. [listView] パラメーターフィールドに Experience_list と入力します。

   4. [値] ダイアログを閉じます。リストのフィールドがリストレイアウトのフィールドと一致することを確認します。

      

UI Builder を使用してページをレイアウトします。ページレイアウトは、本文、スロット、およびコンポーネントで構成されます。[ページ] パネルの [コンテンツ] セクションに、ページ構造の階層が一覧表示されます。

• 本文 ()：本文は、ページのコンテンツのプライマリコンテナーです。
• スロット ()：スロットは、コンポーネントを保持するページ上の場所です。
• コンポーネント：ページの構成要素です。
  • コンテナー ()：コンテナーは、ページの構造をレイアウトするために使用される特殊なコンポーネントです。コンテナーには、コンポーネントを保持するスロットが 1 つ以上あります。
  • 非コンテナーコンポーネント (アイコンはコンポーネントによって異なる)：非コンテナーコンポーネントは、テキスト、イメージ、ボタン、リストなどのコンテンツをページに追加します。

コンテンツを表示するか非表示にするには、階層内のコンテナーまたはスロットを展開するか折りたたみます。

コンテナーの操作

デフォルトでは、コンテナーにコンポーネント用のスロットが 1 つあります。複数のスロットを持つコンテナーを構成するには、コンテナーの [構成] パネルの [レイアウト] タブから事前設定されたレイアウトを選択します。

背景色やパディングなどのスタイルを適用するには、コンテナーの [レイアウト] タブにある [CSS スタイル] フィールドを使用します。コンテナーの [CSS スタイル] に CSS プロパティを入力して、有効な CSS プロパティのリストを取得します。プロパティを選択し、値を入力して、提案された値のリストを取得します。

ページ上の各コンポーネントには、一意のラベルと ID があります。[構成] パネルの [コンポーネントのラベルと ID を編集] アイコン () をクリックして、[コンポーネントラベル] と [コンポーネント ID] の値を変更します。

開発者向けのヒント：デフォルトの命名規則は、コンポーネントタイプとインクリメント番号です。たとえば、最初のコンテナーは Container 1 で、2 番目のコンテナーは Container 2 です。コンポーネントに名前を付けると、ページレイアウト内のコンポーネントを区別するうえで役立ちます。[ページ] パネルの [コンテンツ] セクションには、ページ階層内のコンポーネントを見つけるために使用できる検索が含まれています。コンポーネント ID は、スクリプトやデータバインディングでも使用できます。必ず、ページレイアウトでのコンポーネントの目的を表すようにコンポーネントの名前を変更します。

スロットの操作

スロットは、コンポーネントを保持するページ上の場所です。スロットを選択すると、[構成] パネルにスロット固有の構成オプションが表示されます。構成オプションは、スロットの CSS スタイルを調整します。

最初のコンポーネントをスロットに追加するには、ページのスロットにある [コンポーネントを追加] アイコン () をクリックするか、[ページ] パネルの [コンテンツ] セクションのスロットの下にある [+コンポーネントを追加] リンクをクリックします。

[フレックス方向] は、コンポーネントをスロットに追加する方向が水平 ([行]) 方向か、垂直 ([列])方向かを決定します。

ページ上のコンポーネントにカーソルを合わせると、スロットの [コンポーネントを追加] アイコン () が表示されます。コンポーネントを追加する場所を選択し、スロットの [前に追加 (Add before)] ボタンまたは [後に追加 (Add after)] ボタンをクリックして、コンポーネントを追加します。アイコン () にカーソルを合わせると、ボタン () に変化します。

または、[ページ] パネルの [コンテンツ] セクションを使用して、コンポーネントをスロットに追加します。ページがコンポーネントとスロットで混み合うことがあります。この場合、[コンテンツ] セクションで特定のコンポーネントまたはスロットを簡単に選択できます。階層内のアイテムにカーソルを合わせて、[オプション] メニュー () を開きます。

スロットの場合は、[コンポーネントを追加] メニューアイテムを選択して、スロット内にある他のすべてのコンポーネントの後にコンポーネントを追加します。

コンポーネントを追加する場所を選択するには、コンポーネントの [オプション] メニューを開き、[前にコンポーネントを追加] または [後にコンポーネントを追加] メニューアイテムを選択します。

[ページ] パネルの [コンテンツ] セクションでスロットを選択し、[構成] パネルでスロットの CSS オプションを設定します。[フレックス方向]、[コンテンツの位置揃え (Justify content)]、[アイテムの配置 (Align items)] などの一般的なオプションは、選択リストとして使用できます。スタイルは [CSS スタイル] フィールドに手動で追加できます。[CSS スタイル] フィールドにプロパティを追加するときに、入力に応じて UI Builder によりプロパティと値が提案されます。この例の [アイテムの配置 (Align items)] は、スロット内のコンポーネントを中央に揃えるように設定されています。[CSS スタイル] フィールドでは、background-color が水色に設定されています。

この演習では、ヘッダー、レポート、およびリスト行を含むホームページをレイアウトします。いくつかの簡単なテキストコンポーネントと CSS スタイルを追加して、ページレイアウトを確認します。

ページレイアウトの計画

ホームページの目的は、NeedIt アプリケーションのランディングページを提供することです。ページデザインには、次の 3 つのセクションがあります。

• ロゴとタイトルを含むヘッダー
• NeedIt アプリケーションの概要レポートを含むレポートセクション
• アクティブな NeedIt レコードのリストを含むセクション

セクションはページの幅全体に広がり、3 行を構成します。ページの幅全体に色を適用するには、ページ本文のメインスロットに各セクション用の「行」コンテナーを作成します。この図は、色付きの行を作成するための構造を示します。[ページ] パネルの [コンテンツ] セクションと合わせるため、この図ではスロット () を示すために点線を使用し、コンテナー () を示すために実線を使用しています。

ページコンテンツの周囲に空白を残すために、コンテンツはページ幅の 90 % を使用します。各行コンテナー内でコンテナーをネストして、レイアウトを構成します。レポートとリストのコンテンツはページの中央に揃えられます。ヘッダーのコンテンツは、中央揃えのセクションの左端に揃えられます。このレイアウトを実現するには、行コンテナーのスロットのコンテンツを中央に揃えます。スロットの 90 %の幅を持つコンテナーをスロットに追加します。この図は、行コンテナーのスロットとコンテンツのコンテナーを示しています。

ページのヘッダーにロゴとタイトルが表示されます。このページのプライマリユーザーは、NeedIt アプリケーション管理者です。管理者は、期限切れの NeedIt レコードの数、 要求タイプ別のアクティブな NeedIt レコードのチャート、および今月中に期限の切れる NeedIt レコードの数を確認する必要があります。管理者は、アクティブな NeedIt レコードのリストも表示する必要があります。

この学習モジュールの後半で、ページにコンテンツを追加します。最終的なページには、イメージ、レポート、およびリストが表示されます。

ヘッダーセクションの追加

演習のこのセクションでは、ヘッダー行コンテナーとヘッダーコンテナーを含むページのレイアウトを開始します。

1. 前回の演習で UI Builder を開いていない場合は、ここで開きます。

   1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
   2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。

2. [ページ] パネルで、ホームページを選択します。

3. ヘッダー行コンテナーを追加します。

   1. ページの [コンポーネントを追加] アイコン () をクリックします。

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

      

   3. [構成] パネルで、[コンポーネントのラベルと ID を編集] アイコン () をクリックします。

   4. コンポーネントの詳細を設定します。

      コンポーネントラベル： ヘッダー行
      コンポーネント ID： header_row
      

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

   6. [構成]パネルの [レイアウト] タブで、[CSS スタイル] フィールドに background-color: #81B5A1; を追加します。

      

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

4. ヘッダー行コンテナーのメインスロットを構成します。

   1. [ページ] パネルの [コンテンツ] セクションで、ヘッダー行コンテナーのメインスロットを選択します。

      

   2. [構成] パネルの [アイテムの配置 (Align items)] フィールドを [中央] に設定します。

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

5. ヘッダーコンテナーを追加します。

   1. ヘッダー行コンテナーの [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトから、[コンテナー] コンポーネントを選択します。
   3. [構成] パネルで、[コンポーネントのラベルと ID を編集] アイコン () をクリックします。
   4. コンポーネントの詳細を設定します。
      コンポーネントラベル： ヘッダー
      コンポーネント ID： header
   5. [適用] ボタンをクリックします。
   6. [構成] パネルの [レイアウト] タブで、[CSS スタイル] フィールドの [幅] の値を 90% に変更します。
   7. [保存] ボタンをクリックします。

6. 何らかのコンテンツがなければ、行は表示されません。作業をプレビューできるように、定型化されたテキストをヘッダーに追加します。

   1. ヘッダーコンテナーの [コンポーネントを追加] アイコンをクリックします。

   2. [コンポーネント] フライアウトで [定型化] を検索し、[定型化されたテキスト] コンポーネントを選択します。

      

   3. [構成] パネルの [構成] タブで、定型化されたテキストを構成します。

      テキスト： The NeedIt Experience
      HTML タグ： H1

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

7. ページをテストします。

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

   2. ウィンドウのサイズを変更します。ウィンドウの左端とテキストの間のスペースが、ウィンドウの幅に基づいて変化することを確認します。

      

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

レポートセクションの追加

演習のこのセクションでは、レポート行コンテナーとレポートコンテナーをページに追加します。この学習モジュールの後半でレポートを追加するまでレイアウトを表示するために、プレースホルダーテキストを追加します。

1. レポート行コンテナーを追加します。

   1. [ページ] パネルの [コンテンツ] セクションで、本文のメインスロットの [オプション] メニュー () を開き、[コンポーネントを追加] メニューアイテムを選択します。

      

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

   3. コンポーネントラベルとコンポーネント ID を構成します。

      コンポーネントラベル： レポート行
      コンポーネント ID： reports_row

   4. [構成] パネルの [レイアウト] タブで、[CSS スタイル] フィールドに background-color: #B3D4C7; を追加します。

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

2. アイテムを中央に揃えるようにレポート行コンテナーのメインスロットを構成します。
   1. ページパネルの [コンテンツ] セクションで、レポート行コンテナーのメインスロットを選択します。
   2. [構成] パネルの [アイテムの配置 (Align items)] フィールドを [中央] に設定します。
   3. [保存] ボタンをクリックします。
3. レポートコンテナーを追加します。
   1. レポート行コンテナーの [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトから、[コンテナー] コンポーネントを選択します。
   3. コンポーネントラベルとコンポーネント ID を構成します。
      コンポーネントラベル： レポート
      コンポーネント ID： reports
   4. [適用] ボタンをクリックします。
   5. [構成] パネルの [レイアウト] タブで、[CSS スタイル] フィールドの [幅] の値を 90% に変更します。
   6. [保存] ボタンをクリックします。
4. 何らかのコンテンツがなければ、行は表示されません。作業をプレビューできるように、定型化されたテキストをレポートコンテナーに追加します。
   1. レポートコンテナーの [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトで [定型化されたテキスト] コンポーネントを選択します。
   3. [構成] パネルの [構成] タブで、定型化されたテキストを構成します。
      テキスト： レポートはここに表示されます。
      HTML タグ： H2
   4. [保存] ボタンをクリックします。
5. ページをテストします。

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

   2. 両方のバーがページに表示され、テキストが整列していることを確認します。

      

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

課題：リストセクションの追加

演習のこのセクションでは、学習した内容を適用して、リスト行コンテナーとリストコンテナーをページに追加します。

1. 背景色のないリスト行コンテナーを追加します。

2. アイテムを中央に揃えるようにリスト行コンテナーのメインスロットを構成します。

3. 幅 90 % のリストコンテナーを追加します。

4. リストコンテナーにプレースホルダーテキストを追加して、新しいセクションを確認します。後でリストをコンテナーに追加するときに、このテキストを削除します。

5. ページの構造を確認します。

   

6. ページをテストします。

   

コンポーネントは、ページの基本要素です。コンポーネントは、ボタンやラベルなどのコア要素から、リストやフォームなどのより複雑なエクスペリエンスコンポーネントまで多岐にわたります。

コンポーネントごとに独自の構成オプションがあります。

たとえば、ボタンコンポーネントには、サイズやラベルなど、ボタンのルックアンドフィールを構成するためのオプションがあります。この例では、[新規] ボタンは「New」というラベルが付いた中サイズのボタンです。

バリアントプロパティは、エクスペリエンステーマに基づいてボタンの書式設定を指定します。次の図は、デフォルトのテーマのいくつかのバリエーションを示しています。

データの表示方法コンポーネントはボタンよりも複雑で、さまざまな構成オプションが必要です。データの表示方法には、表示するデータに使用するデータソースと、データの表示方法を識別するための可視化タイプが必要です。追加の構成オプションでは、データを集計してデータの表示方法を更新する方法を指定します。この例では、「今週の誕生日」というデータの可視化で、[行事] テーブルをデータソースとして使用しています。今週の誕生日のみを返すフィルターは示されていません。可視化タイプは、データソースによって見つかった行事レコードの数を返す単一スコアです。

コンポーネントプロパティの完全なドキュメントについては、開発者サイトの Now Experience Components のドキュメントを参照してください。ドキュメントには次の内容を含めることができます。

• 概要：コンポーネントの説明。
• UIB セットアップ：UI Builder でコンポーネントを構成する方法。[構成] パネルで構成できる各プロパティの説明が含まれます。
• API：コンポーネントをプログラムで使用する方法についての説明。
• 使用法：コンポーネントを使用する方法と場所の例。
• プレイグラウンド：コンポーネントの構成を試します。

画像を使用して、エクスペリエンスのデザインを強化します。開発者は、UI Builder で作成されるエクスペリエンスの一部として使用する画像を、アプリケーションファイルとしてアプリケーションに追加できます。

アプリケーションに画像を追加するには、Studio で編集するアプリケーションを開きます。[アプリケーションファイルを作成] ボタンをクリックします。

[アプリケーションファイルを作成] ダイアログで、[Content Management] カテゴリから [画像] を選択します。

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

画像レコードを構成します。

• アクティブ：画像を使用できます。
• カテゴリ：エクスペリエンスのブラウザーウィンドウのタイトルと、UI Builder でエクスペリエンスにアクセスするために使用される名前。
• 名前：エクスペリエンスのページで使用される画像の名前。
• 画像：画像ファイル。画像レコードにアップロードする画像を参照して選択します。
• アプリケーション：UX アプリケーションレコードが含まれているアプリケーション。

画像を選択すると自動的に設定されるフィールド：

• フォーマット：画像フォーマット。
• サイズ (バイト)：画像のサイズ (バイト単位)。
• 高さ：画像の高さ (ピクセル単位)。
• 幅：画像の幅 (ピクセル単位)。

画像の使用

画像を使用するには、[名前] の値で画像を参照します。

たとえば、ページの画像コンポーネントで誕生日ケーキの画像を使用するには、[イメージソース] の値を birthday-cake.png に設定します。

画像をスロットまたはコンテナーの背景として設定するには、CSS の background-image プロパティを使用します。このプロパティでは background-image: url("<image-path/image-name>"); という構文を使用します。コンテナの背景として誕生日ケーキの画像を使用する場合の構文は次のとおりです。

background-image: url("birthday-cake.png");

この演習では、イメージ、データの表示方法、およびリストのコンポーネントをホームページに追加します。

ページヘッダーへのロゴの追加

演習のこのセクションでは、画像をダウンロードし、NeedIt アプリケーションに画像を追加して、エクスペリエンスのホームページのヘッダーに画像を配置します。

1. 画像ファイルをダウンロードします。

   1. needit_logo_green.png ファイルをダウンロードします。
   2. needit_logo_green.png ファイルを保存した場所をメモします。

2. NeedIt アプリケーションに画像ファイルを追加します。

   1. 前の演習で NeedIt アプリケーションを Studio で開いていない場合は、 ここで開きます。
      1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
      2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。
   2. [アプリケーションファイルを作成] リンクをクリックします。
   3. [アプリケーションファイルを作成] ダイアログから、Images アプリケーションファイルを見つけて選択し、[作成] ボタンをクリックします。
   4. [名前] の値を needit-logo-green.png に設定します。
   5. 画像を追加します。

      1. [画像] フィールドの [クリックして追加] リンクをクリックします。

      2. 以前にダウンロードした needit_logo_green.png を参照します。

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

      4. レコードのイメージを確認します。

         

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

3. 画像をホームページのヘッダーに追加します。

   1. 前回の演習でホームページを UI Builder で開いていない場合は、ここで開きます。

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

   2. ページの [The NeedIt Experience] をクリックして、[定型化されたテキスト 1] コンポーネントを選択します。

   3. [前に追加 (Add before)] アイコンをクリックします。

   4. [コンポーネント] フライアウトから、[イメージ (Image)]コンポーネントを見つけて選択します。

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

      代替テキスト： NeedIt ロゴ
      画像ソース： needit-logo-green.png
      一致： 元のサイズを維持
      高さ： 125

   6. [構成] パネルの [スタイル] タブを選択します。

   7. [CSS スタイル] フィールドの中かっこの間に width: 125px; を追加します。

      

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

   質問：NeedIt ロゴはページタイトルの上にあります。代わりにロゴをページタイトルの横に配置するにはどうしますか？
   
   回答：ヘッダーコンテナーのメインスロットは、[フレックス方向] が [列] で構成されています。スロット内のコンテンツを隣接させるには、[フレックス方向] を [行] に設定する必要があります。次のステップで [フレックス方向] を変更します。

   

4. ヘッダーコンテナーのメインスロットを構成して、コンポーネントのレイアウトを修正します。

   1. ページパネルの [コンテンツ] セクションを使用して、ヘッダーコンテナーのメインスロットを選択します。

   2. スロットを構成します。

      フレックス方向： 行

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

   4. ページを開いて現在のレイアウトを表示します。タイトルが NeedIt ロゴの上側に配置されていることがわかります。

      

   5. UI Builder に戻ります。

   6. ヘッダーコンテナーのメインスロットを選択した状態で、スロットの位置合わせを構成します。

      アイテムの配置： 中央

   7. [保存] ボタンをクリックして、プレビューするページを開きます。

   

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

レポートコンテナーへのデータの表示方法コンポーネントの追加

演習のこのセクションでは、レポートコンテナーで 3 列のレイアウトを使用するように構成します。データの表示方法コンポーネントを追加して、期限切れの NeedIt レコード数を第 1 列に表示します。

1. レポートコンテナーから [定型化されたテキスト 2] コンポーネントを削除します。

   1. [ページ] パネルの [コンテンツ] セクションで、[定型化されたテキスト 2] の [オプション] メニューを開き、[コンポーネントの削除] メニューアイテムを選択します。
   2. [要素を削除します] ダイアログの [削除] ボタンをクリックします。

2. レポートコンテナーで 3 列のレイアウトを使用するように構成します。

   1. [ページ] パネルの [コンテンツ] セクションで、レポートコンテナーを選択します。

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

      

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

4. 第 1 列にデータの表示方法コンポーネントを追加します。

   1. レポートコンテナーの第 1 列にある [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトで、[データの表示方法] コンポーネントを検索して選択します。

5. データの表示方法コンポーネントのデータソースを構成します。

   1. [構成] パネルの [データソースを追加] ボタンをクリックします。

      

   2. [データソースを追加] ウィンドウから、NeedIt [x_58872_needit_needit] テーブルを見つけて選択します。

      

   3. フィルター条件を追加します。

      1. [フィルター] セクションの [+ カスタム条件を追加] リンクをクリックします。

      2. アクティブなレコードの検索条件を作成します。

         1. [アクティブ] フィールドを選択します。
         2. 演算子が [次の値に等しい] で、値が [true] であることを確認します。

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

      4. [必要な場合] [次の日より前 (before)] [今日] の条件を追加します。

         

      5. [実行] ボタンをクリックして、条件に一致するレコードの数をメモします。

   4. [このソースを追加] ボタンをクリックします。

6. データの表示方法コンポーネントを構成します。

   コンポーネントタイトル： 期限切れの NeedIt
   リアルタイム更新： 選択済み
   スコア更新時間を表示： 未選択

7. [保存] ボタンをクリックして、プレビューするページとレポートを開きます。

8. [期限切れの NeedIt] の数が、フィルターを構成したときのレコードの数と一致することを確認します。

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

レポートコンテナーにデータの表示方法コンポーネントをさらに追加

演習のこのセクションでは、レポートコンテナーの残りのスロットにデータの表示方法コンポーネントを追加し、レポート行スロットにパディングを追加します。

1. 第 2 列にデータの表示方法コンポーネントを追加します。
   1. レポートコンテナーの第 2 列にある [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトで、[データの表示方法] コンポーネントを検索して選択します。
2. データの表示方法コンポーネントのデータソースを構成します。
   1. [構成] パネルの [データソースを追加] ボタンをクリックします。
   2. NeedIt [x_58872_needit_needit] テーブルを選択します。
   3. 条件 [アクティブ] [次の値に等しい] [true] を追加します。
   4. [このソースを追加] ボタンをクリックします。
3. データの表示方法コンポーネントを構成します。
   チャート化タイプ： 円グラフ
   グループ化の基準 (スライス)： 要求タイプ
   コンポーネントタイトル： 要求タイプ別のアクティブな NeedIt
4. [保存] ボタンをクリックして、プレビューするページとレポートを開きます。
5. 学習した内容を使用して、[単一スコア] データの表示方法コンポーネントをレポートコンテナーの第 3 列に追加します。
   1. データの表示方法コンポーネントには、今月必要な NeedIt レコードが表示されます。
   2. データの表示方法コンポーネントには、データに対応するタイトルを付ける必要があります。
6. レポート行コンテナーのメインスロットにパディングを追加して、レポートの上下にスペースを追加します。
   1. [ページ] パネルの [コンテンツ] セクションで、レポート行コンテナーのメインスロットを選択します。
   2. [構成] パネルで、[パディング] の値を 15 px に設定します。
7. [保存] ボタンをクリックして、プレビューするページとレポートを開きます。
8. Experience のブラウザータブを閉じます。

リストコンテナーへの簡易リストの追加

演習のこのセクションでは、リスト - 簡易コンポーネントをリストコンテナーに追加します。

1. リストコンテナーから [定型化されたテキスト 3] コンポーネントを削除します。
   1. [ページ] パネルの [コンテンツ] セクションで、[定型化されたテキスト 3] の [オプション] メニューを開き、[コンポーネントの削除] メニューアイテムを選択します。
   2. [要素を削除します] ダイアログの [削除] ボタンをクリックします。
2. リストコンテナーに [リスト - 簡易] コンポーネントを追加します。
   1. リストコンテナーにある [コンポーネントを追加] アイコンをクリックします。
   2. [コンポーネント] フライアウトから、[リスト - 簡易] コンポーネントを見つけて選択します。
3. [リスト - 簡易] コンポーネントを構成します。
   タイトル： すべてのアクティブな NeedIt
   テーブル： NeedIt
   最大行： 10
4. コンポーネントのフィルターを構成します。
   1. [フィルターを編集] ボタンをクリックします。
   2. [フィルター] ダイアログで、条件 [アクティブ] [次の値に等しい] [true] を追加します。
   3. [適用] ボタンをクリックします。
5. リストに表示する列を構成します。
   1. [番号] フィールドを追加します。
      1. [列] フィールドの [+ 追加] リンクをクリックします。
      2. [フィールドを選択] ダイアログで [番号] フィールドを選択し、[OK] ボタンをクリックします。
   2. さらにフィールドをリストに追加します。
      簡単な説明
      必要な場合
      要求タイプ
      要求元
6. [保存] ボタンをクリックして、プレビューするページを開きます。

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

ページバリアントとは、1 つの URL を共有するページの代替バージョンです。バリアントは、対象者と呼ばれるユーザーグループに対応します。たとえば、 1 つのページにアプリケーション管理者用、部門マネージャー用、アプリケーションユーザー用の 3 つのバリアントがあります。

• アプリケーション管理者の対象者に属するユーザーがページの URL にアクセスすると、アプリケーションの測定基準や使用状況の詳細など、アプリケーション管理者固有の詳細が記載されたページのバージョンが表示されます。Special Occasions アプリケーションの場合、ページには、誕生日と勤続記念日があるユーザー数と、ないユーザー数が表示されます。このページには、特別行事とともにレポートされた問題の数も表示されます。

• 部門マネージャーである対象者に属するユーザーがこのページの URL にアクセスすると、アプリケーションの部門関連情報 (部門で誕生日や勤続記念日が近づいているユーザー、およびその特別な日付を他のユーザーと共有することを当該ユーザーが許可しているかどうかなど) が表示されます。

• アプリケーションユーザーである対象者に属するユーザーがこのページの URL にアクセスすると、ユーザー固有のバージョンのページにそのユーザーの特別な日付が表示され、他のユーザーに特別な日付を表示するかどうかを構成できます。

[ページ] パネルの [バリアント] セクションでページのバリアントを作成します。

[+ 作成] リンクをクリックして、バリアントを最初から作成します。

[バリアントを作成] ダイアログが開きます。このダイアログは [ページの作成] ダイアログに似ていますが、バリアントはデフォルトページと同じパスを使用するため、パスは不要です。

• バリアント名：分かりやすいページラベル。
• ページテンプレート：設定する事前定義済みのページを選択するか、最初から作成するには [なし] を選択します。
• テンプレートをどのように使用しますか？：選択したテンプレートの使用方法を選択します。
  • 元のテンプレートを使用 (カスタマイズ制限あり)：値を渡して、テンプレートに基づいてロックダウンされたページを構成します。
  • テンプレートコンテンツをコピー (フルカスタマイズ可能)：テンプレートから利用して、ページ上のあらゆるものをカスタマイズします。
• アプリケーションスコープ：ページバリアントがが含まれるアプリケーション。

ページを複製して既存のページから開始します。複製するページの [オプション] メニュー () を開き、[複製] メニューアイテムを選択します。

[バリアントを作成] ダイアログが開きます。複製のダイアログには、[バリアント名] の値のみが必要です。

[バリアントを作成] ダイアログの [作成] ボタンをクリックすると、[成功！ (Success!)] ダイアログが開きます。[対象者]、[条件]、または [アクセス制御] を使用して、バリアントページを表示できるユーザーを設定します。

ServiceNow のメインインターフェイスで対象者レコードを作成します。Application Navigator を使用して [Now Experience フレームワーク] > [構成要素] > [対象者] を開き、[新規] ボタンをクリックして対象者レコードを作成します。

対象者はユーザーロールに基づいています。

• 名前：バリアントに割り当てるときに対象者を選択するために使用されるラベル。
• 説明：対象者とその目的の説明。
• ロール：[ロール] フィールドのいずれかのロールを持つユーザーは対象者に含まれます。
• アプリケーション：対象者が含まれているアプリケーション。
• アクティブ：対象者をバリアントに割り当てることができます。

対象者をバリアントに割り当てる一方で、対象者を作成することもできます。[対象者を追加] ダイアログの [プラットフォームで対象者を開く] リンクをクリックして、新しいブラウザーウィンドウで [対象者] リストを開きます。

リストの [新規] ボタンをクリックして、新しい対象者レコードのフォームを開きます。新しく作成された対象者は、[対象者を追加] ダイアログを閉じて再度開くまで、このダイアログで使用できません。

バリアントへの対象者の割り当て

対象者をバリアントに割り当てるには、UI Builder で [対象者を追加] ダイアログを開きます。

バリアント作成プロセスの一部として対象者をバリアントに割り当てるには、[成功！ (Success!)] ダイアログの [対象者を追加] ボタンをクリックします。

バリアントの作成後に [対象者を追加] ダイアログを開くには、バリアントの [オプション] メニュー () を開き、[対象者を編集] メニューアイテムを選択します。

バリアントに割り当てられた対象者は、[対象者を追加] ダイアログの [対象者] セクションにリストされます。対象者が割り当てられていない場合は、[対象者を追加] ボタンをクリックしてバリアントに対象者を割り当てます。

対象者の名前の入力を開始し、対象者を選択します。バリアントの対象者に優先順位を付けるには、[順番] に数字を割り当てます。[保存] ボタンをクリックして、対象者をバリアントに割り当てます。

新しく割り当てられた対象者がダイアログの [対象者] セクションに追加されます。[+ 追加] リンクをクリックして別の対象者を割り当てるか、[完了] ボタンをクリックして対象者の割り当てを完了します。

この演習では、NeedIt アプリケーション管理者用と NeedIt アプリケーションユーザー用に 2 組の対象者を作成します。次に、ホームページのページバリアントを作成して、対象者を適用します。バリアントをテストして演習を完了します。

ページを開くモジュールの作成

演習のこのセクションでは、NeedIt エクスペリエンスのホームページをユーザーが開くための Application Navigator モジュールを作成します。モジュールとその作成方法の詳細については、学習モジュール「 Create the NeedIt Application and Application Files (NeedIt アプリケーションおよびアプリケーションファイルの作成)」の「モジュール」のページを参照してください。

1. ホームページの URL を取得します。

   1. 前回の演習でホームページを UI Builder で開いていない場合は、ここで開きます。
      1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
      2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。
      3. [ページ] パネルで、ホームページを選択します。
   2. [URL] フィールドの [開く]リンクをクリックして、ページを開きます。
   3. ブラウザーのアドレスバーにある URL をクリップボードにコピーします。

2. モジュールを作成します。

   1. Studio で [アプリケーションファイルを作成] リンクをクリックします。

   2. [フィルター] フィールドにテキスト Module を入力するか、左ペインのカテゴリから [ナビゲーション] を選択します。

   3. 中央ペインからファイルタイプとして [モジュール] を選択し、[作成] ボタンをクリックします。

   4. モジュールを構成します。

      タイトル： The NeedIt Experience
      アプリケーションメニュー： NeedIt
      注文： 50
      ヒント： 新しい方法で NeedIt アプリケーションを体験してみましょう。

   5. [リンクタイプ] フォームセクションの値を構成します。

      リンクタイプ： URL (引数から)
      引数： <先ほどコピーしたエクスペリエンス URL をペースト>
      ウィンドウ名： _blank

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

      

3. モジュールをテストします。

   1. ServiceNow ブラウザーのメインウィンドウに切り替えます。
   2. ページを再ロードします。
   3. Application Navigator を使用して、[NeedIt] > [The NeedIt Experience] を開きます。
   4. 新しいブラウザータブまたはウィンドウで、NeedIt Experience が開くことを確認します。
   5. Experience のブラウザータブを閉じます。

NeedIt 管理者の対象者の作成

演習のこのセクションでは、NeedIt admin ロールの対象者を作成します。

1. ServiceNow ブラウザーのメインウィンドウ（Studio や UI Builder ではなく）で、Application Navigator を使用して [Now Experience フレームワーク] > [構成要素] > [対象者] を開きます。
2. [対象者] リストの [新規] ボタンをクリックします。
3. 対象者を構成します。
   名前： NeedIt 管理者 (NeedIt Admins)
   説明： NeedIt admin ロールを持つユーザーの対象者
   ロール： x_58872_needit.admin
4. [送信] ボタンをクリックします。

ホームページへの対象者の適用

演習のこのセクションでは、NeedIt 管理者 (NeedIt Admins) である対象者をホームページに適用します。

1. [ページ] パネルの [バリアント] セクションで、 [ホームのデフォルト] バリアントの [オプション] メニューを開き、[対象者を編集] メニューアイテムを選択します。

2. [対象者を追加] ダイアログの [対象者を追加] ボタンをクリックします。

   

3. ページの対象者を構成します。

   対象者： NeedIt 管理者 (NeedIt Admins)
   順序： 100

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

   

5. [完了] ボタンをクリックします。

ページバリアントの作成

演習のこのセクションでは、ホームのデフォルトバリアントを複製して、NeedIt アプリケーションユーザー用のバリアントを作成します。また、プロセスの一環として、NeedIt アプリケーションユーザーである対象者を作成します。

1. [ページ] パネルの [バリアント] セクションで、[ホームのデフォルト] バリアントの [オプション] メニューを開き、[複製] メニューアイテムを選択します。

2. [バリアントを作成] ダイアログで、[バリアント名] をユーザーホームに設定し、[作成] ボタンをクリックします。

3. 対象者を作成します。

   1. [成功！ (Success!)] ダイアログの [対象者を追加] ボタンをクリックします。
   2. [対象者を追加] ダイアログの [対象者を追加] ボタンをクリックします。
   3. [プラットフォームで対象者を開く] リンクをクリックします。[対象者] リストが新しいウィンドウで開きます。
   4. [新規] ボタンをクリックします。
   5. 対象者を構成します。
      名前： NeedIt ユーザー
      説明： NeedIt ユーザーロールを持つユーザーの対象者
      ロール： x_58872_needit.needit_user
   6. [送信] ボタンをクリックします。
   7. [対象者] リストのブラウザーウィンドウを閉じます。
   8. [対象者を追加] ダイアログの [完了] ボタンをクリックします。

4. バリアントに対象者を追加します。

   1. [成功！ (Success!)] ダイアログの [対象者を追加] ボタンをクリックします。
   2. [対象者を追加] ダイアログの [対象者を追加] ボタンをクリックします。
   3. ページの対象者を構成します。
      対象者： NeedIt ユーザー
      順序： 200
   4. [保存] ボタンをクリックします。
   5. [完了] ボタンをクリックします。

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

ユーザーホームのページバリアントの更新

演習のこのセクションでは、学習した内容を適用して、ユーザーホームのページバリアントの外観を更新します。プロセスのステップを完了したら、必ず作業内容を保存してください。

1. NeedIt ロゴを更新します。
   1. 画像ファイルをダウンロードします。
      1. needit_logo_purple.png ファイルをダウンロードします。
      2. needit_logo_purple.png ファイルを保存した場所をメモします。
   2. NeedIt アプリケーションにイメージファイルを追加します。
   3. 紫色のロゴを使用するようにページのロゴを更新します。
2. ヘッダー行コンテナーの背景色を #8586BC に変更します。
3. レポート行コンテナーを削除します。
4. [リスト - 簡易] コンポーネントを更新します。
   1. [タイトル] を [自分のアクティブな NeedIts (My Active NeedIts)] に設定します。
   2. [要求元] [次の値に等しい (動的)] [自分] のフィルター条件を追加します。([自分] オプションが 2 つある場合は、最初のオプションを選択)
5. 作業を保存します。

ページバリアントのテスト

演習のこのセクションでは、NeedIt アプリケーションロールをユーザーに追加し、ユーザーの代理操作を行ってページバリアントへのアクセスをテストします。

1. Beth Anglin に NeedIt ユーザーロールを付与します。

   1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [ユーザー管理] > [ユーザー] を開きます。
   2. beth.anglin のユーザーレコードを見つけて開きます。
   3. [ロール] 関連リストで、[編集...] ボタンをクリックします。
   4. x_58872_needit.needit_user ロールを見つけて、[ロールリスト (Roles List)] スラッシュバケットに追加します。
   5. [保存] ボタンをクリックします。

2. Fred Luddy に x_58872_needit.admin ロールを付与します。

3. システム管理者としてホームページを表示します。

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

      質問：システム管理者にはどのページバリアントが表示されますか？
      
      回答：どちらでもありません。システム管理者は、対象者によって指定されたいずれのロールも持っていないため、「お探しのページが見つかりませんでした」というメッセージが表示されます。admin ロールはデフォルトで、バリアントへのアクセスをユーザーに付与しません。
      

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

4. NeedIt ユーザーロールを持つ Beth Anglin として、ホームページを表示します。

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

      1. ServiceNow ブラウザーのメインウィンドウで、[ユーザーメニュー] を開いて [ユーザーの代理操作] メニューアイテムを選択します。
      2. [代理操作ユーザー] ダイアログの [ユーザーの検索] フィールドに Beth と入力します。
      3. beth.anglin を選択します。

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

      質問：Beth Anglin にはどのページバリアントが表示されますか？
      
      回答：Beth には x_58872_needit.needit_user ロールがあり、これにより NeedIt ユーザーである対象者に含まれるため、ユーザーホームバリアントが開きます。NeedIt ユーザーである対象者のメンバーには、 ユーザーホームバリアントが表示されます。

      

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

5. NeedIt admin ロールを持つ Fred Luddy としてページを開きます。

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

      1. ServiceNow ブラウザーのメインウィンドウで、[ユーザーメニュー] を開いて [ユーザーの代理操作] メニューアイテムを選択します。
      2. [ユーザーの代理操作] ダイアログの [ユーザーの検索] フィールドに Fred と入力します。
      3. fred.luddy を選択します。

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

      質問：Fred Luddy にはどのページバリアントが表示されますか？
      
      回答：Fred には XXX ロールがあり、これにより NeedIt 管理者である対象者に含まれるため、ホームのデフォルトバリアントが開きます。NeedIt 管理者である対象者のメンバーには、ホームのデフォルトバリアントが表示されます。

      

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

6. ServiceNow ブラウザーのメインウィンドウで、[ユーザーメニュー] を開いて [代理操作を終了] メニューアイテムを選択します。

開発者は、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. ユーザーがアプリケーションを操作するための Web ページのコレクション
2. ユーザーによるアプリケーションからのデータ表示を許可する、エクスペリエンス内のページの構成要素
3. 海ガメと陸ガメについて、個体の甲羅の紋様を追跡するために使用するアプリケーション
4. Web エクスペリエンス全体で一貫したルックアンドフィールを提供するために、Web エクスペリエンスのすべてのページに使用するラッパー
5. インタラクティブ要素の構造をページ上にレイアウトするために使用するページ上のコンポーネント

回答：正解は 4 です。アプリシェルは、Web エクスペリエンスのすべてのページのラッパーです。ServiceNow には、ポータルとワークスペースという 2 つのアプリシェルが用意されています。

---

質問：Studio で作成される、 Web エクスペリエンスの基本コンポーネントは次のどれですか？複数の回答が正解の場合があります。

1. UX アプリケーション
2. ユーザーエクスペリエンスページ
3. UX アプリ構成
4. UX コンテナー
5. ユーザーエクスペリエンスコンポーネント

回答：正解は 1 と 3 です。UX アプリケーションと UX アプリ構成は、Studio で作成される基本コンポーネントです。名前の冒頭に UX が付いていないその他の選択肢、およびその他のすべてのエクスペリエンスコンポーネントは、UI Builder に組み込まれています。

---

質問：正誤問題？テンプレートから作成されたページは変更できません。

回答：正解は誤りです。テンプレートを使用するページはパラメーターを使用して構成する必要があり、ページの変更はできませんが、テンプレートのコピーを使用するページは変更できます。

---

質問：sortField というオプションのパラメーターを list ページに渡す URL パスは次のどれですか？

1. x/12345/occasions/list?sortField
2. x/12345/occasions/list/sortField
3. x/12345/occasions/list?sortField=number
4. x/12345/occasions/list/params?sortField=number
5. x/12345/occasions/list/params/sortField/number

回答：正解は 5 です。オプションのパラメーターは、ページと params のパスの後に渡されます。オプションのパラメーターは、パラメーター名、値の順に渡されます。

---

質問：コンポーネントを保持するページ上の場所は次のどれですか？

1. コンテナー
2. スロット
3. ニッチ
4. コンポーネント
5. ボックス

回答：正解は 2 です。コンポーネントがスロットに追加されます。コンテナーには、コンポーネントを保持できるスロットが 1 つ以上あります。

---

質問：ページの構造を構成する方法を説明している文は次のどれですか？複数の回答が正解の場合があります。

1. コンテナーのレイアウトを選択する。
2. スロットのレイアウトを選択する。
3. スロットの CSS スタイルを構成する。
4. コンテナーの CSS スタイルを構成する。
5. 本文のレイアウトを選択する。

回答：正解は 1、3、4、5 です。レイアウトとは、本文またはコンテナー用に選択できるスロットの配置です。スロットまたはコンテナーの CSS スタイルを構成することで、幅、高さ、配置、およびページの構造を操作するその他のプロパティを構成します。

---

質問：開発者サイトの Now Experience コンポーネントのリファレンスを使用して、開発者が UI Builder でドロップダウンコンポーネントの構成に使用できるプロパティを見つけます。UI Builder で構成できるドロップダウンコンポーネントのプロパティは次のどれですか？複数の回答が正解の場合があります。

1. 選択されているアイテム
2. アイテム
3. テーブル
4. 選択
5. フィルター

回答：正解は 1、2、4 です。テーブルとフィルターは、[ドロップダウン UIB セットアップ (Dropdown UIB Setup)] ページの [プロパティ] セクションにリストされるプロパティではありません。

---

質問：データの表示方法コンポーネントを構成するときの最初のステップは次のどれですか？

1. 表示方法タイプの選択
2. コンポーネントタイトルの追加
3. 返されるデータのグループ化の選択
4. 測定基準の選択
5. データソースの追加

回答：正解は 5 です。他のプロパティを構成する前に、データの表示方法コンポーネントにデータソースが必要です。データソースが選択されるまで、他のプロパティは表示されず、構成できません。

---

質問：ページでのイメージの使用方法を説明する文は次のどれですか？

1. イメージレコードにイメージをアップロードし、レコード上の名前でイメージを参照します。
2. イメージレコードにイメージをアップロードし、ファイル名でイメージを参照します。
3. イメージを Web サイトにアップロードし、完全修飾パスを使用してイメージを参照します。
4. インターネット上で使用するイメージを検索し、イメージに直接アクセスします。
5. イメージコンポーネントを含むページにイメージをアップロードします。

回答：正解は 1 です。ServiceNow インスタンスにイメージをアップロードすると、アプリケーションとともにイメージが含められ、参照がローカルに保持されます。技術的には、インターネット上の任意のイメージを使用できますが、イメージの削除や変更が行われたり、使用が違法となる著作権上の制限を有したりする可能性があるため、推奨しません。

---

質問：バリアントの目的を最も的確に説明している文は次のどれですか？

1. バリアントとは、別のページが表示される対象者のユーザーです。
2. バリアントとは、ロールに基づく別のエクスペリエンスへのリダイレクトです。
3. バリアントとは、同じ URL において異なる対象者に応じてロードされるページのバリエーションです。
4. バリアントとは、エクスペリエンスへのアクセスに使用するデバイスに基づいてページで使用される代替コンポーネントです。
5. バリアントとは、同じ URL において異なるタイプのデバイスに応じてロードされるページのバリエーションです。

回答：正解は 3 です。バリアントとは、ユーザーの対象者に基づいて、同じ URL でロードされるページの代替バージョンです。ユーザーの対象者は、ユーザーのロールに基づきます。バリアントは、エクスペリエンスへのアクセスに使用されるデバイスと無関係です。

コアコンセプト：

• エクスペリエンスとは、ユーザーがアプリケーションを操作するために使用する Web インターフェイスです
• Studio でエクスペリエンスを作成します
• エクスペリエンスを作成するには、次の 2 つのレコードが必要です
  • UX アプリケーションレコード
  • UX アプリ構成レコード
• エクスペリエンスには、ユーザーがアプリケーションを操作するためのページが 1 つ以上あります
• UI Builder でエクスペリエンスを編集します
• Studio の UX アプリ構成レコードから UI Builder でエクスペリエンスを開きます
• UI Builder でページの作成と編集を行います
• UI Builder には、デフォルトで次の 5 つの表示セクションがあります。
  • アイコンバー
  • ヘッダー
  • [ページ] パネル
  • ステージ
  • [構成] パネル
• ページは最初から作成することも、テンプレートをベースにして作成することもできます
• ページテンプレートは参照またはコピーできます
  • 参照されているテンプレートの構成オプションは限られていますが、テンプレートが更新されると更新されます
  • コピーされたテンプレートは完全に構成できますが、作成時にテンプレートから完全に切断されます
• 動的データを表示するには、ページにパラメーターを渡します
  • 必須パラメーターはページに渡す必要があり、ページ URL に順番に追加されます
  • オプションのパラメーターは、存在する場合は渡すことができ、プロパティ/値のペアで URL に追加されます
• テンプレートページのコンポーネント設定で context.props オブジェクトへの参照を検索し、渡すパラメーターを決定します
• ページはコンポーネントで構成されています
  • ページをレイアウトするには、コンテナーコンポーネントを使用します
  • コンテンツとインタラクティブ機能をページに追加するには、コンテナー以外のコンポーネントを使用します
• コンポーネントはページ上のスロットに追加されます
  • スロットには 1 つ以上のコンポーネントが含まれています
  • コンテンツは列または行ごとに配置されます
  • レイアウトをコンテナーに適用して、利用可能なスロットの数を変更できます
• 構成オプションと CSS を使用してコンポーネントのルックアンドフィールを構成します
• アプリケーションにイメージを追加して、エクスペリエンスに視覚要素を追加します
• ページバリアントを使用すると、同じ URL のページに異なるコンテンツを表示できます
• バリアントは、対象者と呼ばれるターゲットのユーザーグループを使用して、表示するバリアントを決定します