画面の体裁を整える

学習の目的

この単元を完了すると、次のことができるようになります。

• フロー画面のフッターボタンを定義する。
  
• フロー画面を複数のセクションと列に分割する。
  
• 画面コンポーネントが特定の条件でのみ表示されるように設定する。
  
• 画面コンポーネントで有効な入力のみを受け入れるように設定する。
  

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

このバッジは、Flow Builder のスキルを習得するための過程の一部です。「Flow Builder を使用したフローの作成」トレイルでは、初めから終わりまで Flow Builder について学習します。このトレイルで推奨されるバッジの順序に従えば、プロセスの自動化に関する確固たるスキルが身に付き、Flow Builder のエキスパートになります。

このモジュールでは、サポートエージェントにさまざまな質問をしてケースを作成するフローを作成しました。適切に機能しているものの、改善の余地があります。より効率的に、より強力に、より迅速にすることができますが、取りあえずはフローの体裁を整えて使いやすくし、データ要件を満たすようにします。では、この画面の潜在性を最大限に引き出しましょう!

画面のフッターボタンを設定する

Pyroclastic のサポートエージェントが [Create Case for Contact (取引先責任者のケースを作成)] フローを実行するときに、ある問題が生じています。最終画面の [Done (完了)] ボタンをクリックすると、フローが突然最初から繰り返され、どうすればよいのかわからなくなります。1 つのはずの新規ケースが 2 つ生成されることもあります。Flo がトラブルシューティングと調査を実施したところ、エージェントが最終画面の [前へ] ボタンをクリックしたときにこの問題が発生することが判明しました。このフローをもう一度見てみましょう。

ユーザーが [前へ] ボタンをクリックすると、前の画面である [Questions Page 2 (質問ページ 2)] に戻ります。その後、ユーザーが先に進むために [次へ] をクリックすると、フローが [ケースを作成] 要素をもう一度実行します (これが問題です)!

フローのベストプラクティスは透明性を最大限に高め、確実に実行されるようにすることです。そのため、不要なボタンを削除し、ユーザーがボタンをクリックするとどうなるかを説明する表示ラベルを各ボタンに追加することにします。 

では、[Questions Page 2 (質問ページ 2)] 画面と [ファイルのアップロード] 画面のボタンをカスタマイズし、問題の原因と考えられる [ファイルのアップロード] 画面の [前へ] ボタンを非表示にしてみましょう。

1. [Create Case for Contact (取引先責任者のケースを作成)] フローを開きます。
   
2. [Questions Page 2 (質問ページ 2)] 要素で、画面キャンバスで選択されているコンポーネントがないことを確認します。
   
3. [画面のプロパティ] サイドバーで、[フッターを設定] をクリックします。
   
4. [[次へ] ボタンまたは [Done (完了)] ボタン] で、[カスタム表示ラベルを使用] を選択します。
   
5. [Next or Finish Button Label ([Next (次へ)] または [Finish (完了)] ボタンの表示ラベル)] に、Create Case (ケースを作成) と入力します。
   
6. [Done (完了)] をクリックします。
   
7. [ファイルのアップロード] 画面要素で、画面キャンバスで選択されているコンポーネントがないことを確認します。
   
8. [画面のプロパティ] サイドバーで、[フッターを設定] をクリックします。
   
9. [[次へ] ボタンまたは [Done (完了)] ボタン] で、[カスタム表示ラベルを使用] を選択します。
   
10. [Next or Finish Button Label ([Next (次へ)] または [Finish (完了)] ボタンの表示ラベル)] に、Restart (再起動) と入力します。
    
11. [[前へ] ボタン] で [[前へ] を非表示] を選択します。
    
12. [Done (完了)] をクリックしてフローを保存します。
    

これで、フローが [Questions Page 2 (質問ページ 2)] 画面の実行時に、[次へ] ボタンをクリックするとどうなるのか、つまり、ケースが作成されることがユーザーに明確になります。

フローで [ファイルのアップロード] 画面を実行時、[Done (完了)] ボタンの表示ラベルがより明確な [再開] になり、[前へ] ボタンは非表示になります。

