画面フローで画像(PNG、GIF)を表示させてみた Part2
画面フローで画像(PNG、GIF)を表示させてみた Part2
・表示テキストコンポーネントでの設定
・表示テキストと表示画像 それぞれの特徴
ちくわ
2023/11/28 09:50:23
こんにちは、ちくわ です。
IT業界、Salesforceともに未経験でした。
そんなビギナーから細やかな知識共有になります。
同じようにSalesforceを勉強中、認定アドミニストレーターを目指しています！なんて方のお役に立てばと思います。
【今回のテーマ】
画面フローで画像(PNG、GIF)を表示させてみた Part2
・表示テキストコンポーネントでの設定
・表示テキストと表示画像 それぞれの特徴
Part1の続きになります。
画面フローのコンポーネントに気になるものがあったので
自己満足までに試してみました。
学習用組織をGIFなど使って楽しく華やかな画面に出来ないかな～なんて思ったのが
今回のきっかけです（笑）
表示画像コンポーネントでの設定方法については、前回記事をご参照願います。【作成したもの】
画面フローで経費申請レコードの作成画面を作成しました。
サンタやツリーはGIFです。
実際はトナカイが走ったり、ツリーがキラキラと光っています。
前回記事では表示画像コンポーネントを紹介しましたが、
表示テキストコンポーネントでも可能です。
今回はこちらの設定方法を紹介しつつ、それぞれの特徴について触れたいと思います。
【表示画像コンポーネントでの設定方法】
方法１.静的リソースに表示させたい画像をアップロードし、画像をコピーする
方法２.表示テキストコンポーネントの"画像（ベータ）"から挿入する
手順自体はLightning ページのリッチテキストコンポーネントを使用した
画像表示と大きく変わりません
⇒Salesforce の画面に画像を配置する方法 静的リソース＆リッチテキストコンポーネント
※静的リソースとは
◇ SALESFORCE ヘルプ ＞ドキュメント ＞コードを使用した SALESFORCE の拡張 ＞静的リソース
gilde tech ＞ 静的リソースを使う理由（ノーコード編）
※フロー関連
◇ SALESFORCE ヘルプ ＞ドキュメント ＞ビジネスプロセスの自動化
◇ SALESFORCE ヘルプ ＞ ドキュメント ＞ SALESFORCE SUMMER '19 リリースノート ＞ 表示テキスト画面コンポーネント、選択肢表示ラベル、ヘルプテキストなどでのリッチテキストの使用
【設定】
※静的リソースを使用する場合は、
先に方法1の1-2.まで進めることをおススメします。
共通手順1.
設定、フロー、新規フローを開いて"画面フロー"を選択
フローの表示ラベル、API名などの設定操作は割愛させていただきます
共通手順2.
左側のコンポーネントから、"表示テキストコンポーネント"を選択
方法１.静的リソースに表示させたい画像をアップロードし、画像をコピーする
1-1. 設定から"静的リソース"を開く
1-2. 新規を選択し、使用したい画像をアップロードする
名前は、一意の英数字で入力します
保存を押して準備完了です
1-3. 表示させたいリソースを選択し、詳細画面の"ファイルを表示"リンクをクリック
1-4. 表示された画像を右クリックし、”画像をコピー"を選択
1-5. フローに戻り、表示テキストコンポーネントのエディタに直接ペーストします。
表示されました！
方法２.表示テキストコンポーネントの"画像（ベータ）"から挿入する
2-1. 表示テキストコンポーネントのエディタから、”画像（ベータ）"を選択
表示したい画像ファイルを選択しましょう
↓表示されました！
表示テキストコンポーネントでも簡単に画像表示できますね～
表示テキストと表示画像 それぞれの特徴は？
セクションコンポーネントを使用して4種の画像を配置しました。
左2種：テキストコンポーネントで作成
右2種：画像コンポーネントで作成
大きく違うように感じたのは
表示画像コンポーネントを使用すると、画像サイズやCSS指定で見栄えの調整が
その場で出来ること！配置の微調整なんかも出来るんですね～
◇SALESFORCE ヘルプ ＞ ドキュメント ＞ ビジネスプロセスの自動化 ＞ フロー画面入力コンポーネント: 表示画像
画像の CSS 独自の CSS 文字列を指定して、画像の CSS を上書きします (例:
border-radius: 8px; box-shadow: 10px 5px 5px blue; opacity: 0.75;)。この属性では、単一値リソースを使用できます。値はテキストとして処理されます。
画像の高さ ブラウザーによって画像の高さが決定されないようにする場合は、特定の高さの値を入力します。有効な値は数値と単位、またはコンテナのパーセントです (例: 200px、2cm、50%)。数値を入力して単位を入力しない場合、単位はデフォルトでピクセルに設定されます。
この属性では、単一値リソースを使用できます。値はテキストとして処理されます。
↓高さ×幅を変更。CSSのサンプルコード（上下に境界線）を試しに。
元の画像サイズは4つとも同じです。
表示テキストは、テキストと画像をコンポーネント分けず入力できます。
また、リンクの貼り付けが出来るので画像からリンク先に飛ぶなんて画面が作成出来ますね！
簡単になりますが以上となります。
気軽に触っていくうちにあれもしてみたい、こんな事出来るかな？なんて学習に繋がっていけばいいですよね。
面白そうと思ったら是非皆様も試してみてください。
gilde techにはこの他にもSalesforceに関する便利な記事が
多数展開されていますので是非ご登録ください^^
関連記事
画面フローで画像(PNG、GIF)を表示させてみた Part1
Salesforce の画面に画像を配置する方法 静的リソース＆リッチテキストコンポーネント
Salesforce のレコード詳細画面に画像を配置する方法 静的リソース＆数式項目の場合
静的リソースを使う理由（ノーコード編）
素材サイト
カツのGIFアニメ 様
コメント