🖼️

レコードの数式項目に画像を保存ーLWCの画面モーダルで画像を選んで数式項目へ反映させてみた。（取引先責任者編）

に公開
数式
Salesforce
APEX
LWC
添付ファイル
tech

概要

関連リストにイメージ画像をアップロードした後、
その画像をリストビューや虫眼鏡の検索画面に出したいと思ったことはないでしょうか？

このサンプルでは、カスタム項目2つとLWC、Apex、クイックアクション、ページレイアウト配置で実現する方法を紹介します。
取引先責任者（Contact）に関連付けたファイル（画像）を選択して、数式項目に画像を表示します。
※少しソースを変更すれば、他のオブジェクトにも適用可能です。

ソースコードは GitHub に公開しています。
👉 GitHub - contact-image-binder

想定フロー

  1. 関連リストでファイルをアップロード
  2. クイックアクションのボタンを押下
    • Contact レコードにアップロード済みのファイル一覧を取得
    • ユーザが紐づけ or 紐づけ解除したいファイルを選択
    • 「紐づけ」または「紐づけ解除」ボタン押下で、指定の項目（例：ImageDocId__c）に Document Id を上書き
  3. 数式項目（例：Image__c）で画像を表示

事前作業 1）対象オブジェクトで項目を作成

  1. 2項目を作成します。
    　- 対象オブジェクト（例）：取引先責任者（Contact）
    　- カスタム項目例
    　 - ImageDocId__c … テキスト(18文字)
    　- Image__c … 数式(テキスト)
    　　＜数式内容＞
    　 text 　 IMAGE('/sfc/servlet.shepherd/document/download/' & ImageDocId__c, 'preview', 300, 300) 　

  2. ページレイアウトに追加します。

事前作業 2）Apex と LWC を作成

  1. GitHub からソースコードを取得
    https://github.com/tanakakSePath/contact-image-binder
  2. Apex クラス、LWC をデプロイ（CLIで実施します。方法は割愛します。）

事前作業 3）クイックアクション設定

  1. クイックアクションとして LWC を指定
  2. ページレイアウトにクイックアクションを追加

最終イメージ

  • モーダル（ファイル選択）表示

  • 数式項目での画像表示

補足

  • ファイル一覧には、対象レコードに関連付いたファイルのみ表示
  • 表示画像サイズは数式項目の IMAGE() 関数で調整可能
  • 数式項目はレポート、リストビュー、虫眼鏡検索でも表示可能

Discussion