[フッターを設定] セクションには [一時停止] ボタンの設定もありますが、組織の共有設定で有効になっていない限り表示されません。[一時停止] ボタンを使用すると、ユーザーがフローの進行を凍結し、後で再開できるようにフローを保存することができます。詳細は、Salesforce ヘルプの「組織での一時停止中のフローインタビューの準備」を参照してください。

コンポーネントを行と列に整理する

Flo は [Create Case for Contact (取引先責任者のケースを作成)] フローを取引先責任者 Lightning ページの広い列に組み込みました。現在、フロー画面の大半が未使用のスペースになっています。さらに、2 つ目の画面に多数の質問があるため、垂直のスペースが詰まっています。画面のスペースを効率よく使うにはどうすればよいでしょうか?

セクションコンポーネントを使用すると、フロー画面が複数の列に分割されるため、コンポーネントを横並びに配置して、水平のスペースを有効活用できます。セクションコンポーネントで、列の数と各列の相対的な幅を定義します。

余分なスペースを活用する画面にセクションコンポーネントを追加します。

[Questions (質問)] 画面を更新する

1. [Questions (質問)] 要素を開きます。
   
2. [コンポーネント] サイドバーから [セクション] を画面キャンバスの上部にドラッグします。
   
3. [セクション] サイドバーで、[+列を追加] をクリックします。
   
   
4. [SayThisText] 表示テキストコンポーネントを 1 つ目の空の列にドラッグします。
   キャンバス上のコンポーネントを移動すると、有効なセクションが緑で強調表示されます。1 つ目の列が強調表示されたら、コンポーネントをドロップします。
   
   
5. [Problem Description (問題の説明)] ロングテキストエリアコンポーネントを 1 つ目の列の [SayThisText] の下にドラッグします。
   
6. [Case Subject (ケース 件名)] テキストコンポーネントを 2 つ目の列にドラッグします。
   
7. [CloseCase] 切り替えコンポーネントを 2 つ目の列の [Case Subject (ケース件名)] の下にドラッグします。
   画面キャンバスは次のようになります。
   
   
8. [Done (完了)] をクリックします。
   

[Questions Page 2 (質問ページ 2)] 画面を更新する

1. [Questions Page 2 (質問ページ 2)] 要素を開きます。
   
2. [コンポーネント] サイドバーから [セクション] を画面キャンバスの上部にドラッグします。
   
3. [セクション] サイドバーで、[+列を追加] をクリックします。
   
4. [列 1 の幅] を [9/12] に設定します。
   
5. [Point of Contact (連絡窓口)] データテーブルコンポーネントを 1 つ目の列にドラッグします。
   
6. [What priority would the customer assign to this case (お客様はこのケースにどの優先度を付けると思いますか)] ラジオボタンコンポーネントを 2 つ目の列にドラッグします。
   
7. [コンポーネント] サイドバーから別の [セクション] を画面キャンバスの 1 つ目の [セクション] コンポーネントの下にドラッグします。
   
8. [セクション] サイドバーで、[+列を追加] を 2 度クリックします。
   2 つ目のセクションが 3 つの列に分割されます。
   
9. 列の幅を変更します。
   

• 列 1 の幅: 3/12
  
• 列 2 の幅: 3/12
  
• 列 3 の幅: 6/12 (半分の幅)
  

10. [QA Reviewer (QA レビュー担当者)] ルックアップコンポーネントを 2 つ目のセクションの 1 つ目の列にドラッグします。
    
11. [CaseReason] レコード項目コンポーネントを 2 つ目のセクションの 2 つ目の列にドラッグします。
    
12. [In which timeslots can we call the customer for follow-up if needed (フォローアップが必要な場合、どの時間帯にお客様に電話をかければよいですか?)] チェックボックスグループコンポーネントを 2 つ目のセクションの 3 つ目の列にドラッグします。
    画面キャンバスは次のようになります。
    
    
13. [Done (完了)] をクリックしてフローを保存します。
    

新たに配置された画面の実際の動作を確認するには、フローを保存して [実行] をクリックします。この画面は整然として見栄えがよく、もはや芸術の域に達しています!

コンポーネントをいつ表示するか管理する

