Salesforceの添付ファイルを表示する画面の作成

みなさんこんにちは。 最近、SkyVisualEditorで作成する画面について、レコードに添付した画像を表示できないかという相談を受けました。残念ながら標準では実現できないのですが、SkyVisualEditorにはさまざまな拡張を行える機能があります。今回はその拡張機能の中から、AppComponentという機能を活用し、レコードに添付した画像ファイルを画面上に表示することができましたので、ご紹介します。

SkyVisualEditorは、Studioと呼ばれる画面において標準で用意されている入力項目やボタンなどの部品（コンポーネント）をドラッグ＆ドロップで配置して画面を作成します。

AppComponentの仕組みを使えば、標準にはない独自の部品が作成できます。さらにStudioでドラッグ＆ドロップの操作で配置もできますので、さまざまな画面で再利用できる部品として活用できるようになります。

標準機能の拡張だけでなく、他社製品も利用できるようにしたAppComponentも提供しておりますので、より詳細を知りたい方は下記のページもご確認ください。

　AppComponentの紹介

なお、AppComponentはSkyVisualEditor VF（以後、SVE VF）でご利用いただける機能となっており、SkyVisualEditor LCではまだ使えませんのでご注意ください。

今回作成したAppComponentは、オブジェクトのレコードに添付された画像ファイルを1つ表示します。AppComponentのパラメータには、表示したいファイルのタイトルを指定できるようになっていますので、複数のファイルが添付されていても、任意のファイルを表示できます。また、同一画面にこのAppComponentを複数配置することで、下記のように複数の添付画像が表示できます。尚、対応している添付ファイルは、画像ファイル（JPEG、GIF、PNG、BMP）となります。

では、このAppComponentを使うとどのような画面ができるのか、3つ例をご紹介します。

多くのお客様と取引がある場合、似たお名前の取引先が複数登録されることはありませんか？似た取引先名だと、一瞬勘違いしてしまう場合もあるかと思いますが、パッと見た瞬間にロゴが目につくと、そんな勘違いも減るのではないでしょうか。

せっかくSVE VFで画面を作成するので、ロゴの表示だけでなくレイアウトも3列表示にして見やすい画面にしてみました。

何らかの作業を行った後、お客様や社内に報告書を提出する機会はありませんか？もし、報告内容をSalesforceで管理しており、さらに作業対象や結果などの画像もレコードに添付されていれば、帳票形式で見やすい報告書が作成できます。

SVE VFでは、帳票を出力するのに適したレイアウトで画面をPDFとして出力する機能がありますので、今回はこの機能を活用して添付された画像も表示しています。

見積を作成する際、明細に記載する商品をマスタから選択されるかと思います。こんな時、先ほどの取引先同様に文字だけでは似たような商品を誤って選択することはありませんか？こんな時も商品画像が表示され、一目で区別ができれば問題ありませんね。

この例では、見積を管理するオブジェクトの関連先から見積明細の情報を作成することを想定して画面を作成しています。関連先のリストボタンをクリックすると、見積明細を作成する画面が表示され、そこで商品マスタをSVE VFで作成したルックアップ画面で選択するようにしています。

このように、SVE VFで開発した画面を便利に拡張できるAppComponentですが、少しその仕組みを説明します。

AppComponentは大きく以下の3つで構成されています。

　・Visualforceコンポーネント

　・Apexクラス

　・静的リソース

Visualforceコンポーネント

AppComponentはVisualforceコンポーネントでできています。SVE VFで開発する画面はVisualforceページとして出力されるため、開発する画面内に組み込むことができます。

Apexクラス

コントローラーとしてApexクラスを利用するため、Salesforceの各機能やAPI、SOQLが実行できます。そのため、より高度な機能を組み込んだコンポーネントが作成できるようになっています。

静的リソース

