バージョン:Rome
UI Builder

UI Builder でのページの作成

記事 (1/27)

「UI Builder でのページの作成」の目的

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

  • UI Builder を開いてナビゲーション
  • アプリケーションの Web エクスペリエンスの作成
  • ワークスペースでのページの作成と管理
  • ページのパラメーターの構成
  • テンプレートページの使用
  • コンテナーを含むページの構造のレイアウト
  • ページへのコンポーネントの追加および構成
  • エクスペリエンスで使用するイメージの追加
  • さまざまな対象者向けのページバリアントの作成

記事 (2/27)

この学習モジュールについて

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

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

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

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

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

演習ページ上部のナビゲーションとページタイトルに、強調表示された演習ページのアイコンと演習プリフィックスが表示されています。

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

演習 (3/27)

演習:「ページの作成」モジュール用のリポジトリのフォークとアプリケーションのインポート

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

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

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

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

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

リポジトリのフォーク

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

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

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

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

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

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

    リポジトリは以前にフォークされている

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

    GitHub ユーザーが複数の組織に属している場合、GitHub はフォーク先を尋ねます。GitHub ユーザー名を選択します。

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

    フォークしたコピーは自動的にロードされます。

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

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

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

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

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

      フォークしたリポジトリの URL をコピーする

      注意:次のセクションでは、コピーした 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] を開きます。

    Studio アプリケーションを開きます。

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

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

    [ソースコントロールからインポート] ボタンをクリックします。

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

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

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

    github.com からコピーした URL を使用して、GitHub にフォークしたリポジトリへの接続を構成します。

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

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

    有効なリポジトリが存在する必要があります。

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

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

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

演習 (4/27)

演習:ページ作成用の分岐の作成

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

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

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

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

    [ソースコントロール] メニューおよび [分岐を作成 (Create Branch)] メニューアイテムを開きます。

  3. 分岐を構成します。

      分岐名 UIBCreatePagesModule
      タグから作成 LoadForUIBCreatePagesModule
  4. [分岐を作成] ボタンをクリックします。

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

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

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

記事 (5/27)

エクスペリエンスとは

エクスペリエンスとは、ユーザーがアプリケーションを操作するための Web ページのコレクションです。

ページのコレクションとしてのエクスペリエンスの視覚的表現

多くの Web サイトでは、各ページで同じ基本構造が使用されています。たとえば、各ページに同じフッター、同じヘッダー、同じメニューがあります。一般的なページ要素はシェルです。エクスペリエンスでは、エクスペリエンスのページごとにシェルまたはラッパーを含めることができます。シェルを使用すると、ユーザーがページ間を移動してもエクスペリエンスで一貫したルックアンドフィールが得られます。シェルは必須ではありません。

ServiceNow には、次の 2 つのシェルがあります。

  • ポータル:ポータルエクスペリエンスの各ページには、共有のヘッダーとフッターがあります。

    シェル内にさまざまなページが表示され、簡略化されたポータルシェルのイメージ

  • ワークスペース:ワークスペースの各ページには、共有のヘッダーとサイドバーがあります。ページはワークスペースのタブで開きます。

    シェル内にさまざまなページが表示され、簡略化されたワークスペースシェルのイメージ

エクスペリエンスのページでは、エクスペリエンスに使用するシェルに関係なく、同じ作成プロセスを使用します。

記事 (6/27)

エクスペリエンスの作成

エクスペリエンスを作成するには、次の 2 つのレコードが必要です。

  • UX アプリケーション:エクスペリエンスのシェルと URL パスを構成します。
  • UX アプリ構成:エクスペリエンスのランディングページを構成します。

UX アプリケーションの作成

カスタムアプリケーションの UX アプリケーションレコードを作成するには、Studio で編集するアプリケーションを開きます。[アプリケーションファイルを作成] ボタンをクリックします。

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

Studio で UX アプリケーションタイプのアプリケーションファイルを作成して、エクスペリエンスの作成を開始します。

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

UX アプリケーションレコードを構成します。

UX アプリケーションレコードには、タイトル、ページ、アプリシェル UI、URL パス、管理パネルを指定するフィールドがあります。

  • タイトル:エクスペリエンスのブラウザーウィンドウのタイトルと、UI Builder でエクスペリエンスにアクセスするために使用される名前。
  • ページ:エクスペリエンスに使用するアプリを選択します。UI Builder で構築するエクスペリエンスの場合は [UI Builder] を選択します。
  • アプリシェル UIAgent Workspace アプリシェルポータルアプリシェルなど、エクスペリエンス内のすべてのページに使用するラッパー。[UXR 空白アプリシェル (UXR Blank AppShell)] を選択すると、シェルのないエクスペリエンスが作成されます。エクスペリエンスが作成された後にアプリシェル UI を変更することはできません。
  • URL パス:エクスペリエンスをロードするためにエクスペリエンス URL に追加する一意の値。エクスペリエンス URL の形式は instance.service-now.com/x/<company_code>/<URL のパス> です。
  • アプリケーションUX アプリケーションレコードが含まれているアプリケーション。
  • 管理パネル:エクスペリエンスの UX アプリ構成
  • アクティブ:ユーザーはエクスペリエンスを表示できます。
  • 認証ルート:エクスペリエンスに対して認証するログインページを指定する JSON データ。

