Spring'25 画面フローのインジケーターでフェーズ（手順のどこにいるか）の可視化が簡単に
紙吹雪も降らせたくなっちゃう🎉
Admin
{{getTime(record.UpdatedTime)}}
フローの新機能の検証、毎回楽しみにしておりますが、今回は「いつか設定してみたいけれど難しいのかも？」と思っていた画面フロー内のフェーズが簡単にできるようになったとのことで、さっそくこれまで作った画面フローに追加して遊んでみました。
該当のリリースノートのページはこちら↓です。
※「Stage」は「フェーズ」と訳される可能性が高いと予測して、「フェーズ」で訳しております。
◇ SALESFORCE HELP ＞DOCS ＞SALESFORCE RELEASENOTES ＞ Salesforce Spring’25 Release Notes ＞Salesforcec Flow ＞Flow Builder Updates ＞Screen Flow Updates＞Guide Users Through Screen Flows with Built-In Visual Progress Indicators
フローです。
画面要素が全部で 5つありますので、それぞれを1ステップ（フェーズ）とします。
画面のプロパティにある設定項目「フェーズ」にカーソルを当て、【新規フェーズリソース】をクリックします。
※フェーズリソースはツールボックスのマネージャーからも作成可能です。
リソースの詳細を設定します。
表示ラベル：STEP1
インジケーター種別で「パス：画面の上部」を選択するとこちらの表示ラベルが画面上に表示されます。
API参照名：STEP_1
組織の命名ルールに則りわかりやすい名前を付けます。
説明：入力は任意です。
順序：5
フロー内でのフェーズリソースの順序を設定します。ヘルプテキストに「後でフェーズを容易に挿入できるように、数時間の間隔をあけます。たとえば、5、10、15を使用します」とあるので、とりあえず「5」刻みで設定しています。
デフォルトで有効：チェックを入れると順序で設定した数字で昇順に並べ替えられますが、チェックを外すと有効に設定されたフェーズリソースの後に表示されます。通常はチェックを入れるい運用で問題ないかと思います。
入力が終わったら【完了】をクリックします。
画面プロパティのフェーズにフェーズリソースが設定された状態です。
最後に【完了】をクリックします。
同様に、STEP2～STEP５も設定します。
STEP2
STEP3
STEP4
STEP5
すべてのSTEPの設定が終わりましたら、フローのプロパティで最後の仕上げです。
続けて［詳細を表示］をクリックします。
「画面要素に進行状況インジケーターを表示」にチェックを入れると種別が選択できるようになるので、選択して【完了】をクリックします。
ちなみに、シンプルは本当にシンプルでしたので最終的に「パス：画面の上部」を選択しました。
プロパティの設定が終了したら、フローを保存し、有効化します。
画面を進めていくとフェーズも連動します。
インジケーター種別を「シンプル：画面の上部」に設定すると、こんな感じです。
「シンプル：画面の下部」に設定すると、こんな感じです。
Spring'25 プレリリース組織サインアップサイトがオープンしました
Spring'25のリリースノート（英語版）が公開されました
Spring'25 「すべて表示」「すべて変更」権限の名前が変わって「すべての項目の表示」が仲間入り
該当のリリースノートのページはこちら↓です。
※「Stage」は「フェーズ」と訳される可能性が高いと予測して、「フェーズ」で訳しております。
◇ SALESFORCE HELP ＞DOCS ＞SALESFORCE RELEASENOTES ＞ Salesforce Spring’25 Release Notes ＞Salesforcec Flow ＞Flow Builder Updates ＞Screen Flow Updates＞Guide Users Through Screen Flows with Built-In Visual Progress Indicators
Guide Users Through Screen Flows with Built-In Visual Progress Indicators↓日本語訳です。
Visually guide your users through the stages of your screen flows by using the built-in progress indicator—no more writing custom code to create your own. Your users see which stage they’re on and how many stages remain. Configure whether you want to show the progress indicator at the top of the screen or in the footer. Pick from a simple-style or a path-style progress indicator. Path-style progress indicators are supported only at the top of the screen.
Where: This change applies to Lightning Experience and Salesforce Classic (not available in all orgs) in Professional, Enterprise, Performance, Unlimited, and Developer editions. It’s supported only in Lightning runtime for flows. Built-in progress indicators are enabled by default for flows created in Spring ’25 and later. For flows that were created in Winter ’25 or earlier, the built-in progress indicators must be manually enabled. Built-in progress indicators aren’t supported in Field Service Mobile or Salesforce Scheduler flows. The progress indicator settings are ignored when the flow is implemented in an Actions & Recommendations component because the component already displays the stages.
How: Progress indicators use stage variables to determine what stage the user is on. When a screen loads, $Flow.CurrentStage is automatically updated to the stage that’s associated with the screen, and the stage is added to the end of $Flow.ActiveStages if it isn’t an active stage already. Create stage resources and define the stage label, order, and whether the stage is active by default or not. Then, select the stage resource under the Stage field of the Screen element, or assign the stage resources manually by using assignment elements.
Finally, to show a visual progress indicator, open the flow version properties. Then, select Show a progress indicator on screen elements and then select the progress indicator type.
The user sees their progress on the page at run time.
組み込みの視覚的な進行状況インジケーターを使用して、画面フローをガイドする
組み込みの進行状況インジケーターを使用して、画面フローの各フェーズを視覚的にユーザーに示します。カスタムコードを作成する必要はありません。ユーザーは現在のフェーズと残りのフェーズを確認できます。進行状況インジケーターを画面の上部またはフッターに表示するかを設定します。シンプルスタイルまたはパススタイルの進行状況インジケーターから選択します。パススタイルの進行状況インジケーターは画面の上部でのみサポートされます。
対象: この変更は、Professional、Enterprise、Performance、Unlimited、および Developer エディションの Lightning Experience および Salesforce Classic (すべての組織で使用できるわけではありません) に適用されます。フローの Lightning ランタイムでのみサポートされます。組み込みの進行状況インジケーターは、Spring '25 以降に作成されたフローではデフォルトで有効です。Winter '25 以前に作成されたフローでは、組み込みの進行状況インジケーターを手動で有効にする必要があります。組み込みの進行状況インジケーターは、Field Service Mobile または Salesforce Scheduler フローではサポートされていません。フローがアクション & おすすめコンポーネントに実装されている場合、そのコンポーネントにはすでにフェーズが表示されているため、進行状況インジケーターの設定は無視されます。
方法: 進行状況インジケーターはフェーズ変数を使用して、ユーザーがどのフェーズにいるかを判断します。画面が読み込まれると、$Flow.CurrentStage は画面に関連付けられたフェーズに自動的に更新され、フェーズがまだアクティブでない場合は $Flow.ActiveStages の末尾に追加されます。フェーズリソースを作成し、フェーズラベル、順序、およびフェーズがデフォルトでアクティブかどうかを定義します。次に、画面要素のフェーズ項目でフェーズリソースを選択するか、割り当て要素を使用してフェーズリソースを手動で割り当てます。
最後に、視覚的な進行状況インジケーターを表示するには、フローバージョンのプロパティを開きます。次に、[画面要素に進行状況インジケーターを表示する] を選択し、進行状況インジケーターの種類を選択します。
ユーザーは実行時にページ上で進行状況を確認できます。
プレリリース組織で試してみました：既存のフローに追加
以前「画面フロー コンポーネントの「無効」「参照」で値を表示しても更新させない＆条件付きで更新可」で設定した、お客様（取引先責任者）の名義変更を行う画面フローにフェーズを設定してみます。フローです。
画像キャプション
画面要素が全部で 5つありますので、それぞれを1ステップ（フェーズ）とします。
画面要素からのリソースの作成および設定
②の画面要素にSTEP1のフェーズを設定します。画面のプロパティにある設定項目「フェーズ」にカーソルを当て、【新規フェーズリソース】をクリックします。
※フェーズリソースはツールボックスのマネージャーからも作成可能です。
リソースの詳細を設定します。
表示ラベル：STEP1インジケーター種別で「パス：画面の上部」を選択するとこちらの表示ラベルが画面上に表示されます。
API参照名：STEP_1
組織の命名ルールに則りわかりやすい名前を付けます。
説明：入力は任意です。
順序：5
フロー内でのフェーズリソースの順序を設定します。ヘルプテキストに「後でフェーズを容易に挿入できるように、数時間の間隔をあけます。たとえば、5、10、15を使用します」とあるので、とりあえず「5」刻みで設定しています。
デフォルトで有効：チェックを入れると順序で設定した数字で昇順に並べ替えられますが、チェックを外すと有効に設定されたフェーズリソースの後に表示されます。通常はチェックを入れるい運用で問題ないかと思います。
入力が終わったら【完了】をクリックします。
画面プロパティのフェーズにフェーズリソースが設定された状態です。
最後に【完了】をクリックします。同様に、STEP2～STEP５も設定します。
STEP2
STEP3
STEP4
STEP5
すべてのSTEPの設定が終わりましたら、フローのプロパティで最後の仕上げです。
プロパティからインジケーターを設定
画面左上の歯車アイコンをクリックし、プロパティ編集画面を表示します。続けて［詳細を表示］をクリックします。
「画面要素に進行状況インジケーターを表示」にチェックを入れると種別が選択できるようになるので、選択して【完了】をクリックします。
ちなみに、シンプルは本当にシンプルでしたので最終的に「パス：画面の上部」を選択しました。
プロパティの設定が終了したら、フローを保存し、有効化します。
インジケーター（フェーズリソース）設定後の画面
ホームタブに配置した画面フローを確認すると、フェーズのパスが表示されています。画面を進めていくとフェーズも連動します。
インジケーター種別を「シンプル：画面の上部」に設定すると、こんな感じです。
「シンプル：画面の下部」に設定すると、こんな感じです。
ひとこと
操作工程と画面が多い場合、とてもユーザーにとって親切な画面が作れるようになります。トラブルシューティングやエスカレーション時にも、どの操作時の話なのが伝えやすくなるんじゃないですかね。デフォルトでアクセシビリティを考慮した色設計をされているかと思いますが、色をカスタマイズできるともっと楽しくなりそうです。Spring’25関連の記事
Spring'25のスケジュールが出てましたSpring'25 プレリリース組織サインアップサイトがオープンしました
Spring'25のリリースノート（英語版）が公開されました
Spring'25 「すべて表示」「すべて変更」権限の名前が変わって「すべての項目の表示」が仲間入り