画面の体裁を整える

学習の目的

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. [Questions Page 2 (質問ページ 2)] 要素を開きます。
2. [コンポーネント] サイドバーから [セクション] を画面キャンバスの上部にドラッグします。
3. [セクション] サイドバーで、[+列を追加] をクリックします。
4. [列 1 の幅] を [9/12] に設定します。
5. [PointOfContact] データテーブルコンポーネントを 1 つ目の列にドラッグします。
6. [ScreenPriority] ラジオボタンコンポーネントを 2 つ目の列にドラッグします。
7. [コンポーネント] サイドバーから別の [セクション] を画面キャンバスの 1 つ目の [セクション] コンポーネントの下にドラッグします。
8. [セクション] サイドバーで、[+列を追加] を 2 度クリックします。
   2 つ目のセクションが 3 つの列に分割されます。
9. 列の幅を変更します。
   • 列 1 の幅: 3/12
   • 列 2 の幅: 3/12
   • 列 3 の幅: 6/12 (半分の幅)
10. [ScreenReviewer] ルックアップコンポーネントを 2 つ目のセクションの 1 つ目の列にドラッグします。
11. [CaseReason] レコード項目コンポーネントを 2 つ目のセクションの 2 つ目の列にドラッグします。
12. [CallbackTimes] チェックボックスグループコンポーネントを 2 つ目のセクションの 3 つ目の列にドラッグします。
    画面キャンバスは次のようになります。
    
    
    
13. [完了] をクリックしてフローを保存します。

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

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

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

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

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

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

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

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

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

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

では、[ScreenDescription] コンポーネントに最小文字数を 20 文字とする要件を追加してみましょう。

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

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

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

リソース

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