UX アプリ構成の作成

UX アプリケーションレコードで、[管理パネル] フィールドの [リストからドキュメントを参照] アイコン ([リストからドキュメントを参照] ボタン。) をクリックします。

注意[管理パネル] フィールドはグレー表示になっており直接変更することはできませんが、フィールドの [リストからドキュメントを検索] アイコンを使用して更新できます。

[管理パネル] フィールドはグレー表示ですが、変更することができます。

[ドキュメントを選択] ダイアログの [ドキュメント] フィールドの [リストから参照] アイコン ([リストからドキュメントを参照] ボタン。) をクリックします。

[ドキュメントを選択] ダイアログには、[テーブル名] と [ドキュメント] の 2 つのフィールドがあります。テーブル名は UX アプリ構成で事前構成されています。[リストから参照] アイコンを使用してレコードのリストを開き、UX アプリ構成レコードを作成します。

[UX アプリ構成] リストの [新規] ボタンをクリックします。

UX アプリ構成レコードを構成します。

[名前] が「特別行事の構成 (Special Occasions config)」に設定され、[ランディングパス] が「ホーム (home)」に設定された UX アプリ構成レコード。

  • 名前UX アプリ構成レコードの一意の名前。
  • アクティブUX アプリ構成を使用できます。
  • ランディングパス:URL に特定のページが指定されていない場合にエクスペリエンス URL パスに追加するページの名前。エクスペリエンス URL が instance.service-now.com/x/126321/occasions で、[ランディングパス] の値がホーム (home) の場合、ユーザーがエクスペリエンス URL を開くとホームページが開きます。
  • アプリケーションUX アプリケーションレコードが含まれているアプリケーション。

[クエリ文字列をエンコード][アイコン][説明] の各フィールドは、ここでは使用されていません。

[送信] ボタンをクリックします。[ドキュメントを選択] ダイアログで [OK] ボタンをクリックします。UX アプリケーションレコードの [更新] ボタンをクリックして、エクスペリエンスの作成を完了します。

演習 (7/27)

演習:エクスペリエンスの作成

この演習では、NeedIt アプリケーションの UX アプリケーションレコードと UX アプリ構成レコードを作成します。UX アプリケーションレコードは、空のアプリシェル UI を使用します。

UX アプリケーションレコードの作成

演習のこのセクションでは、エクスペリエンスの UX アプリケーションレコードを作成します。空のアプリシェルを使用するようにエクスペリエンスを設定します。

  1. 前回の演習で NeedIt アプリケーションを Studio で開いていない場合は、ここで開きます。
    1. ServiceNow ブラウザーのメインウィンドウで、Application Navigator を使用して [システムアプリケーション] > [Studio] を開きます。
    2. [アプリケーションを選択] ダイアログで、NeedIt アプリケーションをクリックします。
  2. UX アプリケーションレコードを作成します。
    1. Studio で [アプリケーションファイルを作成] リンクをクリックします。
    2. [フィルター] フィールドにテキスト UX を入力するか、左ペインのカテゴリから [Now Experience] を選択します。
    3. 中央ペインからファイルタイプとして [UX アプリケーション] を選択し、[作成] ボタンをクリックします。
  3. UX アプリケーションを構成します。
      タイトル NeedIt Experience
      ページ UI Builder
      アプリシェル UI UXR 空白アプリシェル
      URL パス required-experience
  4. [送信] ボタンをクリックして UX アプリケーションを保存します。

UX アプリ構成レコードの作成

演習のこのセクションでは、UX アプリケーションレコードから UX アプリ構成レコードを作成します。UX アプリ構成レコードで、エクスペリエンスのデフォルトページをホームに構成します。ホームページは、この学習モジュールの後半で作成します。ユーザーがエクスペリエンスを開くと、 ホームページが表示されます。

  1. NeedIt Experience レコードの [管理パネル] フィールドの [リストからドキュメントを参照] ボタン ([リストからドキュメントを参照] ボタン。) をクリックします。

    強調表示された [管理パネル] フィールドの [リストからドキュメントを参照] ボタン

  2. [ドキュメントを選択] ダイアログの [ドキュメント] フィールドの [リストから参照] ボタン ([リストからドキュメントを参照] ボタン。) をクリックします。[UX アプリ構成] リストが新しいウィンドウで開きます。

  3. [UX アプリ構成] リストの [新規] ボタンをクリックします。

  4. UX アプリ構成を構成します。

      名前 NeedIt Experience の構成 (NeedIt Experience Config)
      ランディングパス ホーム (home)
  5. [送信] ボタンをクリックします。

    名前とランディングパスが構成された新しい UX アプリ構成レコード

  6. [ドキュメントを選択] ダイアログで、[ドキュメント] の値が NeedIt Experience Config であることを確認し、[OK] ボタンをクリックします。

  7. [更新] ボタンをクリックして NeedIt Experience の UX アプリケーションレコードを保存します。