Lightning ページのコンポーネントと同様に、フロー画面コンポーネントも条件付き表示をサポートしています。コンポーネントに条件付き表示を追加すると、指定した条件が存在する場合にのみフローにコンポーネントが表示されます。この条件は、同じ画面のほかのコンポーネントを含め、フロー内のあらゆるものを参照できます。

Pyroclastic のサポートエージェントは、フォローアップが必要になる可能性が高い原因を選択しない限り、フォローアップの時間帯を表示する必要がありません。ですから、ちょっとした条件付き表示を追加して、フローをすっきりさせましょう。

1. [Questions Page 2 (質問ページ 2)] 要素を開いて、[CallbackTimes] チェックボックスグループコンポーネントを選択します。
   
2. [コンポーネントの表示を設定] をクリックします。
   
3. [コンポーネントを表示するタイミング] で [All Conditions Are Met (AND) (すべての条件に一致 (AND))] を選択します。
   
4. [Resource (リソース)] で [caseVar]>[Reason (原因)] を選択します。
   
5. [Operator (演算子)] で [Equals (次の文字列と一致する)] を選択します。
   
6. [Value (値)] に Equipment Complexity,Performance,Breakdown,Equipment Design,Other (機器の複雑さ,パフォーマンス,故障,機器の設計,その他) と入力します。
   上記の値は、インストールとフィードバックを除く、この選択リストのすべてのオプションです。表示するすべてのオプションをカンマ区切りで入力すると、各値が有効なオプションとして処理されます。または、[コンポーネントを表示するタイミング] を [いずれかの条件に一致 (OR)] に設定して、該当しそうな各オプションを個々の条件として追加することもできます。
   
   
7. ポップアップの [Done (完了)] をクリックします。
   
8. [Done (完了)] をクリックして画面要素を閉じます。
   
9. フローを保存します。
   

これで、[原因] が [インストール] と [フィードバック] 以外の値に設定されているときに、[CallbackTimes] コンポーネントが表示されます。[原因] を [インストール] または [フィードバック] に変更して、質問を非表示にします。[実行] ボタンをクリックして、2 つ目の画面に進み、実際に試してみてください。

コンポーネントのデータ品質を向上させる

Pyroclastic のサポートマネージャーには、[Create Case for Contact (取引先責任者のケースを作成)] フローに関して最後にもう 1 つ依頼があります。ケースの中には、説明が短すぎて、通話の内容がよくわからないものがあります。Flo から、説明項目に最小文字数要件を実装するよう頼まれました。

この場合は、画面コンポーネントに入力規則を追加できます。各コンポーネントに入力規則を適用するのと要領は同じです。ただし、1 つ大きな違いがあります。

• 通常の入力規則は、数式で TRUE が返されたときに実行されます。
  
• 画面コンポーネントの入力規則は、数式で FALSE が返されたときに実行されます。
  

では、[Problem Description (問題の説明)] コンポーネントに最小文字数を 20 文字とする要件を追加してみましょう。

1. [Questions (質問)] 要素を開き、[Problem Description (問題の説明)] コンポーネントを選択します。
   
2. [プロパティ] ペインで [入力を検証] をクリックします。
   
3. [Error Message (エラーメッセージ)] に、Please add more detail. (詳細を追加してください) と入力します。
4. [Formula (数式)] に、LEN({!ScreenDescription}) >= 20 と入力します。
   
   
5. [Done (完了)] をクリックしてフローを保存します。
   

今後は、ユーザーが入力した説明が 20 文字未満の場合は、フローにエラーメッセージが表示され、ユーザーがテキストを追加するまで先に進むことができません。確かに、穏やかに追記を促すもので、必ずしも適切な詳細が入力されるわけではありませんが、無視するわけにもいきません。

このバッジでは、画面フローの作成方法を学習しました。次は、「画面フローの配布」バッジで、ユーザーが必要とする場所に画面フローを組み込む方法を確認してください。

リソース

• Salesforce ヘルプ: フロー画面出力コンポーネント: セクション
• Salesforce ヘルプ: フローの条件付き表示に関する考慮事項
• Salesforce ヘルプ: フロー画面のユーザー入力の検証