Salesforce:画面フローでパス表示を実現する2つの方法[進捗表示とレコードフェーズ表示]
#Salesforce #画面フロー #パス表示 #進捗表示 #レコードフェーズ表示
2025年2月リリースのSpring‘25以降で、Salesforceの画面フローで進行状況インジケーターが使用可能です。
今回はこのインジケーターの実装例と活用方法を見ていきましょう。
インジケーターは主に下記の２パターンで活用が可能です。
| ①進捗表示 | ②レコードフェーズ表示 | |
| 主な目的 | ユーザの入力状況をガイド | 現在のレコード状況の可視化 |
| 更新タイミング | 画面遷移時（次へボタン等） | フロー起動時、 レコード更新時 |
①進捗表示：画面フロー内でステップ毎に入力項目を埋めていく場合
例：航空券の申込フォームのように出発地/目的地/日付を入力 → 席を選択 → 支払方法を選択、のような形で画面を次へ次へと進んでいくような画面
②レコードフェーズ表示：登録済みのレコードの現在のフェーズ位置を表示したい場合
例：Lightning Experienceでの商談パスコンポーネントのように、パスの全体感を示しつつ現在のフェーズを明示する場合
画面フロー内でステップ毎に入力項目を埋めていく場合
まず１つ目の活用方法での画面フロー作成手順です。
1．必要なフェーズ選択肢の数だけフロー内でステージ変数と順序を定義
2．フェーズの数だけ画面要素を配置
画面上の総入力項目が多く画面をいくつかに分割して数項目ずつ入力する際には
現在何ページ目なのかという表示をするなどで活用できそうな機能です。
今回はNew, Working, Closedという３つのフェーズを想定して画面フローを作成してきます。
1．必要なフェーズ選択肢の数だけフロー内でステージ変数と順序を定義
新規リソースを「フェーズ」種別でNew, Working, Closed分の計３つ作成します。
順序はそれぞれ1,2,3とします。
同じようにWorking, Closed分も作成しました。
2．フェーズの数だけ画面要素を配置
作成したステージ変数を画面要素の「フェーズ」に１つずつ指定します。
同様に、３つの要素を配置しました。
画面要素を保存する際のプロパティにて「画面要素に進行状況インジケーターを表示」にチェックをつけ、
インジケーター種別を１つ指定します。
この状態でデバッグをしてみると、画面要素にフェーズ表示をすることができました。
インジケーター種別や、各画面要素内の表示を組み合わせることで実用的な仕組みを作成できそうですね。
登録済みのレコードの現在のフェーズ位置を表示したい場合
次に２つ目の活用方法を見ていきます。
主に下記のステップで画面フローを作成していきます。
1．必要なフェーズ選択肢の数だけフロー内でステージ変数と順序を定義
2．{!$Flow.ActiveStages}に1の各ステージ変数を割り当て
3．そのレコードの現在のフェーズを{!$Flow.CurrentStage}に割り当て
4．画面上にフェーズを可視化
基本的にはLightning Experienceにはパスコンポーネントがあるためこの仕組みの活用場面は少ないかもしれませんが、
・Lightning Experienceでは１レコードにつき「パス」で定義された1項目しかパスコンポーネントで表示できない
・Experience Cloudでは「フェーズを完了としたマーク」ボタンを非表示にできない
など標準のパスコンポーネントだけで要件を満たさない場合に活用できそうです。
今回はNew, Working, Closedという３つのフェーズを想定して、ケースレコードのフェーズ表示をする画面フローを作成していきます。
Lightning Experienceでのパスコンポーネントのように現在のフェーズが表示もできるようにしたいと思います。
1．必要なフェーズ選択肢の数だけフロー内でステージ変数と順序を定義
ここの定義は先ほど本記事の１つ目の活用パターンで実施した内容と同じです。
New, Working, Closedの３つ分のステージ変数を定義します。
2．{!$Flow.ActiveStages}に1の各ステージ変数を割り当て
{!$Flow.ActiveStages}はデフォルトで用意されているコレクション変数なので、
今回の画面フロー内で使用するステージ変数を追加していきます。
この設定しておくことで、画面フローで表示するフェーズの全体感を定義します。
【ポイント】
ちなみにステージ変数で「デフォルトで有効」にチェックをつけておけば、
割り当て要素で{!$Flow.ActiveStages}に変数追加するという処理は不要です。
１つの画面フロー内で定義した全ステージ変数をActiveStagesとして扱う場合は、
すべてのステージ変数で「デフォルトで有効」にしておけば良さそうです。
3．そのレコードの現在のフェーズを{!$Flow.CurrentStage}に割り当て
次に{!$Flow.CurrentStage}にケースレコードの現在のフェーズを割り当てます。
ただし、割り当て要素で下記のように
{!$Flow.CurrentStage} へ ケースレコードの“ケースステータス”項目を割り当てをする、
という形では動作しません。
【ポイント】
{!$Flow.CurrentStage}に割り当てられるのはステージ変数だけのため、
決定要素でケースレコードの現在のフェーズを確認し、
そのあとで{!$Flow.CurrentStage}へステージ変数を割り当てする必要があります。
最後に画面要素で{!$Flow.ActiveStages}、{!$Flow.CurrentStage}がそれぞれどういった内容になっているか確認するために下記のような表示テキストを配置してみます。
4．画面上にフェーズを可視化
それでは実際にケースレコードを使ってデバッグしてみます。
ステータスはWorkingとしたケースレコードでデバッグをすると下記のように表示することができました。
{!$Flow.ActiveStages}で必要なフェーズをすべて定義しておき、
{!$Flow.CurrentStage}で定義された現在のフェーズをコンポーネントに表示する形となりました。
Lightning Experienceのパスコンポーネントのような見た目にできましたね。
まとめ
今回はSalesforceの画面フローで下記２つのパターンを作成してみました。
①画面フロー内でステップ毎に入力項目を埋めていく場合
②登録済みのレコードの現在のフェーズ位置を表示したい場合
両者に共通して、「必要なフェーズの数だけ画面フロー内で1つずつ定義しておく必要がある」というのは大きな特徴です。
各レコードのフェーズに当たる項目の選択肢に増減があっても、画面フロー内のステージ変数は連動して増減するわけではありません。
フェーズが定期的に変更される箇所ではメンテナンス性を考えると他の実装方法を考えてもよいかもしれません。
フェーズの可視化は主に下記いずれかの対応になることが多いですが、
それぞれの特徴を考慮してよりフィットする方法をとりましょう。
・標準のパスコンポーネント
・今回の画面フローのような仕組み
・LWCなどの開発コンポーネント
＜Salesforce＞
弊社ではSalesforceをはじめとするさまざまな無料オンラインセミナーを実施しています！
＞＞セミナー一覧はこちら
また、弊社ではSalesforceの導入支援のサポートも行っています。ぜひお気軽にお問い合わせください。
＞＞Salesforceについての詳細はこちら
＞＞Salesforceの導入支援実績はこちらからご覧いただけます！
医療業界に特化した営業支援、顧客管理(SFA/CRM)のコンサルティングも提供しております。こちらもぜひお気軽にお問い合わせください。
＞＞顧客管理(SFA/CRM)のコンサルティングの詳細はこちら