記事 (8/27)

ページの計画

ページとは、ユーザーがエクスペリエンスをナビゲートするときに操作するコンポーネントのコレクションです。ページを作成する前に、ページの目的とページに含める必要のあるコンテンツを特定します。「5W」に回答して、ページの計画に役立つ基本情報を収集します。

  • What (何):ページの目的は何ですか?ページのユーザーが確認する必要のある情報は何ですか?ユーザーがページにアクセスするために使用するデバイスは何ですか?
  • Who (誰):ページの対象者は誰ですか?
  • When (いつ):ユーザーはいつページを確認する必要がありますか?たとえば、そのページはサイトのメインページですか、それともユーザーが別のページから移動する先のページですか?
  • Where (どこ):効果的なインターフェイスを提供するには、ページ上のどこに情報を配置する必要がありますか?
  • How (どのように):そのページはエクスペリエンス内の他のページとどのように相互作用しますか?ページが機能するために必要なデータをどのように取得しますか?

ServiceNow には、ページの作成時に使用できるページテンプレートが用意されています。ページの作成前に、使用可能なテンプレートを確認してください。意図したページの目的に一致するテンプレートがありますか?事前設定されたコンテンツを含み、ページをより迅速に構築できるテンプレートがありますか?

構築する前に、ページのレイアウトを検討します。コンテンツをページの中央に配置する必要がありますか?ページに列を含める必要がありますか?どのコンテンツをページの上部に表示する必要がありますか?ページに使用する色と画像については、視覚障害者を考慮してください。会社の色、ロゴ、および設計ガイドラインも活用できます。

記事 (9/27)

ページの作成

UI Builder でエクスペリエンスページを作成し、編集します。UI Builder は Studio または ServiceNow のメインインターフェイスから開くことができます。

Studio から UI Builder のエクスペリエンスを開くには、UX アプリ構成レコードを開き、[UI Builder で開く] ボタンをクリックします。新しいブラウザータブに UI Builder が開きます。

UX アプリ構成レコードの「特別行事の構成 (Special Occasions config)」。[UI Builder で開く] ボタンが強調表示されています。

ServiceNow のメインインターフェイスから UI Builder のエクスペリエンスを開くには、Application Navigator を使用して [Now Experience フレームワーク] > [UI Builder] を開きます。エクスペリエンスの [表示名] の値をクリックして開きます。

編集用に選択する [自分のエクスペリエンス] リストを含む UI Builder。「特別行事の Web エクスペリエンス (Special Occasions Web Experience)」が強調表示されます。

エクスペリエンスには、デフォルトではページがありません。初めてエクスペリエンスを開くときに [ページを作成] ボタンをクリックして、エクスペリエンスの最初のページを作成します。

空のエクスペリエンスにはページがありません。スプラッシュ画面に、エクスペリエンスの新しいページを作成しようというメッセージが表示されます。[ページを作成] ボタンをクリックして、エクスペリエンスの最初のページを作成します。

ページがあるエクスペリエンスでページを作成するには:

  • UI Builder ヘッダーの [メニュー] メニューを開き、[ページの作成] メニューアイテムを選択します。

    [ページの作成] メニューアイテムが強調表示された状態で UI Builder の [メニュー] メニューが開きます。

  • [ページ] パネルで、[ページ] 選択リストの [オプション] メニュー (ページの [オプション] メニュー。) を開き、[+ ページの作成] メニューアイテムを選択します。

    [ページ] 選択リストのオプションメニューが開き、[ページの作成] メニューアイテムが強調表示されます。

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

[ページの名前] が「ホーム (Home)」に、[パス] が「ホーム (home)」に設定され、ページテンプレートが選択されていない [ページの作成] ダイアログ。

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

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

[成功! (Success!)] ダイアログで追加のページ設定を構成するか、[完了] ボタンをクリックします。

ページパラメーターとテンプレート構成については、別途この学習モジュールで説明します。

演習 (10/27)

演習:ページの作成

この演習では、 NeedIt Experience のページを 2 つ作成します。1 つはテンプレートから、もう 1 つは最初から作成します。

テンプレートからのページの作成

演習のこのセクションでは、テンプレートから [簡易リスト] ページを作成します。この学習モジュールの後半では、テンプレートを使用するようにページを構成します。

  1. UI Builder を開きます。
    1. Studio のアプリケーションエクスプローラーを使用して、[Now Experience] > [UX アプリ構成] > [NeedIt Experience の構成 (NeedIt Experience Config)] を開きます。
    2. [NeedIt Experience の構成 (NeedIt Experience Config)] フォームの [UI Builder で開く] ボタンをクリックします。
  2. [ページを作成] ボタンをクリックします。
  3. ページを構成します。
      ページの名前 簡易リスト (Simple List)
      パス simple-list
      ページテンプレート 簡易リスト (Simple List)
      テンプレートをどのように使用しますか? 元のテンプレートを使用 (カスタマイズ制限あり)
  4. [作成] ボタンをクリックします。
  5. [成功! (Success!)] ダイアログの [完了] ボタンをクリックします。

注意[簡易リスト (Simple List)] ページのコンテンツは読み取り専用です。この学習モジュールの後半では、テンプレートを参照するページの設定方法を学習します。

最初からのページの作成

演習のこのセクションでは、テンプレートを使用せずにページを作成します。

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

    [ページの作成] メニューアイテムが強調表示された [ページ] パネルの [ページ] オプションメニュー

  2. [このページには未保存の変更があります (This page has unsaved changes)] ダイアログが開いた場合は、[変更を破棄] ボタンをクリックします。

  3. ページを構成します。

      ページの名前 ホーム (home)
      パス home
      ページテンプレート なし
  4. [作成] ボタンをクリックします。

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

記事 (11/27)

UI Builder のナビゲーション

UI Builder は、見たままを得られる (WYSIWYG) Web ユーザーインターフェイスビルダーです。UI Builder を使用して、Web エクスペリエンス用のページを作成します。

UI Builder のレイアウト

UI Builder には、デフォルトで次の 5 つの表示セクションがあります。

  • アイコンバー:UI Builder インターフェイスのパネルを開いたり閉じたりします。
  • ヘッダー:エクスペリエンスが詳細を表示され、エクスペリエンスオプションにアクセスします。
  • [ページ] パネル:ページレイアウトと構成を表示するページを選択します。
  • ステージ[ページ] パネルで選択したページを編集します。
  • [構成] パネル:ページコンポーネントを構成します。

UI Builder のレイアウト。[ページ] パネルと [コンテンツ] パネルはウィンドウの左側にスタックされます。ステージは中央にあります。[構成] パネルはウィンドウの右側にあります。App Engine Studio によって作成されるデフォルトのワークスペースには、2 つの名前付きコンテナーと 2 つのコンポーネントがあります。

エクスペリエンスのページのナビゲーション

[ページ] パネルで選択したページが、[ステージ] に開きます。[ページ] 選択リストを使用して、編集するページを選択します。

開いた [ページ] 選択リストには、検索とページのリストがあります。この例では、[ホーム (Home)]、[行事リスト (Occasion List)]、および [レコード (Record)] の 3 種類のページを選択できます。

[ページ] パネルには、[バリアント][コンテンツ] の 2 つのセクションがあり、いずれについてもこの学習モジュールの後半で詳しく説明します。

アイコンバー[ページを非表示] アイコン (パネルが表示されているときの [ページ] アイコン。) をクリックすると、[ページ] パネルが非表示になります。[ページを表示] アイコン ([ページ] パネルが非表示になっているときの [ページ] アイコン。) をクリックすると、パネルが再び表示されます。

ページコンポーネントのナビゲーション

ページレイアウトは、 コンポーネントで構成されます。コンポーネントは、ページの構成要素です。コンポーネントは、コンテナーコンポーネントまたは非コンテナーコンポーネントのいずれかです。

  • コンテナーコンポーネントは、コンポーネントをグループ化してページのレイアウトを構成します。
  • ボタンやリストコンポーネントなどの非コンテナーコンポーネントは、データを表示したり、ページにインタラクティブ機能を追加したりします。

この学習モジュールでは、コンテナーコンポーネントをコンテナー、非コンテナーコンポーネントをコンポーネントと簡略化して呼びます。

[ページ] パネルの [コンテンツ] セクションまたはページ上でコンポーネントを選択し、[構成] パネルでコンポーネントの構成を管理します。[構成] パネルのタイトルは、選択したコンポーネントに応じて変化します。

[ページ] パネルの [コンテンツ] セクションまたはページ自体からコンポーネントを選択して、コンポーネントを構成します。

各コンテナーの [構成] パネルには、[構成][レイアウト]、および [イベント] のタブがあります。各コンポーネントの [構成] パネルには、[構成][スタイル]、および [イベント] のタブがあります。

[構成パネルを非表示] アイコン (パネルが表示されている場合は、[構成パネルを非表示] アイコンを非表示にします。) をクリックして、[構成] パネルを非表示にします。[構成パネルを表示] アイコン (パネルが非表示の場合の [構成パネルを表示] アイコン。) をクリックすると、パネルが再び表示されます。

ページの表示

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

UI Builder のヘッダーにある [オープン] リンク

