フォームのフィールド値の横に画像アイコンを追加する方法Issue 初期設定のインスタンスのいくつかのフォームでは、そのフォームの特定のフィールドの横に小さなアイコンまたは画像が表示される場合があります。これは通常、そのフィールドに設定された特定のフィールド値を示します。 この記事では、標準フォームのほぼすべてのフィールドに対してこれを行う方法について説明します。 手順 このようなアイコンを表示するようにインスタンスを構成するには、いくつかの手順を実行する必要があります。 最初のステップは、フォームに表示される画像が現在インスタンスにあることを確認することです。 インスタンスに画像が見つからない場合は、次の手順を使用して簡単に追加できます。 インスタンスの管理者権限を持つアカウントで、インスタンスにログインします。インスタンス上の次の場所を参照します。[コンテンツ管理] -> [設計] -> [画像]db_image レコードのリストが表示されます。 これらのレコードは、インスタンスで現在見つかる、さまざまな目的に使用できる特定の画像に対応しています。リストはおそらく複数のページにまたがります。 使用する予定の画像がこのリストにすでに存在する場合は、再度アップロードする必要がないため、その画像レコードの [名前] フィールドの値をメモしておきます。多くの場合はインスタンス上に画像がまだ存在しないので、現在画面に表示されている db_image レコードのリストの上部にある [新規] ボタンをクリックして、新しい db_image レコードを作成します。インスタンスにアップロードする画像の [名前] フィールドに名前を入力します。 この名前は、アップロードされる画像の実際のファイル名と同じである必要はありません。ただし、この名前は通常のファイル命名規則に準拠している必要があります (つまり、ファイル名に特殊文字やスペースを使用しないでください)。 さらに、画像のファイル拡張子は、アップロードされるファイルの実際のファイルタイプと拡張子を反映する必要があります。 使用できるファイル拡張子は、.gif、.png、.jpg、.ico、.svg、および .bmp です。 フォームにアイコン画像を追加する場合、通常、14 x 14 ピクセルを超える画像は、このコンテキストではトリミングされた画像として表示されるため、小さくて単純な画像を使用することをお勧めします。 必要に応じて画像のカテゴリを選択することもできます。また、この新しい db_image レコードの [アクティブ] チェックボックスがオンになっていることも確認する必要があります。[画像] フィールドラベルの右側にある [クリックして追加] リンクをクリックします。 [画像ファイルを選択] ダイアログが表示されます。 このダイアログフォームで、[ファイルを選択] ボタンをクリックします。[ファイルブラウザ] ダイアログウィンドウが表示されます。 ローカルマシンでこの参照ダイアログを使用して、レコードにアップロードする画像ファイルを参照して選択します。ファイルを選択したら、[OK] ボタンをクリックします。しばらくするとファイルのアップロードが完了し、db_image レコードの他のほとんどのフィールドが必要に応じて自動入力されます。[更新] ボタンをクリックして、レコードを保存します。 新しい画像レコードは [db_image] テーブルで検出され、インスタンス内のさまざまな場所で画像アイコンとして使用できます。 インスタンスには、標準画像アイコンの別のソースもあることに注意してください。 これらの画像アイコンはインスタンスで事前構成されており、変更、削除、またはこの特定のコレクションに新しい画像を追加することはできません。 この画像コレクションを確認するには、インスタンスで次の URL を使用します。 https://<instance_name>.service-now.com/nav_to.do?uri=%2Fimage_picker.do ここで、 <instance_name>は現在ログインしているインスタンスの名前です。 これらはアプリケーションサーバー上に実際に存在する標準画像ファイルであるため、インスタンス上で変更または削除することはできません。 ただし、これらの画像は、製品のさまざまな場所にあるアイコンまたは画像のソースとして使用できます (現在、いくつかの場所で使用されています)。 フォームでの表示に使用するためにこれらの画像を参照する方法は、この記事で説明されている方法とは少し異なります。 これらの標準インスタンス画像の使用方法の詳細については、製品ドキュメント「1 つ以上の画像をアップロード」を参照してください。 インスタンスで画像が見つかったら、必要に応じてフォームに画像を表示するオブジェクトを作成できます。 したがって、まず、テーブルフォームと、画像を表示する特定のフィールド (たとえば、インシデントレコードフォームの [優先度] フィールド) を決定します。 実際は、このような画像やアイコンをフォームに表示する方法は複数ありますが、この記事 (および例) では、クライアントスクリプトレコードの作成を通じてこれを行います。 したがって、新しいクライアントスクリプトレコードを作成する必要があります。 これは、[システム定義] -> [クライアントスクリプト] にアクセスして実行できます。 表示されるクライアントスクリプトレコードのリストから、[新規] ボタンをクリックします。 新しいクライアントスクリプトレコードのフィールドには、画像を関連付ける特定のテーブルとフィールドに応じて入力する必要があります。 名前：クライアントスクリプトの動作を示す名前を指定する必要があります (「高優先度のアイコンを表示」など)。 [テーブル] フィールドは、画像を表示するフォームが関連付けられているテーブル (この例ではインシデント) に設定する必要があります。 [UI タイプ] は、画像を表示するデバイスのタイプ (デスクトップ、モバイル、またはその両方) に基づいて設定する必要があります。 デスクトップとモバイルデバイスでは画像とフォームの表示が大きく異なる場合があるため、両方のデバイスタイプでドキュメントを正しく表示するためには、デバイスのタイプごとに異なるクライアントスクリプトを作成する必要があります。 ほとんどの場合、[タイプ] フィールドは [onChange] に設定する必要があります。 他のオプションも選択できますが、onChange イベントは、レコードの初期表示時を含め、選択したフィールド値 ([フィールド名] フィールドで設定) が変更されるたびに発生します。 [フィールド名] フィールドは、この画像を関連付けるフィールド (この例では [優先度]) に設定する必要があります。 このクライアントスクリプトレコードの機能の基本的な説明を指定できます。 クライアントスクリプトが機能し、必要に応じて画像を表示するには、[アクティブ] フィールドを true に設定する必要があります。 [スクリプト] フィールドには、フォームに画像を追加し、フォームに画像を表示する特定の条件を制御する機能が追加されます。 このフィールドで使用される特定のアルゴリズムはケースごとに異なるため、正確なデータは表示されません。 この例では、前のステップでアップロードした db_image レコードを、インシデントフォームの [優先度] フィールドに対応するラベルの右側に表示します。 最も単純な形式では、スクリプトは ServiceNow Javascript で構成され、この画像を表示するフィールドのラベルにスタイルを追加します。 その前に、レンダリングされたページで見つかったラベルをドキュメントオブジェクトモデル (DOM) が参照する名前を決定する必要があります。 これを判断する方法の 1 つは、適切なタイプのレコードを開き、フォームを含むフレームのページソースを表示することです。 次に、ページソースを確認して、画像を関連付けるフォーム上の要素に対応する div または label フィールドの ID または名前を見つけます (この例では、要素の ID が element.incident.priority であることがわかります)。 したがって、すべてのレコードのラベルの横に画像を表示する非常に基本的な例として、クライアントスクリプトレコードの [スクリプト] フィールドには次のような記述が見つかります。 function onChange(control, oldValue, newValue, isLoading) { var priorityLabel = $('element.incident.priority'); priorityLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition:} ほとんどの場合、特定のスクリプトは多少複雑になります。これは、アドミニストレーターがアイコンを条件付きで表示し、他のフィールドやラベルを操作したり、追加のスタイルを適用したりする場合があるためです。 適切なスクリプトを [スクリプト] フィールドに追加した後に、必要に応じてレコードの他のフィールド ([説明]、[継承] など) を設定できます。 [送信] または [保存] をクリックしてクライアントスクリプトレコードを保存します。 すべてが正常に機能している場合、イメージはクライアントスクリプトで指定されたとおりに表示されます。 表示される位置や条件を調整するために、スクリプトを変更する必要がある場合があります。 Related Linksこれらの手順では、レコードのリストビューに画像が表示されることはありません。 ただし、次のスクリーンショットに示すように、同様のプロセスを実行して、同じ (または異なる) アイコンまたは画像をリストビューのフィールドの横に表示することもできます。 次の KB 記事では、このような画像またはアイコンをリストビューに表示するために必要な手順について説明しています。 KB0751636：リストのフィールド値の横に画像アイコンを追加する方法