商品画像のようなレコード毎に異なる画像をリストビューで表示させる

リストビューや関連リストで画像を表示させる方法のご紹介です

chirosuke

2021/12/23 10:16:22

「商品を商談に追加する際に商品画像を表示できるようにしたい」とご相談を受けましたが、その時は標準機能での設定方法が浮かばずご案内できなかったので、こちらでリストでも画像を表示させる設定方法を紹介したいと思います。
（レコード詳細画面で画像を表示させるだけであれば、リッチテキスト項目で可能ですがリストビューでは表示されません。参考記事）

設定方法

１．画像を表示させたいオブジェクトにカスタム項目を２つ作成する

①画像のＵＲＬを格納するテキスト項目を作成します。
次で作成する数式項目で参照するので、テキストで作成します。

②IMAGE関数を使用して画像を表示させるので、戻り値のデータ型はテキストで数式項目を作成します。
数式：IF(ISBLANK( ①の項目のAPI参照名 ),"", IMAGE( ①の項目のAPI参照名 ," ",50,50))
サイズは50ピクセルにしていますが、ご希望のサイズに設定してください。
IMAGE関数についてのヘルプはこちら

2．画像をSalesforceにアップロードする

静的リソースを使用するのかファイルを使用するのかは要件に合わせてご検討ください。

＜参考ページ＞
　関連記事：静的リソースを使う理由（ノーコード編）
　ヘルプ：静的リソース、ファイルのサイズおよび共有の制限

今回はファイルで設定していきます。
ファイルタブ → 画像をアップロードするライブラリ → [ファイルを追加]をクリック → [ファイルをアップロード]をクリック → 画像を選択(10個までまとめて選択可能)

もしライブラリに画像見せたいユーザに参照権限がない場合は追加してください。項目に参照権限があっても、画像が参照できないユーザには表示されません。
追加方法はこちら→Salesforce のレコード詳細画面に画像を配置する方法　ファイル＆数式項目の場合

3．画像のURLを表示させたいレコードに入力する

①表示させる画像のアドレスをコピーします。

②１．①で作成したテキスト項目にSalesforceドメインを含めずに画像のアドレスを入力します。
例：
https://XXXXXXX.documentforce.com/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0685h000005Ze9y&operationContext=CHATTER&contentId=05T5h00000IMCY6

↓

/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0685h000005Ze9y&operationContext=CHATTER&contentId=05T5h00000IMCY6

画像のURL項目は項目レベルセキュリティでシステム管理者と商品管理担当者以外の参照権限を外してしまう方が見た目的にも管理的にもおすすめです。

標準オブジェクトの商品でなければここで設定は完了になると思いますが、標準オブジェクトの商品で画像を表示させている場合は商談で商品選択時も画像を表示させたいと思いますので、次の設定も行ってください。

4．価格表エントリの検索レイアウトを修正する

①「商品を追加」のリストは価格表エントリで設定できますので、検索レイアウトの「デフォルトのレイアウト」に作成した画像項目を追加します。

このように表示させることができます。商談の関連リストの商品でも表示させる場合には次の設定も行ってください。

5．商談商品のカスタマイズ

①商品の画像を参照するクロスオブジェクト数式項目を「商談商品>」「価格表エントリ>」→「商品>」→「1．②の商品画像の項目」で作成します。

②商談ページレイアウトの関連リストのプロパティで5．①で作成した項目を追加します。

追加すると関連リストでも画像が表示できます

おわり🐾

gilde tech(for Salesforce)」に入会しませんか？
登録すると、「gilde tech」に掲載されているSalesforceのノウハウを全部閲覧できるだけでなく、自分が知っている知識を発信し、他の会員と交流することもできます。
またSalesforceの知識習得に役立つイベント情報も得ることができます。
是非ここで得た知識を業務に活かしてください！

リストビュー