新しいブラウザータブの URL は、ユーザーがエクスペリエンスにアクセスするために使用する URL と同じです。

記事 (12/27)

ページパラメーターの追加

ページパラメーターによってページが動的になります。ページパラメーターはページ URL で渡されます。たとえば、ページの表示時に開くレコードを指定するパラメーターをページに含めることができます。

ページの作成時にパラメーターを追加するには、[成功! (Success!)] ダイアログの [詳細 URL 設定] セクションを使用します。[必須パラメーターを追加] ボタンまたは [オプションのパラメーターを追加] ボタンをクリックしてパラメーターを作成します。

ページ作成後の [成功! (Success!)] ダイアログには、詳細 URL 設定を指定するセクションがあります。そのセクションで、ページの必須パラメーター、オプションのパラメーター、アクセス制御を指定できます。

ページの作成後にパラメーターを追加するには、ページの [オプション] メニュー (ページの [オプション] メニュー。) を開き、[必須パラメーターを編集] または [オプションのパラメーターを編集] メニューアイテムを選択して、パラメーターを作成または編集します。

ページオプションメニューが開いた [ページ] パネルで、[必須パラメーターを編集] および [オプションのパラメーターを編集] メニューアイテムが強調表示されています。

必須パラメーター

必須パラメーターはページが機能するために必要な値で、URL で渡されます。たとえば、ページにレコードが表示されている場合、ページはレコードのテーブルと SysID を認識する必要があります。両方の値を必須パラメーターとして渡すことができます。

必須パラメーターの追加または編集時に開く [必須パラメーターを追加] ダイアログで、[+ 追加] リンクをクリックし、パラメーターの名前を入力します。必須パラメーターを、URL に適用される順序で構成します。

  • ハンドルアイコン (ハンドルアイコン。) を使用して必須パラメーターを並べ替えます。
  • 編集アイコン (編集アイコンは鉛筆です。) をクリックして必須パラメーター名を変更します。
  • 削除アイコン (削除アイコンはゴミ箱です。) をクリックして必須パラメーターを削除します。

すべてのパラメーターを構成したら [保存] ボタンをクリックします。

テーブルと sysId パラメーターが追加された [必須パラメーターを編集] ダイアログ。

必須パラメーターは、[必須パラメーターを追加] ダイアログにリストされている順序でページ URL に直接追加されます。たとえば、ページが instance.service-now.com/x/126321/occasions/record で、2 つの必須パラメーター tablesysId がある場合、必須パラメーターの値がパスに直接追加されます。結果は instance.service-now.com/x/126321/occasions/record/x_126321_spec_occ_occasion/77d51c3b1bf1b01068dd5464604bcbfa です。

ページでデータをプレビューするには、UI Builder で使用するテスト値を設定します。UI Builder ヘッダーで [URL] フィールドをクリックします。[値] ダイアログで、必須パラメーターごとにテスト値を入力します。

値を入力していない [値] ダイアログと値を入力した [値] ダイアログ。テスト値は、UI Builder ヘッダーの [URL] フィールドに表示されます。

オプションのパラメーター

オプションのパラメーターは、ページに渡すことができますが、ページが機能するために必須ではないパラメーターです。

必須パラメーターの追加または編集時に開く [オプションのパラメーターを追加] ダイアログで、[+ 追加] リンクをクリックします。パラメーターの名前を入力します。以下の図の状態で [保存] ボタンをクリックします。

「views」という名前のオプションのパラメーターが追加された [オプションのパラメーターを編集] ダイアログ。

オプションのパラメーターは、ページ URL の URL パスの params サブディレクトリーの後に、名前と値のペアで追加されます。値が myValue のオプションのパラメーター views を必須パラメーターの例の URL に追加すると、次のような URL になります。

instance.service-now.com/x/126321/occasions/record/x_126321_spec_occ_occasion/77d51c3b1bf1b01068dd5464604bcbfa/params/views/myValue

記事 (13/27)

テンプレートの操作

ページをより迅速に作成するには、ページテンプレートを使用します。テンプレートがない場合、開発者はページ全体を最初から作成する必要があります。テンプレートがある場合、開発者は次のいずれかを実行できます。

  • 元のテンプレートを使用:開発者は、ユーザーエクスペリエンスに応じたパラメーターをページに渡す必要があります。
  • テンプレートコンテンツのコピー:開発者はページのコンテンツすべてを制御できますが、既存のレイアウトとコンテンツから開始します。

新しいページテンプレートのオプションの図。テンプレートを選択しない場合、開発者はページを最初から作成します。テンプレートを選択し、元のテンプレートを使用する場合、開発者はパラメーターを渡してページのレンダリング方法を変更します。テンプレートをコピーすると、テンプレートのすべてを変更できます。

