リスト内のフィールド値の横に画像アイコンを追加する方法Issue Now Platform では、リストに表示されるフィールドに小さなアイコンを追加できます。アイコンは、そのフィールドに常に表示されるように構成することも、特定の条件が満たされた場合にのみ表示されるように構成することもできます。 次のスクリーンショットは、インシデントリストの [発信者] フィールドの横に特別な VIP 画像アイコンを表示するように設計された、初期設定の構成例を示しています。このアイコンは、そのフィールドに入力された [発信者] 値に該当するユーザーの VIP フィールドが true に設定されている場合に、そのフィールドの横に特別な VIP 画像アイコンを表示するように設計されています。 注: この記事で説明する手順は、そのフィールドに関連付けられた フォーム ビューにアイコンを表示することを目的として設計されていません。フォームビューのフィールドにアイコンを追加するには、「 KB0752116 - フォームのフィールド値の横に画像アイコンを追加する方法」を参照してください。 手順 この手順の最初のステップは、追加しようとしているイメージがインスタンスで利用可能であることを確認することです。イメージが現在インスタンス上にまだ見つからない場合 (通常はdb_imageテーブル内)、この最初のステップは、インスタンスへのイメージのインポートで構成されます。これを行うには、次の手順を実行します。 インスタンスの admin 権限を持つアカウントで、インスタンスにログインします。インスタンス上の Content Management -> Design -> Images の場所を参照します。 インスタンスで利用可能なイメージタイプのファイルのリストが表示されます。リストはおそらく複数のページにわたって継続されます。リストで画像が見つかった場合は、その画像レコードの 名前 フィールドの値をメモします。また、すべてのインスタンスに標準画像アイコンの別のソースがあることに注意してください。これらの画像アイコンは、インスタンスですぐに使用できる事前設定されており、その特定のコレクションを変更、削除したり、新しい画像を追加したりすることはできません。この画像のコレクションを確認するには、インスタンスで https://<instance-name>.service-now.com/nav_to.do?uri=%2Fimage_picker.do の URL を使用します。 ここで<instance-name>は、現在ログインしているインスタンスの名前です。これらは、アプリケーションサーバー上で実際に検出される標準の画像ファイルであるため、インスタンスから変更または削除することはできません。ただし、これらの画像は、インスタンス内のさまざまな場所 (フォームやリストなど) に表示されるアイコンまたは画像のソースとして使用できます (現在、いくつかの場所にあります)。フォームで使用するためにこれらの画像を参照する方法は、この記事で説明する方法とは少し異なります。 画像がインスタンスでまだ見つからない場合は、現在画面に表示されているdb_imageレコードリストの上部にある 新規 ボタンをクリックして、新しいdb_imageレコードタイプを作成します。 インスタンスにアップロードする画像の [名前] フィールドに名前を入力します。 この名前は、アップロードされる画像の実際のファイル名と同じである必要はありません。ただし、通常のファイルの命名規則に従う必要があります(つまり、ファイル名に特殊文字やスペースを使用しないでください)。さらに、画像のファイル拡張子は、アップロードされるファイルとして実際のファイルタイプと拡張子を反映する必要があります。許可されるファイル拡張子は、.gif、.png、.jpg、.ico、.svg、.bmpです。フォームにアイコン画像を追加する場合は、通常、非常に小さくシンプルな画像を使用することをお勧めします。14 x 14 ピクセルを超える画像は、通常、画像のトリミングバージョンとして表示されます。 必要に応じて、画像の [カテゴリ] を選択することもできます。また、 アクティブ チェックボックスが選択されていることを確認する必要があります。[Image フィールドラベルの右側にある [クリックして追加] リンクをクリックします。[画像ファイルを選択] ダイアログが表示されます。このダイアログで ファイルを選択 ボタンをクリックします。[ファイルブラウザ] ダイアログウィンドウが表示されます。ローカルマシンでこの参照ダイアログを使用して、レコードにアップロードする画像ファイルを参照して選択します。ファイルを選択したら、[OK] ボタンをクリックします。しばらくすると、ファイルのアップロードが完了し、アップロードされた画像から収集された情報に基づいて、画像レコードの他のほとんどのフィールドが自動的に入力されます。更新ボタンをクリックします。 これにより、カスタムイメージがインスタンスに追加され、リスト上の (またはプラットフォーム内の他の適切な場所) フィールドアイコンとして使用するように構成できます。 インスタンスで画像が利用可能になった後、その画像をリストの特定のフィールドに関連付けられた画像アイコンとして追加できます。次の手順では、これを行う 1 つの方法について説明します。 アドミニストレーターアカウントを使用してインスタンスにログインします。テーブルから、画像アイコン (インシデントまたは問題) を追加するレコードを開きます。画像アイコンを関連付けるフィールドのフィールドラベルを右クリックします。表示されるポップアップメニューから スタイルを構成オプションを選択します。 そのフィールドに既に関連付けられている スタイル レコードのリストが表示されますが、現在は空である可能性があります。 このスタイルレコードリストで 新規 ボタンをクリックします。テーブル および フィールド名 フィールドには、上記の手順で選択したフィールドに基づいて、正しい情報が事前に入力されている必要があります。特定の場合にのみ画像を表示する条件を含める場合は、 Value フィールドで、true または false に評価される javascript: ステートメントを指定し、画像が表示されることを示す値 true を指定することで実行できます。すべてのレコードの横に画像を表示する (条件なし) 場合は、[値] フィールドを空白のままにする必要があります。スタイルテキストボックスに、次のテキストを入力する必要があります。 background-image: url('<Image_Name>');ここで <Image_Name> は、レコードのこのフィールドの横に表示する画像を含むdb_imageレコードの 名前 フィールドの名前です。この [スタイル] フィールドにスタイル属性を追加して、必要に応じてフィールドと画像を構成することもできます。 たとえば、アップロードされた画像が切り取られて表示されている場合や、予想よりも大きく表示されている場合は、必要に応じて background-size スタイルを追加して画像の表示を調整する必要があります。フォームのポップアップビューのフィールド自体に画像が表示されないようにするには、 background-position スタイルと padding-right または padding-left スタイルも指定する必要があります。画像が同じ画像空間で繰り返されないようにするには、 background-repeat: no-repeat; スタイル設定を使用する必要がある場合があります。 フィールドのこれらの追加情報またはその他の追加のスタイル情報を指定したら、 送信 ボタンをクリックします。レコードを保存すると、適切なテーブルに関連付けられたリストの選択したフィールドに、予想どおり画像が表示されます。 Related Links次の画面スニペットに示すように、フォーム上のフィールド名の横に同じ (または別の) 画像を表示するには、別のメカニズムが必要であることに注意してください。 次の KB 記事では、このようなアイコン画像を必要に応じて適切な条件でフォームに表示するために使用できる 1 つの方法について詳しく説明します。 KB0752116 - フォームのフィールド値に関連付けられたイメージアイコンを追加する方法