こんにちは、DX攻略部のヘナトンです。
Salesforceのカスタム項目で画像を表示したいと思ったことはありませんか？
一目でステータス等の状況を判断できるようにしたいと思ったことはありませんか？
今回はそんな要望を叶えるべく、数式項目を活用して画像を表示する方法を解説します。
ゴールイメージ
まずは上記画像の右端の列をご覧ください。
承認状況が色つきで一目でわかるようになっております。
ただの選択リスト項目だと、文字色等の指定はできず、一覧で見た時に瞬時に承認状況を把握するのは難しいですよね、、、。
そこで画像を利用してボックスにし、色分けすることでどの商談がどの承認状況にあるかを一瞬で把握できるのです。
承認画像の設定手順
それでは設定方法を解説いたします。
以下の手順に従って設定してください。
- 承認ステータス項目の作成
- 承認ステータス毎の画像を用意
- 画像を静的リソースに保存
- 数式項目を作成
- リストビューに表示
①承認ステータス項目の作成
設定→オブジェクトマネージャー→商談→項目とリレーション→新規
「選択リスト」を選択し「次へ」
項目の表示ラベル：承認ステータス
各値を改行で区切って入力します。：選択
選択リスト値を入力：未申請、申請中、承認済、却下
項目名：ApprovalStatus
今回は他の設定はそのままにして「次へ」→「次へ」→「保存」
②承認ステータス毎の画像を用意
画像作成ツールなどを使って最終的に表示する画像を用意します。
（フリーハンドで作成も可能です。適当な画像を用意してください）
今回の承認ステータスの値は4つですので、4つの画像を用意してください。
4つの画像が用意できたら、「AppStatus」などと名前を付けてZipフォルダとしてローカルに保存してください。
③画像を静的リソースに保存
設定→ホーム→クイック検索「静的リソース」→新規
名前：ApprovalStatus
ファイルを選択：先ほど作成したZipフォルダを選択
「保存」をクリックして完了です。
④数式項目を作成
いよいよ作成した選択リスト項目の値によって異なる画像を表示する数式項目を作成します！
設定→オブジェクトマネージャー→商談→項目とリレーション→新規
「数式」を選択し、「次へ」
項目の表示ラベル：承認ステータス
項目名：ApprovalStatusPicture
数式の戻り値のデータ型：テキスト
「次へ」をクリック
「高度な数式」タブを選択し、数式の中身を以下のように入力します。
「次へ」→「次へ」→「保存」で完了です。
数式解説
CASE関数：
承認ステータス（ApprovalStatus__c）が「未申請」なら画像1、承認ステータスが「申請中」なら画像2・・・のように一つ目の値と偶数番目の値を比較し、対応する結果（奇数番目の値）を返します。
もし承認ステータスが不明な値だった場合、最後の値を返します。（今回の場合はnull）
CASE(ApprovalStatus__c,
"未申請",画像1,
"申請中",画像2,
・
・
・,
null)IMAGE関数：
第一引数は画像のルートを表します。（resource=静的リソース、ApprovalStatus＝静的リソース名、AppStatus＝Zipフォルダ名、A.png=画像ファイル名）
第二引数は代替テキストです。なんらかのエラーなどで画像が読み込めなかった場合に代わりにテキストを表示します。
第三、第四引数は画像の縦と横の長さです。
IMAGE("/resource/ApprovalStatus/AppStatus/A.png","却下",20,70)
⑤リストビューに表示
最後にリストビューに表示して完成です。
＊リストビューには他の項目と同じように表示可能です。ここでは設定方法は割愛いたします。
まとめ
いかがでしたか？
他の項目作成とは少し違ったアプローチのため、初めはとまどうかもしれませんが、実際に手を動かすと意外と難しくない内容です。
2023年8月現在は画像を表示する専用の項目設定はありませんが、数式項目を工夫すれば可能なのです！
このように画像を表示して見やすい、使いやすいレイアウトを構築していきましょう。
最後までご覧いただきありがとうございました。