では、開発者が元のテンプレートに基づいてページを作成することでカスタマイズ性を制限する理由は何でしょうか?一貫性とアップグレード性です。

  • 元のテンプレートに基づくページは、使用場所に関係なく一貫したルックアンドフィールを持ちます。
  • ページテンプレートが更新されると、元のテンプレートに基づくページも更新されます。テンプレートのコピーから作成されたページには、更新を手動で適用する必要があります。

元のページテンプレートが更新されると、元のテンプレートを使用するページには更新が適用されるが、テンプレートからコピーされたページには更新が適用されないことを示す図

テンプレートのパラメーターの特定

元のテンプレートを使用するページを機能させるには、パラメーターを使用して構成する必要があります。開発者はページを調べて、必要なパラメーターを判断する必要があります。レコードページの場合、レコードの詳細を表示するには、レコードを表示するためのテーブルと sysID をページが認識している必要があります。特定の必須の値を見つけるには、[ページ] パネルの [コンテンツ] セクションを表示します。階層内で、情報を必要とする可能性が最も高いコンポーネントを選択します。この例では、[レコード] ページのタブコンポーネントの可能性が最も高いと考えられます。

[レコード] ページの [コンテンツ] 階層。[レコード] ページは、テンプレートをコピーするのではなく、参照します。階層内のレコードページタブコンポーネントが強調表示されています。

コンポーネントを選択した状態で、[構成] パネルの [構成] タブを表示します。パラメーターとして渡す context.props オブジェクトのプロパティを見つけます。オブジェクト参照は @ で始まります。context.props オブジェクトはランタイムでページに渡されます。必須パラメーターおよびオプションパラメーターが context.props オブジェクトに渡されます。たとえば、table ページパラメーターは、context.props.table プロパティのランタイム値を指定します。sysId ページパラメーターは、context.props.sysId プロパティのランタイム値を指定します。ページのパラメーターを作成する場合、ページ構成のパラメーター名は、context.props オブジェクトのプロパティ名と完全に一致する必要があります。sysidsysIdと同じではありません。

レコードページタブコンポーネントの [構成 (Config)] タブは、context.props オブジェクトの sysId プロパティを参照します。ページを構成するパラメーターは、sysid (小文字) ではなく sysId (キャメルケース) にする必要があります。

開発者は、パラメーターを必須にするかオプションにするかをどのようにして知るのでしょうか?開発者は、ページのコンテンツを確認して判断する必要があります。レコードを開くために必要な詳細のないレコードページには、意味がありますか?いいえ。したがって、tablesysId は必須パラメーターである必要があります。

演習 (14/27)

演習:NeedIt レコードの作成

レコードを使用すると、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 のインポート] オプションを選択します。

      開いた [列のオプション] メニューと強調表示された [XML のインポート] メニューアイテム

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

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

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

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

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

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

    var recordsToMake = 0

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

    var recordsToMake = 50;
  4. [更新] ボタンをクリックします。

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

演習 (15/27)

演習:テンプレートから作成したページの構成

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

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

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

  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 オブジェクトのプロパティ名と一致する必要があります。

[構成] タブのフィールド フィールド値 パラメーター名
タイトル @context.props.listTitle listTitle
テーブル @context.props.table table
フィルター @context.props.query query
ビュー @context.props.listView listView

必須パラメーターの設定

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

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

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

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

    必須パラメーターとして table を設定した [必須パラメーターを編集] ダイアログ

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

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

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

      [データモデル] > [テーブル] > [NeedIt] が強調表示された Studio のアプリケーションエクスプローラー

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

      [名前] の値が強調表示された [テーブル] フォーム

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

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

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

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

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

テスト値として NeedIt テーブルが定義されたデフォルトの簡易リストリストにはタイトルがなく、すべてのレコードが表示され、また [アクティブ]、[アクティビティ期限]、[他の受託者リスト (Additional assignee list)]、および [承認] の各列が表示されます。これらは、テーブルをアルファベット順に並べた最初の 4 つのフィールドです。

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

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

  • listTitle
  • query
  • listView

ソリューション

3 つのパラメーターが設定された [オプションのパラメーターを編集] ダイアログ。

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

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

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

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

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

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

      Open NeedIts というタイトル付きの簡易リスト

  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 レコードリストのレコード数と一致し、条件が設定されたことを示すフィルターが表示されていることを確認します。

      Open NeedIts というタイトル付きの簡易リスト、開いている 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. [保存] ボタンをクリックします。

        [Experience list] ビューのリストレイアウトには、[番号]、[要求先 (Requested for)]、[簡単な説明]、[ステータス]、および [担当者 (Assigned to)] の列があります。

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

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

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

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

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

      タイトルが Open NeedIts で、クエリが設定され、列が [番号]、[要求先 (Requested for)]、[簡単な説明]、[ステータス]、および [担当者 (Assigned to)] に設定されている簡易リスト

記事 (16/27)

ページのレイアウト

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

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

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

ページコンポーネントの階層リストにあるコンテナーアイコン

コンテナーの操作

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

