画面フローで画像(PNG、GIF)を表示させてみた Part1
画面フローの標準コンポーネントを使って画像を表示しました
ちくわ
2023/11/21 10:34:07
こんにちは、ちくわ です。
IT業界、Salesforceともに未経験でした。
そんなビギナーから細かな知識共有になります。
同じようにSalesforceを勉強中、認定アドミニストレーターを目指しています！なんて方のお役に立てばと思います。
【今回のテーマ】
画面フローで画像(PNG、GIF)を表示させてみた Part1
個人的にですが、画面フローはなぜかとっつきやすく
（視覚的にわかりやすいから…？）
勉強のためいじっとくかぁなんて時は選びがちです（笑）
レコード画面に画像を表示させる方法として、下記なども紹介されていますが
Salesforce のレコード詳細画面に画像を配置する方法 静的リソース＆数式項目の場合
画面フローのコンポーネントに気になるものがあったので
自己満足までに試してみました。皆様にも共有したいと思います。
【作成したもの】
画面フローで経費申請レコードの作成画面を作成しました。
サンタやツリーはGIFです。
実際はトナカイが走ったり、ツリーがキラキラと光っています（笑）
【設定方法の概要】
１.静的リソースに、表示させたい画像をアップロードする
２.画面フローの表示画像コンポーネントを使用
※静的リソースとは
◇ SALESFORCE ヘルプ ＞ドキュメント ＞コードを使用した SALESFORCE の拡張 ＞静的リソースgilde tech ＞ 静的リソースを使う理由（ノーコード編）
※フローのベストプラクティス
◇ SALESFORCE ヘルプ ＞ドキュメント ＞ビジネスプロセスの自動化
【設定】
1-1. 設定から"静的リソース"を開く
1-2. 新規を選択し、使用したい画像をアップロードする
名前は、一意の英数字で入力します
保存を押して準備完了です
2-1. 設定、フロー、新規フローを開いて"画面フロー"を選択
2-2. 開始の下の、＋マークから"画面要素"を追加
画面の表示ラベル、API名は必須入力です
※API名には命名規則を設けると保守性が高まります
※レイアウトは自動レイアウトで進めさせていただいてます
2-3. 左側のコンポーネントから、"表示画像コンポーネント"を選択
2-4. API参照名、画像名を入力します
この画像名に静的リソースにアップロードした名前を入れてください
2-5. 表示されました！
あとは、その他希望する要素やコンポーネントを追加しフローを保存したら完了です
個人的には"セクションコンポーネント"を活用するとレイアウトの美しさや
画像の配置も工夫出来ておススメです。
以上、フローでも標準コンポーネントを使用して簡単に画像表示できました。
今回使用した画像表示コンポーネントでは
画像の高さや幅も調整できましたのでPart2で共有したいと思います。
gilde techにはこの他にもSalesforceに関する便利な記事が
多数展開されていますので是非登録してみてください^^
関連記事
Salesforce のレコード詳細画面に画像を配置する方法 静的リソース＆数式項目の場合
静的リソースを使う理由（ノーコード編）素材サイト
カツのGIFアニメ 様
コメント