Salesforce のレコード詳細画面に画像を配置する方法　ファイル＆数式項目の場合

前回の記事では「静的リソース＆数式項目」でレコード詳細画面に画像を表示する方法をご紹介しました。今回はファイルにアップロードした画像を数式項目で参照し、表示させる方法についての記事です。基本的に、
アドミニストレーターのトレーニングなどを受講すると、この方法を教わる（と記憶しております）のですが、以前お客様とお話をした際に「そんなことができるんですか？」と驚かれたので、あらためてここでご紹介します。

今回は例として、『取引先』の「評価」の値に応じて、異なる画像を表示するように設定します。

ファイル（ライブラリ）へ画像をアップロードする

使用する画像をアップロードし、ファイルのライブラリで画像へのアクセス権を調整します。

1.アプリケーションランチャーから「ファイル」オブジェクトにアクセスします。



2.画面左の「ライブラリ」をクリックし、続けて今回画像をアップロードするライブラリをクリックします。
※ライブラリを作成しなくても画像はアップロードできますが、管理のしやすさからライブラリを使用することをおすすめします。


3.画面右上の「ファイルを追加」をクリックします。


4.PCに保存してあるファイルを追加する場合は、画面左上の【ファイルをアップロード】をクリックしてファイルを追加し、【完了』をクリックします。
すでにSalesforceにアップロードしてあるファイルをライブラリに追加する場合は、画面右上の「ファイルの検索…」からファイルを検索し追加します。


作業を繰り返し、使用する画像ファイルをすべてライブラリに追加します。


5.ライブラリ名の右横の「▼」をクリックし、「メンバーの管理」をクリックします。



6.「人」か「公開グループ」を検索して選択し、「アクセス」の選択リストで「Viewer」を選択して、最後に「追加」をクリックします。
数式項目（IMAGE関数）の参照権限があっても、画像の参照権限がなければ、数式項目で画像が表示されないので、この設定は忘れないようにしましょう。

画像ファイルのURLを取得

ライブラリの画像ファイル名をクリックし、画像アドレスを取得（Chromeの場合、右クリックし、「画像アドレスをコピー(C)」をクリック）します。数式作成時に使用するので、テキストでメモなどに残しておきましょう。

IMAGE関数を使ったカスタム数式項目を作成する

カスタム数式項目の作成方法は、前回の記事「Salesforce のレコード詳細画面に画像を配置する方法　静的リソース＆数式項目の場合」の後半部分とほぼ同様です。数式の内容が異なりますので、手順の詳細は前回の記事をご参照ください。

取引先の「評価」の選択リスト値が、次のように表示されるようにします。
「高」のとき、赤の炎の画像
「中」のとき、黄色の炎の画像
「低」のとき、青の炎の画像

次の数式項目を作成します。
データ型：数式
数式の戻り値のデータ型：テキスト
数式：
CASE(Rating,
"高",IMAGE( "/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0000I00000ABCdE&operationContext=CHATTER&contentId=00X0X00000X0X0" , "" , 200, 200 ) ,
"中",IMAGE( "/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0000I00000ABCdE&operationContext=CHATTER&contentId=00X0X00000X0X0" , "" , 200, 200 ) ,
"低",IMAGE( "/sfc/servlet.shepherd/version/renditionDownload?rendition=ORIGINAL_Png&versionId=0000I00000ABCdE&operationContext=CHATTER&contentId=00X0X00000X0X0" , "" , 200, 200 ) ,
"No Image"
)


・CASE関数とIMAGE関数を使用しています。
・太字の部分が画像アドレスになります。Salesforce ドメイン （「 https://www.salesforce.com 」など）を削除し、二重引用符で囲んで数式に挿入します。
・今回、代替テキストは設定していません。
・heightとwidthは省略可能ですが、省略すると元画像のサイズで表示されます。
また、heightとwidthのどちらかのみを設定することはできません。
heightとwidthを設定すると、元画像の縦横比に関係なくリサイズされるため、画像が縦長や横長になることがあります。

レコード詳細ページを見てみると…

画像が表示されました!


ちなみに、この画像はリストビューでも表示されます。


大きすぎるときは画像サイズを調整します。

注意事項

コンパクトレイアウトに数式項目で画像を表示したい場合は、必ず「ファイル」にアップロードした画像を使用します。
◇ SALESFORCE ＞ヘルプ ＞ナレッジ ＞「数式」項目での画像の使用

ひとこと＆予告

次回はリッチテキストコンポーネントでの静的リソースの参照について書きたいと思います。
なお、絵文字も項目値や入力規則などで使用できますので、「絵文字で画面を華やかに⁉」も是非ご参照ください。記事内では例にありませんが、数式の戻り値としても設定できます。

関連記事

Salesforce のレコード詳細画面に画像を配置する方法　静的リソース＆数式項目の場合
Salesforce の画面に画像を配置する方法　静的リソース＆リッチテキストコンポーネント