本文コンテナーのレイアウト選択の例。1 つの例では、4 列のレイアウトが選択され、4 つのスロットが水平に配置されたレイアウトがページ上でどのように表示されるかを示しています。2 番目の例では、ヘッダーとメインコンテンツのレイアウトが選択され、ページ上に垂直に配置された 2 つのスロットを示しています。

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

background-color プロパティをコンテナーに追加するには、[CSS スタイル] フィールドに「background」と入力します。UI Builder により、追加するプロパティが提案されます。[background-color] を選択し、色名を入力して色の提案を取得します。

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

[コンポーネントのラベルと ID を編集] アイコン

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

スロットの操作

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

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

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

コンポーネントを含みフレックス方向を示すスロットの図。[フレックス方向 (Flex direction)] を [行] に設定すると、コンポーネントは水平方向に配置されます。[フレックス方向 (Flex direction)] を [列] に設定すると、コンポーネントは垂直方向に配置されます。

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

[フレックス方向 (Flex direction)] が [列] に設定されたスロットと、[行] に設定されたスロットがあり、カーソルを合わせた場合と合わせていない場合の [コンポーネントを追加] アイコンを示すイメージ

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

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

[コンポーネントを追加] が強調表示された [コンテンツ] 階層内のスロット

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

[前にコンポーネントを追加] および [後にコンポーネントを追加] が強調表示された [コンテンツ] 階層内のコンポーネント

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

ヘッダー (Header) というスロットの構成。[フレックス方向 (Flex direction)] は [列] です。[アイテムの配置 (Align items)] は [センター (Center)] に設定されています。[CSS スタイル] フィールドでは、background-color が 水色に設定されています。

演習 (17/27)

演習:ページのレイアウト

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

ページレイアウトの計画

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

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

ヘッダー、レポートセクション、およびリストセクションが強調表示されたページレイアウトのモックアップ

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

ヘッダー行、レポート行、リスト行の 3 つのコンテナーを持つページ本文のメインスロット

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

コンテナーが各行スロットに追加されます。スロットは、アイテムを中央に揃えるように設定されています。新しいコンテナーは、収容スロットの 90 % を埋めるように幅 90 %で構成されます。

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

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

