はじめに
SalesforceのLeadやContactで、レコード上に顔写真を表示したいことがあるかと思います。
標準機能ではSocial Profile Viewerで表示させることはできるようなのですが、SNSがないとダメみたいなので。
今回はLWCと数式項目を使用して
①Leadにプロファイル画像をアップロードし、
②プロファイル画像をレコードページに表示させる
を実装してみたいと思います。
成果物
LWC
カスタム項目
プロファイル画像をレコードに表示させる
まずは画像をレコードに表示させる方法を検討します。
以下の二つが挙がりました。
①リッチテキストエリアに画像を挿入
②数式でファイルに保存されている画像を表示
①は直接画像をアップロードすることができますが、1MBという制限と新しい画像で都度更新されてしまうというデメリットがあるため、②を採用しました。
Profile項目はURLの入力項目とし、ProfileImg項目の数式項目でProfileのURL情報を画像として表示させるようにしました。ProfileImgの数式項目は下記のような形です。
if(isnull(Profile__c),null, IMAGE(Profile__c, "img") )
ファイルに保存されている画像を表示させる方法
ここまで順調でしたが難しい問題にぶつかりました。それはファイルに保存されている画像のパスは何かの調査でした。
試行錯誤と生成AIの助けを得ながら下記のURLに辿り着きました。
/sfc/servlet.shepherd/version/download/${contentVersionId}
ちなみにこのcontentVersionIdはContentDocumentのレコードIDではなくContentVersionのレコードIDを入れなければならないので注意が必要です。(File関連のオブジェクト構成についてはこちらをチェック）
LWCでファイルアップロード画面の作成
ファイルアップロードコンポーネント自体はLWCコンポーネントが用意されているのでそちらを使用。
record-id属性を指定することで、ファイルがそのレコードに紐づく形で保存されます。
<template>
<lightning-card title="Profile Upload">
<lightning-file-upload name="profileImage" onuploadfinished={handleUploadFinished}
record-id={recordId}></lightning-file-upload>
</lightning-card>
</template>
アップロードしたファイル情報でリードのProfile項目を上書き
処理実装はApexを使わずにLDSの機能だけを使用しました。
詳細の実装はGithubに上がっている成果物を見てほしいのですが、file-uploadのイベントやupdateRecordの使い方はひと癖ありました。
しかし、相棒のCursorと一緒に実装することで実装時間はそこまでかからなかったです。
最後に
今回はプロファイル画像をアップロードする機能の実装を行いました。
CursorやChatGPTなどAIを使用した開発は生産性を確実にあげてくれています。
以前だったら行き詰まり断念していたことも出来るようになってきたので、また別の機能の開発にも取りかかろうかと思います。
実装してほしい機能などがあったらコメントください。