StudioでAppComponentを扱うには、このコンポーネントがどのようなものなのかを定義しておく必要があります。この定義はXMLファイルで静的リソースに含めることで、Studioに取り込むことができます。その他、コンポーネント上で扱うJavascritpやcss、画像なども含めることができます。

SVE VFで出力される画面はVisualforceではありますが、Lightning Experienceの画面でも利用できます。また、Lightningコンポーネントとしても出力できますので、アクションやユーティリティバーに配置することもできます。

紹介したAppComponentは、Salesforceの組織にインストールしてお試しできます。非管理パッケージとして配布していますので、サンプルコードとして参照することも可能です。なお、本AppComponentにつきましては、サポート対象外となっていますので、実運用に影響が出ないDeveloper環境やSandboxのご利用をおすすめします。お試しいただく場合は、以下の手順でセットアップをお願いします。

1. SVE VFのセットアップ

既にSVE VFをご利用されている場合、この手順は飛ばしてください。

AppComponentをご利用される場合、SVE VFのAppExchangeパッケージを組織にインストールする必要があります。30日間は無料でお試しできますので、まずは下記のリンクからSVE VFのインストールをお願いします。

　SVE VFのインストール

画面を作成する場合は、Studioにログインして作業を行いますので、Studioのサインアップもお願いします。Studioの動作環境およびサインアップは、下記のリンクをご確認ください。Studioにつきましては、どなたでも無料でご利用いただけます。

　Studioの動作環境

　Studioへのサインアップ

2. AppComponentのインストール

AppComponentはSalesforceの非管理パッケージとして提供しています。下記のリンクからパッケージをインストールしてください。インストール時には、「全てのユーザ」を選択してください。

　Developer組織へのインストール

　Sandboxへのインストール

3. StudioでのAppComponentの配置

Studioにログインしていただき、SVE VFの画面が作成できる状態にします。このAppComponentは、Salesforceレイアウトと自由レイアウトに対応していますので、新規作成でどちらかのテンプレートを選択してください。

AppComponentは、左のコンポーネント一覧から選択し、以下の画像のようにドラッグ＆ドロップで好きな場所に配置して利用します。

配置したAppComponentを選択すると、以下の1つのプロパティが設定できます。

・ID

画面上に出力されるコンポーネントのIDです。基本的にはデフォルトのままで大丈夫です。

・画像の幅[px]

表示する画像の幅を指定します。出力されるIMGタグのwidthとして指定されます。0を設定すると、width=""となります。

・画像の高さ[px]

表示する画像の幅を指定します。出力されるIMGタグのheightとして指定されます。0を設定すると、height=""となります。

・表示する画像ファイル名

レコードに添付される画像のタイトルを指定します。タイトルは下記画像の赤枠で囲まれた部分と同じ名称となります。未指定の場合、添付された画像が1つであればこれを表示します。複数ある場合は適当に選択されて表示されます。

・NoImageを表示するか

チェックを入れると、指定した画像がない場合に「NoImage」と書かれた画像を表示します。チェックを外すと、指定した画像がない場合は何も表示しません。

SkyVisualEditorは、ノンコーディングで画面やLightningコンポーネントを作ることができ、標準でできないものでも今回ご紹介したような拡張機能を使うことで、より高度なことが実現できます。より詳しい内容や他にできること、他社の事例などを知りたい方は、こちらからお問い合わせいただけますと幸いです。

今回ご紹介したAppComponentですが、サポート対象外であるため今後のバージョンアップ等で動作が変わる可能性がありますこと、ご了承ください。尚、パッケージは非管理パッケージで提供しておりますので、コードを改善してご利用いただくことは可能です。 もし、製品として機能化をご要望される場合は、こちらのお問い合わせフォームから添付画像表示機能の製品化の旨、記載いただけますと幸いです。

もし、AppComponentの開発にご興味がある方は、開発者向けのCDKも公開しておりますので、こちらから「CDKダウンロード」をクリックし、ご確認ください。