最終的な NeedIt Experience のホームページ

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

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

  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 を編集] アイコン ([コンポーネントのラベルと ID を編集] アイコン) をクリックします。

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

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

      コンポーネントラベルとコンポーネント ID が説明どおりに構成された [コンポーネントの詳細] ダイアログ

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

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

      [CSS スタイル] の background-color CSS が強調表示されたヘッダー行の [レイアウト] タブ

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

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

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

      [ページ] パネルの [コンテンツ] 階層で選択されたヘッダー行 (Header row) のメインスロット

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

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

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

    1. ヘッダー行コンテナーの [コンポーネントを追加] アイコンをクリックします。
    2. [コンポーネント] フライアウトから、[コンテナー] コンポーネントを選択します。
    3. [構成] パネルで、[コンポーネントのラベルと ID を編集] アイコン ([コンポーネントのラベルと 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. ページの構造を確認します。

    ページ階層を持つ [コンテンツ] セクション本文にはメインスロットが 1 つ含まれています。ヘッダー行、レポート行、リスト行の 3 つのコンテナーを持つ本文のメインスロット各行コンテナーには、コンテナーを持つメインスロットがあります。これらの各コンテナーには、定型化されたテキストコンポーネントを保持するスロットがあります。

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

    ヘッダー、レポート、リストの各バーを含むホームページ

記事 (18/27)

コンポーネントの構成

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

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

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

ボタンコンポーネントの構成パネルの [構成] タブ。ボタンには「New」というラベルが付いています。ボタンコンポーネントの全オプションは、バリアント、サイズ、ラベル、アイコン、無効、ツールヒントラベル、ARIA プロパティです。

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

ボタンバリアントのプライマリ、セカンダリ、ターシャリ、正のプライマリ、負のプライマリ。

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

データの表示方法コンポーネントの構成パネルの [構成] タブ。データの表示方法に「今週の誕生日 (Birthdays this week)」というラベルが付いています。ここに表示されている、単一スコアタイプに構成されたデータの表示方法コンポーネントのオプションは、データソース、表示方法タイプ、測定基準です。[構成] タブのセクションには、追加設定、コンポーネントヘッダーの詳細、データ更新設定に関連するプロパティが含まれています。

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

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

記事 (19/27)

インスタンスへの画像の追加

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

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

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

画像ファイルをインスタンスにアップロードするには、Studio で画像タイプのアプリケーションファイルを作成します。

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

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

名前を作成し、画像を選択して画像レコードを作成します。レコード内の画像ファイルの名前は birthday-cake.png で、画像は誕生日ケーキの線画です。

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

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

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

画像の使用

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

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

birthday-cake.png を呼び出す画像コンポーネントの構成。

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

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

誕生日ケーキを背景画像として設定する CSS と、スロットの背景画像としてレンダリングされたケーキ。

演習 (20/27)

演習:ページへのコンポーネントの追加

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

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

演習のこのセクションでは、画像をダウンロードし、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. レコードのイメージを確認します。

        イメージ追加後の needit-logo-green.png のイメージレコード

      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; を追加します。

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

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

    質問:NeedIt ロゴはページタイトルの上にあります。代わりにロゴをページタイトルの横に配置するにはどうしますか?

    回答ヘッダーコンテナーのメインスロットは、[フレックス方向][列] で構成されています。スロット内のコンテンツを隣接させるには、[フレックス方向][行] に設定する必要があります。次のステップで [フレックス方向] を変更します。

    ヘッダーコンテナーのメインスロットの [フレックス方向] を [行] に再構成すると、画像が NeedIt Experience の上ではなく、その横に表示されます。

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

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

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

        フレックス方向
    3. [保存] ボタンをクリックします。

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

      NeedIt Experience のタイトルが NeedIt ロゴの上端に揃えられています。

    5. UI Builder に戻ります。

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

        アイテムの配置 中央
    7. [保存] ボタンをクリックして、プレビューするページを開きます。

    イメージはページタイトルの左側にあり、ページタイトルはイメージの上下中央に揃えられています。

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

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

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

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

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

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

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

      3 列のレイアウトが選択されたレポートコンテナーの [レイアウト] タブ

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

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

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

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

      新しいデータの表示方法コンポーネントの唯一の構成オプションは、データソースの追加です。コンポーネントで他の処理を行うには、その前にデータソースを構成する必要があります。

    2. [データソースを追加] ウィンドウから、NeedIt [x_58872_needit_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. [保存] ボタンをクリックして、プレビューするページを開きます。

最終的な NeedIt Experience のホームページ

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

記事 (21/27)

ページバリアント

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

ページバリアントの仕組みを表す図。ユーザーは単一の URL にアクセスしますが、ユーザー固有のページに転送されます。アプリケーション管理者には管理者バージョンのページ、部門マネージャーには部門固有の情報を提供するページ、アプリケーションユーザーには各自に固有の情報が表示されます。

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

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

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

記事 (22/27)

ページバリアントの作成

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

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

[バリアント] セクションの [作成] リンク

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

[バリアントを作成] ダイアログ

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

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

[オプション] メニューが開き、[複製] メニューアイテムが強調表示されます。

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

複製用の [バリアントを作成 ] には、[バリアント名] のみが必要です。

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

バリアントの対象者、条件、およびアクセス制御を構成する [成功] ダイアログ

記事 (23/27)

対象者の作成

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

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

対象者レコードのフォーム。

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

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

対象者レコードのフォーム。

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

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

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

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

[対象者を追加] ボタンが強調表示された [成功! (Success!)] ダイアログ

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

バリアントのオプションメニューが開き、[対象者を編集] メニューアイテムが強調表示されています。

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

対象者が割り当てられていない [対象者を追加] ダイアログ。

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

「特別行事のユーザー (Special Occasions User)」が選択され、[順番] が「100」に設定されているが、対象者の割り当てがまだ保存されていない [対象者を追加] ダイアログ。

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

[対象者] リストに「特別行事のユーザー (Special Occasions User)」という対象者が割り当てられている [対象者を追加] ダイアログ。

演習 (24/27)

演習:ページバリアントの作成

この演習では、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. [保存] ボタンをクリックします。

    NeedIt 管理者 (NeedIt Admins) が追加された [対象者を追加] ダイアログ

  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 ユーザーである対象者のメンバーには、 ユーザーホームバリアントが表示されます。

      ホームページのバリアントである紫色のユーザーのホーム (User home)

    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 ブラウザーのメインウィンドウで、[ユーザーメニュー] を開いて [代理操作を終了] メニューアイテムを選択します。

演習 (25/27)

演習:ページ作成作業の保存 (オプション)

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

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

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

変更をコミット (Commit Changes)

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

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

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

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

    [変更をコミット (Commit Changes)] メニューアイテムを選択

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

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

    ソースコントロールにコミットするファイルを選択

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

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

    コミットメッセージを入力

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

    変更が正常にコミットされました

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

記事 (26/27)

「ページの作成」のナレッジテスト

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

質問:アプリシェルについて最も的確に説明しているのは次のうちのどれですか?

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


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


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

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


回答:正解は 13 です。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. 本文のレイアウトを選択する。


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


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

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


回答:正解は 124 です。テーブルフィルターは、[ドロップダウン 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 でロードされるページの代替バージョンです。ユーザーの対象者は、ユーザーのロールに基づきます。バリアントは、エクスペリエンスへのアクセスに使用されるデバイスと無関係です。

記事 (27/27)

「UI Builder でのページの作成」のまとめ

コアコンセプト:

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