記事 (1/27)
このモジュールでは、次のことを学習します。
記事 (2/27)
重要:この学習モジュールの内容は、Rome ServiceNow リリース用に最後に更新されました。
この学習モジュール全体で Special Occasions アプリケーションを使用して、アプリケーション作成の基礎である概念とプロセスを紹介し、実際に示します。Special Occasions アプリケーションの構築は行いません。
演習では、NeedIt アプリケーションを開発します。
演習は、次の 3 つの方法で示されます。
NeedIt アプリケーションを使用すると、ユーザーは複数の部門からのサービスを要求できます。ソースコントロールを使用して、この学習モジュールに必要なすべての NeedIt アプリケーションファイルから始めます。
演習 (3/27)
ServiceNow は GitHub を使用して、開発者サイトの学習コンテンツをコピーして使用するアプリケーションリポジトリを提供します。リポジトリには、アプリケーションファイルの固定セットであるタグが含まれているため、部分的に構築されたアプリケーションを使用して作業を開始できます。ServiceNow が提供するリポジトリを個人開発者インスタンス (PDI) にコピーしてインポートすることで、モジュール内の実践的な演習に必要なすべてのファイルを取得できます。
注意:ServiceNow が開発者プログラムの学習コンテンツで GitHub を使用する方法の詳細と、リポジトリをフォークしてアプリケーションをインポートする方法に関するビデオを見るには、『GitHub ガイド』を参照してください。
この演習では、次のことを行います。
重要:リポジトリを既にフォークしてインポートしている場合は、次の演習に進み、タグから分岐を作成して、アプリケーションファイルを PDI にロードできます。モジュールを完了するには、NeedIt アプリケーションファイルが必要です。
演習のこのセクションでは、開発者サイトの学習コンテンツで使用するアプリケーションリポジトリのパーソナルフォークを作成します。
演習のこのセクションでは、アプリケーションリポジトリを ServiceNow にインポートします。プロセスの一環として、まず GitHub アカウントの資格情報レコードを作成してから、Studio を使用してアプリケーションリポジトリを PDI にインポートします。
演習 (4/27)
この演習では、「ページ作成」モジュール (モジュールで使用するアプリケーションファイルを含む) 用に NeedIt アプリケーションの分岐を作成します。
注意:この演習を開始する前に、「演習:「ページ作成」モジュール用のリポジトリのフォークとアプリケーションのインポート」の説明に従って、NeedIt リポジトリをフォークしてインポートする必要があります。
記事 (5/27)
エクスペリエンスとは、ユーザーがアプリケーションを操作するための Web ページのコレクションです。
多くの Web サイトでは、各ページで同じ基本構造が使用されています。たとえば、各ページに同じフッター、同じヘッダー、同じメニューがあります。一般的なページ要素はシェルです。エクスペリエンスでは、エクスペリエンスのページごとにシェルまたはラッパーを含めることができます。シェルを使用すると、ユーザーがページ間を移動してもエクスペリエンスで一貫したルックアンドフィールが得られます。シェルは必須ではありません。
ServiceNow には、次の 2 つのシェルがあります。
エクスペリエンスのページでは、エクスペリエンスに使用するシェルに関係なく、同じ作成プロセスを使用します。
記事 (6/27)
エクスペリエンスを作成するには、次の 2 つのレコードが必要です。
カスタムアプリケーションの UX アプリケーションレコードを作成するには、Studio で編集するアプリケーションを開きます。[アプリケーションファイルを作成] ボタンをクリックします。
[アプリケーションファイルを作成] ダイアログで、[Now Experience] カテゴリから [UX アプリケーション] を選択します。
[作成] ボタンをクリックします。
UX アプリケーションレコードを構成します。
UX アプリケーションレコードで、[管理パネル] フィールドの [リストからドキュメントを参照] アイコン () をクリックします。
注意:[管理パネル] フィールドはグレー表示になっており直接変更することはできませんが、フィールドの [リストからドキュメントを検索] アイコンを使用して更新できます。
[ドキュメントを選択] ダイアログの [ドキュメント] フィールドの [リストから参照] アイコン () をクリックします。
[UX アプリ構成] リストの [新規] ボタンをクリックします。
UX アプリ構成レコードを構成します。
[クエリ文字列をエンコード]、[アイコン]、[説明] の各フィールドは、ここでは使用されていません。
[送信] ボタンをクリックします。[ドキュメントを選択] ダイアログで [OK] ボタンをクリックします。UX アプリケーションレコードの [更新] ボタンをクリックして、エクスペリエンスの作成を完了します。
演習 (7/27)
この演習では、NeedIt アプリケーションの UX アプリケーションレコードと UX アプリ構成レコードを作成します。UX アプリケーションレコードは、空のアプリシェル UI を使用します。
演習のこのセクションでは、エクスペリエンスの UX アプリケーションレコードを作成します。空のアプリシェルを使用するようにエクスペリエンスを設定します。
演習のこのセクションでは、UX アプリケーションレコードから UX アプリ構成レコードを作成します。UX アプリ構成レコードで、エクスペリエンスのデフォルトページをホームに構成します。ホームページは、この学習モジュールの後半で作成します。ユーザーがエクスペリエンスを開くと、 ホームページが表示されます。
記事 (8/27)
ページとは、ユーザーがエクスペリエンスをナビゲートするときに操作するコンポーネントのコレクションです。ページを作成する前に、ページの目的とページに含める必要のあるコンテンツを特定します。「5W」に回答して、ページの計画に役立つ基本情報を収集します。
ServiceNow には、ページの作成時に使用できるページテンプレートが用意されています。ページの作成前に、使用可能なテンプレートを確認してください。意図したページの目的に一致するテンプレートがありますか?事前設定されたコンテンツを含み、ページをより迅速に構築できるテンプレートがありますか?
構築する前に、ページのレイアウトを検討します。コンテンツをページの中央に配置する必要がありますか?ページに列を含める必要がありますか?どのコンテンツをページの上部に表示する必要がありますか?ページに使用する色と画像については、視覚障害者を考慮してください。会社の色、ロゴ、および設計ガイドラインも活用できます。
記事 (9/27)
UI Builder でエクスペリエンスページを作成し、編集します。UI Builder は Studio または ServiceNow のメインインターフェイスから開くことができます。
Studio から UI Builder のエクスペリエンスを開くには、UX アプリ構成レコードを開き、[UI Builder で開く] ボタンをクリックします。新しいブラウザータブに UI Builder が開きます。
ServiceNow のメインインターフェイスから UI Builder のエクスペリエンスを開くには、Application Navigator を使用して [Now Experience フレームワーク] > [UI Builder] を開きます。エクスペリエンスの [表示名] の値をクリックして開きます。
エクスペリエンスには、デフォルトではページがありません。初めてエクスペリエンスを開くときに [ページを作成] ボタンをクリックして、エクスペリエンスの最初のページを作成します。
ページがあるエクスペリエンスでページを作成するには:
[ページの作成] ダイアログでページを構成します。
[作成] ボタンをクリックします。
[成功! (Success!)] ダイアログで追加のページ設定を構成するか、[完了] ボタンをクリックします。
ページパラメーターとテンプレート構成については、別途この学習モジュールで説明します。
演習 (10/27)
この演習では、 NeedIt Experience のページを 2 つ作成します。1 つはテンプレートから、もう 1 つは最初から作成します。
演習のこのセクションでは、テンプレートから [簡易リスト] ページを作成します。この学習モジュールの後半では、テンプレートを使用するようにページを構成します。
注意:[簡易リスト (Simple List)] ページのコンテンツは読み取り専用です。この学習モジュールの後半では、テンプレートを参照するページの設定方法を学習します。
演習のこのセクションでは、テンプレートを使用せずにページを作成します。
記事 (11/27)
UI Builder は、見たままを得られる (WYSIWYG) Web ユーザーインターフェイスビルダーです。UI Builder を使用して、Web エクスペリエンス用のページを作成します。
UI Builder には、デフォルトで次の 5 つの表示セクションがあります。
[ページ] パネルで選択したページが、[ステージ] に開きます。[ページ] 選択リストを使用して、編集するページを選択します。
[ページ] パネルには、[バリアント] と [コンテンツ] の 2 つのセクションがあり、いずれについてもこの学習モジュールの後半で詳しく説明します。
アイコンバーの [ページを非表示] アイコン () をクリックすると、[ページ] パネルが非表示になります。[ページを表示] アイコン (
) をクリックすると、パネルが再び表示されます。
ページレイアウトは、 コンポーネントで構成されます。コンポーネントは、ページの構成要素です。コンポーネントは、コンテナーコンポーネントまたは非コンテナーコンポーネントのいずれかです。
この学習モジュールでは、コンテナーコンポーネントをコンテナー、非コンテナーコンポーネントをコンポーネントと簡略化して呼びます。
[ページ] パネルの [コンテンツ] セクションまたはページ上でコンポーネントを選択し、[構成] パネルでコンポーネントの構成を管理します。[構成] パネルのタイトルは、選択したコンポーネントに応じて変化します。
各コンテナーの [構成] パネルには、[構成]、[レイアウト]、および [イベント] のタブがあります。各コンポーネントの [構成] パネルには、[構成]、[スタイル]、および [イベント] のタブがあります。
[構成パネルを非表示] アイコン () をクリックして、[構成] パネルを非表示にします。[構成パネルを表示] アイコン (
) をクリックすると、パネルが再び表示されます。
UI Builder のヘッダーにある [URL] フィールドの [開く] リンクをクリックします。ページが新しいブラウザータブで開きます。
新しいブラウザータブの URL は、ユーザーがエクスペリエンスにアクセスするために使用する URL と同じです。
記事 (12/27)
ページパラメーターによってページが動的になります。ページパラメーターはページ URL で渡されます。たとえば、ページの表示時に開くレコードを指定するパラメーターをページに含めることができます。
ページの作成時にパラメーターを追加するには、[成功! (Success!)] ダイアログの [詳細 URL 設定] セクションを使用します。[必須パラメーターを追加] ボタンまたは [オプションのパラメーターを追加] ボタンをクリックしてパラメーターを作成します。
ページの作成後にパラメーターを追加するには、ページの [オプション] メニュー () を開き、[必須パラメーターを編集] または [オプションのパラメーターを編集] メニューアイテムを選択して、パラメーターを作成または編集します。
必須パラメーターはページが機能するために必要な値で、URL で渡されます。たとえば、ページにレコードが表示されている場合、ページはレコードのテーブルと SysID を認識する必要があります。両方の値を必須パラメーターとして渡すことができます。
必須パラメーターの追加または編集時に開く [必須パラメーターを追加] ダイアログで、[+ 追加] リンクをクリックし、パラメーターの名前を入力します。必須パラメーターを、URL に適用される順序で構成します。
すべてのパラメーターを構成したら [保存] ボタンをクリックします。
必須パラメーターは、[必須パラメーターを追加] ダイアログにリストされている順序でページ URL に直接追加されます。たとえば、ページが instance.service-now.com/x/126321/occasions/record で、2 つの必須パラメーター table と sysId がある場合、必須パラメーターの値がパスに直接追加されます。結果は instance.service-now.com/x/126321/occasions/record/x_126321_spec_occ_occasion/77d51c3b1bf1b01068dd5464604bcbfa です。
ページでデータをプレビューするには、UI Builder で使用するテスト値を設定します。UI Builder ヘッダーで [URL] フィールドをクリックします。[値] ダイアログで、必須パラメーターごとにテスト値を入力します。
オプションのパラメーターは、ページに渡すことができますが、ページが機能するために必須ではないパラメーターです。
必須パラメーターの追加または編集時に開く [オプションのパラメーターを追加] ダイアログで、[+ 追加] リンクをクリックします。パラメーターの名前を入力します。以下の図の状態で [保存] ボタンをクリックします。
オプションのパラメーターは、ページ 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 オブジェクトのプロパティ名と完全に一致する必要があります。sysid は sysIdと同じではありません。
開発者は、パラメーターを必須にするかオプションにするかをどのようにして知るのでしょうか?開発者は、ページのコンテンツを確認して判断する必要があります。レコードを開くために必要な詳細のないレコードページには、意味がありますか?いいえ。したがって、table と sysId は必須パラメーターである必要があります。
演習 (14/27)
レコードを使用すると、Web エクスペリエンスの表示がより興味深いものになります。この演習では、スクリプトを使用して、データを取り込んでエクスペリエンスに表示する NeedIt テーブル用のランダムレコードを作成します。
[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールがあると、過去の [必要な場合] フィールド値で [NeedIt] レコードが作成できません。演習のこのパートでは、[NeedIt の [必要な場合] フィールドの日付 (NeedIt When needed field date)] ビジネスルールを非アクティブにするため、過去と将来の両方の [必要な場合] フィールド値を持つ NeedIt レコードを作成できます。
ランダムな NeedIt レコードの生成予定スクリプトの実行が見つからない場合、予定スクリプトの実行を作成する手順については、このセクションを展開してください。
予定スクリプトの実行がタグに追加される前に NeedIt リポジトリをフォークした場合は、予定スクリプトの実行を手動で追加する必要があります。[予定スクリプトの実行] を、インポートする XML ファイルとして以下に示します。
演習 (15/27)
この演習では、[簡易リスト] ページテンプレートのコンポーネントで使用可能なプロパティを表示して、パラメーターを作成します。
演習のこのセクションでは、[簡易リスト] ページを表示して、パラメーターとして構成するフィールド値を特定します。
質問:[構成] タブのどのフィールドがページパラメーターを使用しますか?ページパラメーターを構成するときの各パラメーターの名前は何ですか?
回答:ページパラメーターは、context.props オブジェクトのプロパティに値を渡します。context.props オブジェクトは、[構成] パネルから @context.props の構文で参照されます。パラメーター名は、context.props オブジェクトのプロパティ名と一致する必要があります。
[構成] タブのフィールド | フィールド値 | パラメーター名 |
---|---|---|
タイトル | @context.props.listTitle | listTitle |
テーブル | @context.props.table | table |
フィルター | @context.props.query | query |
ビュー | @context.props.listView | listView |
演習のこのセクションでは、[簡易リスト] ページの必須パラメーターを作成し、テスト値を設定します。
注意:[保存] ボタンがアクティブのように見えても、テンプレートのテスト値を保存することはできません。オプションのパラメーターを設定する場合を含め、現在のページ構成を終了するたびにテスト値をリセットする必要があります。
質問:リストのタイトルは何ですか?リストのレコード数はいくつですか?リストにはどの列が表示されますか?
回答:リストにはタイトルがありません。レコード数は、メインの ServiceNow インターフェイスで [NeedIt] > [すべて] モジュールを開いたときの NeedIt レコードの数と一致します。実際の数値は画像とは異なります。デフォルトの列リストは、テーブルのフィールドのアルファベット順リストです。
学習した内容を使用して、[簡易リスト] ページのオプションのパラメーターを 3 つ作成します。[このページには未保存の変更があります (This page has unsaved changes)] ダイアログが表示されたら、[変更を破棄] ボタンをクリックします。
ソリューション:
演習のこのセクションでは、オプションのパラメーターにテスト値を追加して、オプションのパラメーターがリストにどのように影響するかを確認します。
記事 (16/27)
UI Builder を使用してページをレイアウトします。ページレイアウトは、本文、スロット、およびコンポーネントで構成されます。[ページ] パネルの [コンテンツ] セクションに、ページ構造の階層が一覧表示されます。
コンテンツを表示するか非表示にするには、階層内のコンテナーまたはスロットを展開するか折りたたみます。
デフォルトでは、コンテナーにコンポーネント用のスロットが 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 が水色に設定されています。
演習 (17/27)
この演習では、ヘッダー、レポート、およびリスト行を含むホームページをレイアウトします。いくつかの簡単なテキストコンポーネントと CSS スタイルを追加して、ページレイアウトを確認します。
ホームページの目的は、NeedIt アプリケーションのランディングページを提供することです。ページデザインには、次の 3 つのセクションがあります。
セクションはページの幅全体に広がり、3 行を構成します。ページの幅全体に色を適用するには、ページ本文のメインスロットに各セクション用の「行」コンテナーを作成します。この図は、色付きの行を作成するための構造を示します。[ページ] パネルの [コンテンツ] セクションと合わせるため、この図ではスロット () を示すために点線を使用し、コンテナー (
) を示すために実線を使用しています。
ページコンテンツの周囲に空白を残すために、コンテンツはページ幅の 90 % を使用します。各行コンテナー内でコンテナーをネストして、レイアウトを構成します。レポートとリストのコンテンツはページの中央に揃えられます。ヘッダーのコンテンツは、中央揃えのセクションの左端に揃えられます。このレイアウトを実現するには、行コンテナーのスロットのコンテンツを中央に揃えます。スロットの 90 %の幅を持つコンテナーをスロットに追加します。この図は、行コンテナーのスロットとコンテンツのコンテナーを示しています。
ページのヘッダーにロゴとタイトルが表示されます。このページのプライマリユーザーは、NeedIt アプリケーション管理者です。管理者は、期限切れの NeedIt レコードの数、 要求タイプ別のアクティブな NeedIt レコードのチャート、および今月中に期限の切れる NeedIt レコードの数を確認する必要があります。管理者は、アクティブな NeedIt レコードのリストも表示する必要があります。
この学習モジュールの後半で、ページにコンテンツを追加します。最終的なページには、イメージ、レポート、およびリストが表示されます。
演習のこのセクションでは、ヘッダー行コンテナーとヘッダーコンテナーを含むページのレイアウトを開始します。
演習のこのセクションでは、レポート行コンテナーとレポートコンテナーをページに追加します。この学習モジュールの後半でレポートを追加するまでレイアウトを表示するために、プレースホルダーテキストを追加します。
演習のこのセクションでは、学習した内容を適用して、リスト行コンテナーとリストコンテナーをページに追加します。
記事 (18/27)
コンポーネントは、ページの基本要素です。コンポーネントは、ボタンやラベルなどのコア要素から、リストやフォームなどのより複雑なエクスペリエンスコンポーネントまで多岐にわたります。
コンポーネントごとに独自の構成オプションがあります。
たとえば、ボタンコンポーネントには、サイズやラベルなど、ボタンのルックアンドフィールを構成するためのオプションがあります。この例では、[新規] ボタンは「New」というラベルが付いた中サイズのボタンです。
バリアントプロパティは、エクスペリエンステーマに基づいてボタンの書式設定を指定します。次の図は、デフォルトのテーマのいくつかのバリエーションを示しています。
データの表示方法コンポーネントはボタンよりも複雑で、さまざまな構成オプションが必要です。データの表示方法には、表示するデータに使用するデータソースと、データの表示方法を識別するための可視化タイプが必要です。追加の構成オプションでは、データを集計してデータの表示方法を更新する方法を指定します。この例では、「今週の誕生日」というデータの可視化で、[行事] テーブルをデータソースとして使用しています。今週の誕生日のみを返すフィルターは示されていません。可視化タイプは、データソースによって見つかった行事レコードの数を返す単一スコアです。
コンポーネントプロパティの完全なドキュメントについては、開発者サイトの Now Experience Components のドキュメントを参照してください。ドキュメントには次の内容を含めることができます。
記事 (19/27)
画像を使用して、エクスペリエンスのデザインを強化します。開発者は、UI Builder で作成されるエクスペリエンスの一部として使用する画像を、アプリケーションファイルとしてアプリケーションに追加できます。
アプリケーションに画像を追加するには、Studio で編集するアプリケーションを開きます。[アプリケーションファイルを作成] ボタンをクリックします。
[アプリケーションファイルを作成] ダイアログで、[Content Management] カテゴリから [画像] を選択します。
[作成] ボタンをクリックします。
画像レコードを構成します。
画像を選択すると自動的に設定されるフィールド:
画像を使用するには、[名前] の値で画像を参照します。
たとえば、ページの画像コンポーネントで誕生日ケーキの画像を使用するには、[イメージソース] の値を birthday-cake.png に設定します。
画像をスロットまたはコンテナーの背景として設定するには、CSS の background-image プロパティを使用します。このプロパティでは background-image: url("<image-path/image-name>"); という構文を使用します。コンテナの背景として誕生日ケーキの画像を使用する場合の構文は次のとおりです。
background-image: url("birthday-cake.png");
演習 (20/27)
この演習では、イメージ、データの表示方法、およびリストのコンポーネントをホームページに追加します。
演習のこのセクションでは、画像をダウンロードし、NeedIt アプリケーションに画像を追加して、エクスペリエンスのホームページのヘッダーに画像を配置します。
演習のこのセクションでは、レポートコンテナーで 3 列のレイアウトを使用するように構成します。データの表示方法コンポーネントを追加して、期限切れの NeedIt レコード数を第 1 列に表示します。
演習のこのセクションでは、レポートコンテナーの残りのスロットにデータの表示方法コンポーネントを追加し、レポート行スロットにパディングを追加します。
演習のこのセクションでは、リスト - 簡易コンポーネントをリストコンテナーに追加します。
記事 (21/27)
ページバリアントとは、1 つの URL を共有するページの代替バージョンです。バリアントは、対象者と呼ばれるユーザーグループに対応します。たとえば、 1 つのページにアプリケーション管理者用、部門マネージャー用、アプリケーションユーザー用の 3 つのバリアントがあります。
記事 (22/27)
[ページ] パネルの [バリアント] セクションでページのバリアントを作成します。
[+ 作成] リンクをクリックして、バリアントを最初から作成します。
[バリアントを作成] ダイアログが開きます。このダイアログは [ページの作成] ダイアログに似ていますが、バリアントはデフォルトページと同じパスを使用するため、パスは不要です。
ページを複製して既存のページから開始します。複製するページの [オプション] メニュー () を開き、[複製] メニューアイテムを選択します。
[バリアントを作成] ダイアログが開きます。複製のダイアログには、[バリアント名] の値のみが必要です。
[バリアントを作成] ダイアログの [作成] ボタンをクリックすると、[成功! (Success!)] ダイアログが開きます。[対象者]、[条件]、または [アクセス制御] を使用して、バリアントページを表示できるユーザーを設定します。
記事 (23/27)
ServiceNow のメインインターフェイスで対象者レコードを作成します。Application Navigator を使用して [Now Experience フレームワーク] > [構成要素] > [対象者] を開き、[新規] ボタンをクリックして対象者レコードを作成します。
対象者はユーザーロールに基づいています。
対象者をバリアントに割り当てる一方で、対象者を作成することもできます。[対象者を追加] ダイアログの [プラットフォームで対象者を開く] リンクをクリックして、新しいブラウザーウィンドウで [対象者] リストを開きます。
リストの [新規] ボタンをクリックして、新しい対象者レコードのフォームを開きます。新しく作成された対象者は、[対象者を追加] ダイアログを閉じて再度開くまで、このダイアログで使用できません。
対象者をバリアントに割り当てるには、UI Builder で [対象者を追加] ダイアログを開きます。
バリアント作成プロセスの一部として対象者をバリアントに割り当てるには、[成功! (Success!)] ダイアログの [対象者を追加] ボタンをクリックします。
バリアントの作成後に [対象者を追加] ダイアログを開くには、バリアントの [オプション] メニュー () を開き、[対象者を編集] メニューアイテムを選択します。
バリアントに割り当てられた対象者は、[対象者を追加] ダイアログの [対象者] セクションにリストされます。対象者が割り当てられていない場合は、[対象者を追加] ボタンをクリックしてバリアントに対象者を割り当てます。
対象者の名前の入力を開始し、対象者を選択します。バリアントの対象者に優先順位を付けるには、[順番] に数字を割り当てます。[保存] ボタンをクリックして、対象者をバリアントに割り当てます。
新しく割り当てられた対象者がダイアログの [対象者] セクションに追加されます。[+ 追加] リンクをクリックして別の対象者を割り当てるか、[完了] ボタンをクリックして対象者の割り当てを完了します。
演習 (24/27)
この演習では、NeedIt アプリケーション管理者用と NeedIt アプリケーションユーザー用に 2 組の対象者を作成します。次に、ホームページのページバリアントを作成して、対象者を適用します。バリアントをテストして演習を完了します。
演習のこのセクションでは、NeedIt エクスペリエンスのホームページをユーザーが開くための Application Navigator モジュールを作成します。モジュールとその作成方法の詳細については、学習モジュール「 Create the NeedIt Application and Application Files (NeedIt アプリケーションおよびアプリケーションファイルの作成)」の「モジュール」のページを参照してください。
演習のこのセクションでは、NeedIt admin ロールの対象者を作成します。
演習のこのセクションでは、NeedIt 管理者 (NeedIt Admins) である対象者をホームページに適用します。
演習のこのセクションでは、ホームのデフォルトバリアントを複製して、NeedIt アプリケーションユーザー用のバリアントを作成します。また、プロセスの一環として、NeedIt アプリケーションユーザーである対象者を作成します。
演習のこのセクションでは、学習した内容を適用して、ユーザーホームのページバリアントの外観を更新します。プロセスのステップを完了したら、必ず作業内容を保存してください。
演習のこのセクションでは、NeedIt アプリケーションロールをユーザーに追加し、ユーザーの代理操作を行ってページバリアントへのアクセスをテストします。
演習 (25/27)
開発者は、GitHub のようなソースコントロールアプリケーションを使用して、個人開発者インスタンス (PDI) の外部で変更をコミット (完了した作業を保存) できます。アプリケーションに対する変更内容をコミットして、作業をソースコントロールに保存します。
この演習では、このモジュールで完了した作業を GitHub リポジトリに保存します。
注意:ServiceNow が開発者プログラムの学習コンテンツで GitHub を使用する方法の詳細と、作業を保存する方法に関するビデオを見るには、『GitHub ガイド』を参照してください。
記事 (26/27)
「ページの作成」の理解度を確認しましょう。自分の進行状況を評価するには、次の質問が役立ちます。質問ごとに回答を決定し、質問の任意の場所をクリックして回答を表示します。
質問:アプリシェルについて最も的確に説明しているのは次のうちのどれですか?
回答:正解は 4 です。アプリシェルは、Web エクスペリエンスのすべてのページのラッパーです。ServiceNow には、ポータルとワークスペースという 2 つのアプリシェルが用意されています。
質問:Studio で作成される、 Web エクスペリエンスの基本コンポーネントは次のどれですか?複数の回答が正解の場合があります。
回答:正解は 1 と 3 です。UX アプリケーションと UX アプリ構成は、Studio で作成される基本コンポーネントです。名前の冒頭に UX が付いていないその他の選択肢、およびその他のすべてのエクスペリエンスコンポーネントは、UI Builder に組み込まれています。
質問:正誤問題?テンプレートから作成されたページは変更できません。
回答:正解は誤りです。テンプレートを使用するページはパラメーターを使用して構成する必要があり、ページの変更はできませんが、テンプレートのコピーを使用するページは変更できます。
質問:sortField というオプションのパラメーターを list ページに渡す URL パスは次のどれですか?
回答:正解は 5 です。オプションのパラメーターは、ページと params のパスの後に渡されます。オプションのパラメーターは、パラメーター名、値の順に渡されます。
質問:コンポーネントを保持するページ上の場所は次のどれですか?
回答:正解は 2 です。コンポーネントがスロットに追加されます。コンテナーには、コンポーネントを保持できるスロットが 1 つ以上あります。
質問:ページの構造を構成する方法を説明している文は次のどれですか?複数の回答が正解の場合があります。
回答:正解は 1、3、4、5 です。レイアウトとは、本文またはコンテナー用に選択できるスロットの配置です。スロットまたはコンテナーの CSS スタイルを構成することで、幅、高さ、配置、およびページの構造を操作するその他のプロパティを構成します。
質問:開発者サイトの Now Experience コンポーネントのリファレンスを使用して、開発者が UI Builder でドロップダウンコンポーネントの構成に使用できるプロパティを見つけます。UI Builder で構成できるドロップダウンコンポーネントのプロパティは次のどれですか?複数の回答が正解の場合があります。
回答:正解は 1、2、4 です。テーブルとフィルターは、[ドロップダウン UIB セットアップ (Dropdown UIB Setup)] ページの [プロパティ] セクションにリストされるプロパティではありません。
質問:データの表示方法コンポーネントを構成するときの最初のステップは次のどれですか?
回答:正解は 5 です。他のプロパティを構成する前に、データの表示方法コンポーネントにデータソースが必要です。データソースが選択されるまで、他のプロパティは表示されず、構成できません。
質問:ページでのイメージの使用方法を説明する文は次のどれですか?
回答:正解は 1 です。ServiceNow インスタンスにイメージをアップロードすると、アプリケーションとともにイメージが含められ、参照がローカルに保持されます。技術的には、インターネット上の任意のイメージを使用できますが、イメージの削除や変更が行われたり、使用が違法となる著作権上の制限を有したりする可能性があるため、推奨しません。
質問:バリアントの目的を最も的確に説明している文は次のどれですか?
回答:正解は 3 です。バリアントとは、ユーザーの対象者に基づいて、同じ URL でロードされるページの代替バージョンです。ユーザーの対象者は、ユーザーのロールに基づきます。バリアントは、エクスペリエンスへのアクセスに使用されるデバイスと無関係です。
記事 (27/27)
コアコンセプト: