Salesforce のレコード詳細画面に画像を配置する方法　静的リソース＆数式項目の場合

「百聞は一見に如かず」と言うのは大げさかもしれませんが、視覚的なイメージのわかりやすさを上手に使うことで、「面倒くさい」「難しい」という心のハードルを下げることができるなら、それだけでも万々歳ではないかと思います。

何を言いたいかというと、Salesforce上でも画像を自由に配置したら、ユーザの操作を助けてくれるかもしれないので、これからご紹介する方法を是非とも覚えていただきたい、ということです。

静的リソース＆IMAGE関数で項目の値として画像を表示

静的リソースとは

ヘルプを見てみましょう。
◇ SALESFORCE ヘルプ ＞ドキュメント ＞コードを使用した SALESFORCE の拡張 ＞静的リソース

静的リソースにより、アーカイブ (.zip や .jar ファイルなど)、画像、スタイルシート、JavaScript、その他のファイルなど、Visualforce ページ内で参照できるコンテンツをアップロードできます。

「Visualforce⁉」とちょっとハードルを感じてしまうかもしれませんが、とりあえずはざっくり「Salesforce組織内で参照できるコンテンツ」ということで覚えておいていいと思います。

IMAGE関数とは

◇ SALESFORCE ヘルプ ＞ドキュメント ＞コードではなくてクリックによる SALESFORCE の拡張
数式の演算子と関数 I – Z

IMAGE

説明:  代替テキストおよび高さと幅の仕様が含まれる画像を挿入します。

使用方法:    
IMAGE(image_url, alternate_text, height, width)、image_url は、画像へのフルパスで置き換えます。alternate_text は、何らかの理由で画像を表示できないときに表示するテキスト文字列で置き換えます。このテキストはスクリーンリーダーソフトウェアで使用できます。height は、画像の縦のサイズ (ピクセル単位) で置き換えます。width は、画像の横のサイズ (ピクセル単位) で置き換えます。
レポートの場合、画像のサイズはレポート列に収まるように自動的に変更されません。height および width パラメータを使用して、画像のサイズを明示的に変更し、一部が切り捨てられずに列に収まるようにします。

例:    
HYPERLINK("ymsgr:sendIM?" & Yahoo_Name__c, IMAGE("http://opi.yahoo.com/online?u=" & Yahoo_Name__c & "&m;=g&t;=0", "Yahoo"))
で、誰かがサービスにログインしていることを示す、クリック可能な Yahoo! Messenger アイコンが表示されます。ユーザは、その人物と Yahoo! Messenger の会話を起動するために、このアイコンをクリックできます。この例では、Yahoo! Messenger ID を格納できる取引先責任者の [Yahoo 名] というカスタムテキスト項目を使用しています。

ヒント:    
height と width パラメータは、省略可能です。
image_url と alternate_text パラメータには、テキスト文字列を使用します。各テキスト文字列は、引用符で囲みます。
height と width パラメータには、数値を使用します。
画像を他に表示する場合は、[ドキュメント] タブに追加します。たとえば、商品の画像をドキュメントフォルダに格納し、URL をドキュメントにコピーして、[商品] タブにある数式項目の image_url パラメータに、その URL を貼り付けます。
Internet Explorer を使用する場合は、画像で HTTP プロトコルが使用されるときに警告メッセージが表示されないように、セキュリティ設定の変更が必要になる可能性があります。セキュリティ設定の変更手順は、Internet Explorer のオンラインヘルプを参照してください。
IMAGE 関数には、引数として GETSESSIONID 関数を含めることはできません。
IMAGE 関数は、数式項目とメールテンプレートでのみ使用できます。

今回は、画像の静的リソースを作成し、オブジェクトの数式項目でIMAGE関数を使用して、静的リソースを参照するように設定します。
例として、『商談』にこちらの画像を表示する「商談成立」という数式項目を作成します。画像を表示させられるかの検証のため、実用的な例ではございませんが、何卒ご了承ください。

静的リソースを作成する

1.［設定 ＞ホーム ＞カスタムコード ＞静的リソース］の画面を開いて、【新規】をクリックします。



2.「名前」を入力し、ファイルを選択して保存します。
「説明」は必要に応じて入力してください。「キャッシュコントロール」は、コミュニティなどを使用していない場合は、「公開」でOKです。


保存後はこんな感じで表示されます。

オブジェクトにIMAGE関数を使ったカスタム数式項目を作成する

今回は『商談』オブジェクトに項目を作成します。

1.［設定 ＞オブジェクトマネージャ］にて『商談』を検索し、「項目とリレーション」のセクションで【新規】をクリックします。


2.「データ型」は数式を選択します。


3.「項目の表示ラベル」「項目名（API参照名）」を入力し、「数式の戻り値のデータ型」はテキストを選択します。


4.数式を入力します。

IMAGE( "/resource/image_name" ,alternate_text, height, width )

・「image_name」の部分に、作成した静的リソースの名前を挿入します。
・「alternate_text 」は、代替テキスト（画像が表示されないときに代わりに表示されるテキスト）を入力します。
・「 height, width 」では高さと幅をピクセルで指定します。

今回の数式はこうなりました。

IMAGE("/resource/ClosedWonPic" , "商談成立" ,320,320)



数式を入力し、【構文を確認】をクリックしてエラーが出ないことを確認したら、【次へ】をクリックします。


5.項目レベルセキュリティを設定し、【次へ】をクリックします。


6.項目を追加するページレイアウトを選択し、【保存】をクリックします。


これで設定は終了です！

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

画像が表示されました。

注意事項

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

ひとこと＆予告

自分の検証環境など、自由にできる組織では画像を多用して遊びすぎる傾向があるのですが、作業としても楽しいので、まだ設定したことがない皆さまにも是非覚えてもらいたいです。
明日は予定通りに事が運べば、IMAGE関数で「ファイル」にアップロードした画像の参照、またはリッチテキストコンポーネントでの静的リソースの参照について書きたいと思います。

関連記事

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