LoginSignup
2
1

More than 1 year has passed since last update.

Salesforce画面に静的画像を表示する(静的リソース・リッチテキストコンポーネント)

Posted at

概要

Salesforce(Lightning)画面中に静的画像を表示する。
本方法は動作保証対象外と思われるため、恒久的な対応として行う場合は別の対応方法を検討してください。
画面イメージ

背景

Salesforce の導入提案にて一部の AppExchange については提案採用後に購入となったため、それまでの代替として、該当機能の画面イメージを Salesforce 画面に埋め込み、動作イメージを紹介することとなった。
リッチテキストコンポーネントのみの Lightning コンポーネントを定義し、画像を表示させたが、その時の画像ファイルの扱いで、表示する画像を静的リソースに登録しなければならないという考慮事項があったため、備考として手順も含めを本投稿に記載する。

Salesforceにおけるリッチテキストについて

オブジェクトのカスタム項目としてのリッチテキスト編集フォームには画像挿入ボタンが表示されているが、Lightningコンポーネントのリッチテキスト編集フォームには画像挿入ボタンが表示されていない。よって、そもそもLightningコンポーネントのリッチテキストでは画像表示には対応していないと思われる(動作保証対象外としているのはこのためです)。

リッチテキスト項目の編集フォーム

リッチテキスト項目の編集フォーム

リッチテキストコンポーネントの編集フォーム

リッチテキストコンポーネントの編集フォーム

静的リソース登録の必要性

リッチテキストフォームに画像を貼り付ける際に、静的リソースに登録したものではなく、ローカルドライブの画像などから貼り付けた場合、作業したアカウントと別のアカウントから参照した際に、正しく表示されない事があるため、静的リソースに登録する必要がある。

対応手順

1. 画像ファイルの登録(静的リソース化)

設定 → カスタムコード → 静的リソース より、静的リソース画面を表示し、画像ファイルをアップロード・登録する(この時、キャッシュコントロールを「公開」に設定する)。
静的リソース画面

2. 画像のコピー

1.でアップロードした画像をブラウザで表示し、右クリックして「コピー」する。
静的リソース画面
ブラウザ画面

3. リッチテキストコンポーネントの作成

Lightningページレイアウト画面にて、リッチテキストコンポーネントを配置し
Image17.png
編集フォームにて右クリックし「貼り付け」を選択し、2.にてコピーした画像を設定する。
Image18.png
Image19.png
以降、編集したページを保存し作業完了となる。

完成イメージ

Image20.png

参考文献

Salesforce の画面に画像を配置する方法 静的リソース&リッチテキストコンポーネント

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1