{{i18n("button.posting")}}
画面フローで画像(PNG、GIF)を表示させてみた Part1
画面フローの標準コンポーネントを使って画像を表示しました
ちくわ
{{getTime(record.UpdatedTime)}}
こんにちは、ちくわ です。
IT業界、Salesforceともに未経験でした。
そんなビギナーから細かな知識共有になります。
同じようにSalesforceを勉強中、認定アドミニストレーターを目指しています!なんて方のお役に立てばと思います。
【今回のテーマ】
画面フローで画像(PNG、GIF)を表示させてみた Part1
個人的にですが、画面フローはなぜかとっつきやすく
(視覚的にわかりやすいから…?)
勉強のためいじっとくかぁなんて時は
選びがちです(笑)
レコード画面に画像を表示させる方法として、下記なども紹介されていますが
Salesforce のレコード詳細画面に画像を配置する方法 静的リソース&数式項目の場合
画面フローのコンポーネントに気になるものがあったので
自己満足までに試してみました。皆様にも共有したいと思います。
【作成したもの】
画面フローで経費申請レコードの作成画面を作成しました。
サンタやツリーはGIFです。
実際はトナカイが走ったり、ツリーがキラキラと光っています(笑)
【設定方法の概要】
1.静的リソースに、表示させたい画像をアップロードする
2.画面フローの表示画像コンポーネントを使用
※静的リソースとは
◇ 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アニメ 様
{{i18n("articles.view.premium")}}
{{cta.Content}}
{{cta.ButtonName}}
{{tag}}