リアクティブな画面を作成する

学習の目的

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

画面フローのリアクティビティがユーザーに役立つしくみを説明する。
リアクティブに無効化を行う画面コンポーネントを作成する。
コンポーネントのデフォルト値をリアクティブに設定する数式を作成する。
特定のテキスト値に反応する数式を作成する。
ほかのコンポーネントの値に反応する条件付き表示を設定する。

このバッジに取り組む前に、画面フローについて十分に理解しておくことを強くお勧めします。画面フローについて学ぶには、「画面フロー」バッジを完了してください。フローを使用したことがない場合は、「Flow Builder を使用してフローを作成する」トレイルを完了することをお勧めします。

メモ

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

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

リアクティビティの概要

リアクティビティとは、画面フローのさまざまな部分が、同一画面上にあっても互いに反応し合える機能です。つまり、ある画面コンポーネント内の何かをユーザーが変更した場合、ユーザーが次の画面に移動しなくても別の画面コンポーネントに自動的に影響を与えることができます。

リアクティビティが重要なのはなぜでしょうか? 例を見てみましょう。たとえば、営業担当が商品を商談に追加して価格を設定できる画面フローがあるとします。フローでは、営業担当が低すぎる価格を設定した場合にすぐに警告を表示する必要もあります。リアクティビティが設定されていなければ、価格の設定と警告の表示を別の画面で行う必要があります。なぜなら、価格項目によって警告テキストメッセージの表示は制御できないからです。入力規則を使用することはできますが、価格が有効であるかどうかはユーザーがクリックして確認する必要があります。リアクティビティを使用すれば、ユーザーが価格を入力次第、警告メッセージと承認メッセージを表示できます。

リアクティビティを使用するとユーザーが実行する必要のあるクリック数が減少するため、ユーザーの時間を節約し、イライラを解消できます。また全体的に、よりスムーズで直観的なエクスペリエンスを作成できます。こうした特性は、フローがユーザーに採用されるために不可欠です。

すべての画面コンポーネントとフローリソースが必ずしも常にリアクティブであるわけではないことに注意してください。現在、一部のコンポーネントとリソースではリアクティビティがサポートされていません。また、リアクティビティがサポートされていても、機能や状況によってサポートされない場合があります。さらに、フローの API バージョンなどの設定もリアクティビティに影響する場合があります。詳細は、「画面フローを反応型にする」とそのサブページを参照してください。

Trailhead Playground の起動

このハンズオンプロジェクトの作業は、Trailhead Playground というあなた個人の Salesforce 環境で行います。まず Trailhead にログインしてから、このページの下部にある [Launch (起動)] をクリックし、Trailhead Playground を取得してください。Playground は新しいブラウザータブまたはウィンドウで開きます。このプロジェクトの作業中は Playground ウィンドウを開いたままにしておきます。Playground でこのプロジェクトのステップを完了した後、このウィンドウに戻り、このページの下部にある [Verify Step (ステップを確認)] をクリックしてください。

リアクティブなフローを作成する

リアクティブなコンポーネントが多数含まれる画面フロー例を作成しましょう。Pyroclastic, Inc. のサポート部門が特定の種類のケースを作成するフローを必要としています。新しいフローの要件は、次のとおりです。

ユーザーに、ケースの件名、説明、優先度、期日の入力を要求する。
期日を提案し、ユーザーがこの期日からどれくらい外れることができるかを制限する。
件名と説明にすべての必要情報が含まれていることを確認するようユーザーに促す。

このプロジェクトでは、画面の作成のみに焦点を当てます。ほかの要素について気にする必要はありません。では、新しいフローで始めましょう。

アプリケーションランチャー () で、[Flows (フロー)] を検索して開きます。
[New (新規)] をクリックします。
[Screen Flow (画面フロー)] を選択します。
フローキャンバスの [Start (開始)] 要素の後のパスでをクリックします。
[Screen (画面)] を選択して画面要素を追加します。
[Screen Properties (画面のプロパティ)] ペインで、[Label (表示ラベル)] に Get Case Details (ケースの詳細を取得) と入力します。[API Name (API 参照名)] が Get_Case_Details であることを確認します。
[Components (コンポーネント)] リストで、[Text (テキスト)] をクリックしてテキストコンポーネントを画面キャンバスに追加します。
- [Label (表示ラベル)] に Subject (件名) と入力します。
- [API Name (API 参照名)] が Subject であることを確認します。
- [Require (必須)] 項目をオンにします。
[Long Text Area (ロングテキストエリア)] コンポーネントを画面キャンバスに追加します。
- [Label (表示ラベル)] に、Description (説明) と入力します。
- [API Name (API 参照名)] が Description であることを確認します。
- [Require (必須)] 項目をオンにします。
[Radio Buttons (ラジオボタン)] コンポーネントを画面キャンバスに追加します。
- [Label (表示ラベル)] に Priority (優先度) と入力します。
- [API Name (API 参照名)] が Priorityであることを確認します。
- [Require (必須)] 項目をオンにします。
- [Choice (選択肢)] 項目で、[New Choice Resource (新規選択肢リソース)] を選択します。
  - [Resource Type (リソース種別)] で [Picklist Choice Set (選択リスト選択肢セット)] を選択します。
  - [API Name (API 参照名)] に choicePriority と入力します。
  - [Object (オブジェクト)] で [Case (ケース)] を選択します。
  - [Data Type (データ型)] で、[Picklist (選択リスト)] を選択します。
  - [Field (項目)] で [Priority (優先度)] を選択します。
  - [Choice (選択肢)] 項目に {!choicePriority} が含まれていない場合は [choicePriority] を選択します。
[Date (日付)] コンポーネントを画面キャンバスに追加します。
- [Label (表示ラベル)] に、Due Date (期日) と入力します。
- [API Name (API 参照名)] が Due_Date であることを確認します。
- [Read Only (参照のみ)] で、[$GlobalConstant.True] を選択します。
[Checkbox (チェックボックス)] コンポーネントを画面キャンバスに追加します。
- [Label (表示ラベル)] に、I confirm that the case's subject and description contain all necessary information to replicate the bug, including login information if needed. (ケースの件名と説明に、バグの再現に必要なすべての情報 (必要に応じてログイン情報を含む) が含まれていることを確認しました。) と入力します。
- [API Name (API 参照名)] を Confirmation に変更します。
[Done (完了)] をクリックします。
フローを保存します。[Flow Label (フローの表示ラベル)] に New Bug Case (新しいバグケース) と入力します。[API Name (API 参照名)] が New_Bug_Case であることを確認します。

これで画面に基本コンポーネントが含まれましたが、リアクティビティは備わっていません。では、追加しましょう。

項目をリアクティブに無効化する

ユーザーが最終的な件名と説明を確認したことを確実にするために、確認ボックスがオンになった後は [Subject (件名)] 項目と [Description (説明)] 項目が編集されないようにしましょう。確認ボックスがオンになったときに [Subject (件名)] 項目と [Description (説明)] 項目が無効になるようにした場合、ユーザーが件名または説明を編集するには、確認ボックスをオフにし、後で新しい値を確認する必要があります。

それでは、設定してみましょう。

[Get Case Details (ケースの詳細を取得)] 画面で、[Subject (件名)] コンポーネントを選択します。
[Disabled (無効)] で、[Confirmation (確認)] 画面コンポーネントを選択します。
[Description (説明)] コンポーネントにステップ 1 と 2 を繰り返します。
[Done (完了)] をクリックします。
フローを保存します。

では、どういうことかを説明します。[Confirmation (確認)] 画面コンポーネントはチェックボックスです。その値は必ず $GlobalConstant.True か $GlobalConstant.False のいずれか (または null) です (null は通常 $GlobalConstant.False と同様に扱われます)。フローにより、その True 値または False 値を、[Confirmation (確認)] コンポーネントを参照する別のコンポーネントの設定に取り込むことができます。フローが [Subject (件名)] または [Description (説明)] コンポーネントに到達すると、 [Confirmation (確認)] コンポーネントの値が [Disabled (無効)] 設定に取り込まれます。ユーザーが [Confirmation (確認)] ボックスをオンにすると (True)、([Subject (件名)] および [Description (説明)] コンポーネントの) [Disabled (無効)] は True になります。[Confirmation (確認)] ボックスをオフにすると、ただちにコンポーネントの [Disabled (無効)] 設定が False に設定され、ユーザーが画面上で [Subject (件名)] 項目と [Description (説明)] 項目を編集できるようになります。

このリアクティビティの実際の動作を確認するには、メニューバーにある [Run (実行)] をクリックして新しいタブでフローを実行します。[I confirm… (ケースの件名と説明に…)] チェックボックスをクリックして、[Subject (件名)] 項目と [Description (説明)] 項目がどうなるかを見てみましょう。素晴らしい! ★ ただし、まだほんの始まりにすぎません。

[Disabled (無効)] と [Read Only (参照のみ)] の比較

[Read Only (参照のみ)] オプションは [Disabled (無効)] に似ていますが、大きな違いがあります。一部のコンポーネントで見え方が異なるほか、アクセシビリティに関して考慮すべき点も異なります。Tab キーを使用して、参照のみ項目間は移動できますが、無効項目間は移動できません。[Subject (件名)] と [Description (説明)] で [Disabled (無効)] の代わりに [Read Only (参照のみ)] 設定を使用して、このフローを実行してみてください。

選択リスト値をリアクティブに事前選択する

多くの場合、緊急の用件があるお客様は予測可能な言葉を使用しています。この事実に基づいて、ユーザーのクリック数を減らすことができます。[Subject (件名)] 項目に、ある特定の単語を検索し、その単語が見つかった場合に [Priority (優先度)] を [High (高)] に設定する数式を作成しましょう。

をクリックして、[Toolbox (ツールボックス)] を表示します。
[New Resource (新規リソース)] をクリックします。
[Formula (数式)] を選択して数式リソースを作成します。
- [API Name (API 参照名)] に DefaultPriority と入力します。
- [Data Type (データ型)] に [Text (テキスト)] を選択します。
- [Formula (数式)] に、次の数式を入力します。
```
IF(
   OR(
      CONTAINS(LOWER({!Subject}),"urgent"),
      CONTAINS(LOWER({!Subject}),"cancel")
   ),
   "High",
   "Medium"
)
```
- [Done (完了)] をクリックします。
[Get Case Details (ケースの詳細を取得)] 画面で、[Priority (優先度)] コンポーネントを選択します。
[Default Value (デフォルト値)] で、[DefaultPriority] を選択します。
[Done (完了)] をクリックします。
フローを保存します。

まず、この数式について説明します。この数式では、「urgent」(緊急) または「cancel」(キャンセル) という単語を検索します。その単語のいずれかが見つかった場合、[High (高)] というテキストが返されます。見つからなかった場合、[Medium (中)] が返されます。ただし、どの文字が大文字、小文字であるかを予測することはできません (「Urgent」、「URGENT」、または「uRgEnT」の可能性さえあります)。そのため、 LOWER 関数を使用して、この単語がすべて小文字であるバージョンを検索します。

大文字と小文字が関係ない場合は、特定のテキストのユーザー入力値を確認する数式で LOWER() 関数を使用することをお勧めします。CONTAINS()、BEGINS()、FIND()、SUBSTITUTE() などの数式関数を使用する場合は必ず、LOWER() 関数を使用することを検討してください。

[Priority (優先度)] コンポーネントの [Default Value (デフォルト値)] にこの数式を置くと、画面が読み込まれたときには [Subject (件名)] 項目が空白であるため [Medium (中)] 値が設定されます。[Subject (件名)] 項目に「urgent」(緊急) または「cancel」(キャンセル) が入力されるとすぐに数式で確認され、値が変更されます。ユーザーは、画面を更新したり、何かをクリックしたりする必要はありません。

この新しい機能を確認するには、[Run (実行)] をクリックします。[Subject (件名)] 項目に何かテキストを入力し、「urgent」(緊急) または「cancel」(キャンセル) を含めたときにどうなるかを確認してみましょう。

日付をリアクティブに計算する

サポートチームのメンバーがケースを作成するときに、フローによって [Due Date (期日)] 項目を任意の値に設定できます。Pyroclastic のガイドラインには、期日はケースの優先度に基づいて決める必要があると記載されています (優先度が低いケースは 18 日、優先度が中程度のケースは 10 日、優先度が高いケースは 3 日)。サポートチームメンバーは、この期限に最大 4 日追加できます。では、[Priority (優先度)] 項目の値に基づいてデフォルト期日を設定し、ユーザーが画面上で期日の調整を簡単に制御できるようにしましょう。

[Get Case Details (ケースの詳細を取得)] 画面で、[Slider (スライダー)] を [Components (コンポーネント)] リストから画面キャンバスの [Due Date (期日)] 項目と [Confirmation (確認)] チェックボックスの間にドラッグします。
- [API Name (API 参照名)] に AdjustDueDateと入力します。
- [Label (表示ラベル)] に Adjust Due Date (期日を調整) と入力します。
- [Range Maximum (範囲の最大値)] に 4 と入力します。
- [Slider Size (スライダーサイズ)] に medium (中) と入力します。
- ほかの項目はデフォルト値のままにします。
[Done (完了)] をクリックします。
[Toolbox (ツールボックス)] で [New Resource (新規リソース)] をクリックします。
[Formula (数式)] を選択して数式リソースを作成します。
- [API Name (API 参照名)] に DefaultDueDate と入力します。
- [Data Type (データ型)] に [Date (日付)] を選択します。
- [Formula (数式)] に、次の数式を入力します。
```
TODAY()
+CASE({!Priority},"High",3,"Medium",10,"Low",18,10)
+IF(
   ISNULL({!AdjustDueDate.value}),
   0,
   {!AdjustDueDate.value}
)
```
- [Done (完了)] をクリックします。
[Get Case Details (ケースの詳細を取得)] 画面で、[Due Date (期日)] コンポーネントを選択します。
[Default Value (デフォルト値)] で、[DefaultDueDate] を選択します。
[Done (完了)] をクリックします。
フローを保存します。

この新しい数式を見てみましょう。CASE 関数により、選択された優先度 {!Priority} の確認が行われ、今日の日付に追加される日数が決定します。その後、[Adjust Due Date (期日を調整)] スライダーで選択した日数 {!AdjustDueDate.value} が追加されますが、 IF 関数内に置かれているのはなぜでしょうか?

このフローでは、必ず [Adjust Due Date (期日を調整)] スライダーが「0」に設定されて読み込まれます。ただし、スライダーコンポーネントには少し変わった癖があります。デフォルト値が「0」である場合、フローの反応型コンポーネントは値が null であるかのように動作します。これは問題です。なぜなら、[Date (日付)] 画面コンポーネントは null を処理できないため、このフローの [Due Date (期日)] コンポーネントで空白が読み込まれてしまうからです。これを防ぐために、IF 関数を使用して null をゼロに変更します。

空白の [Due Date (期日)] 項目が読み込まれている画面コンポーネント。

[Due Date (期日)] で空白が読み込まれないようにするには、スライダーの値が null の場合に代わりに「0」値を返すよう数式に伝えます。この IF 関数によって、数式と [Due Date (期日)] コンポーネントが想定どおりに機能できるようになります。

[Run (実行)] をクリックして画面を確認してみましょう。優先度を変更し、スライダーを調整して [Due Date (期日)] にどう影響するかを確認してみてください。

ユーザーをリアクティブに誘導する

入力規則はデータを保護する (およびユーザーを自分自身から保護する) ために不可欠ですが、ユーザーがクリックして現在の画面を離れるまで動作しません。リアクティビティ機能を使用すれば、問題をすぐにユーザーに知らせることで、ユーザーの時間と労力を節約できます。

これを実行するには、すべてのフロー画面コンポーネントに備わっている条件付き表示というリアクティブ機能を使用します。コンポーネントに条件付き表示を追加すると、指定した条件が存在する場合にのみフローにコンポーネントが表示されます。この条件はフロー内のほとんどすべてを参照できます。同一画面上のほかのコンポーネントを参照することも可能です。コンポーネントは、指定した条件に従ってリアクティブに消えたり、現れたりします。

Pyroclastic のサポートチームのメンバーは期日を最大 4 日延ばせますが、3 日以上の場合は承認を求める必要があります。では、承認要件についてユーザーに知らせる反応型アラートを追加しましょう。

[Get Case Details (ケースの詳細を取得)] 画面で、[Display Text (表示テキスト)] を [Components (コンポーネント)] リストから画面キャンバスの [Adjust Due Date (期日を調整)] スライダーと [Confirmation (確認)] チェックボックスの間にドラッグします。
- [API Name (API 参照名)] に WarningApproval と入力します。
- 絵文字 ⚠️ をコピーし、テキストエリアに貼り付けます。絵文字のサイズが大きいことを確認してください。ちょうどいい大きさは「48」です。
- 絵文字の後に、This due date requires approval from your supervisor. (この期日は、スーパーバイザーからの承認が必要です。) と入力します。
[コンポーネントの表示を設定] をクリックします。
- [コンポーネントを表示するタイミング] で [All Conditions Are Met (AND) (すべての条件に一致 (AND))] を選択します。
- [Resource (リソース)] で [AdjustDueDate]、[value] の順に選択します。
- [Operator (演算子)] に [Greater Than or Equal (＞＝)] を選択します。
- [Value (値)] に 3 と入力します。
ポップアップの [Done (完了)] をクリックします。
[Display Text (表示テキスト)] パネルは次のようになります。
[Display Text (表示テキスト)] を [Components (コンポーネント)] リストから画面キャンバスの [WarningApproval] コンポーネントと [Confirmation (確認)] チェックボックスの間にドラッグします。
- [API Name (API 参照名)] に GreenNoApproval と入力します。
- 絵文字 👍 をコピーし、テキストエリアに貼り付けます。この絵文字は、少し小さく「36」くらいの大きさにします。
- この画像の後に、This due date doesn’t require approval. (この期日には承認は必要ありません。) と入力します。
[コンポーネントの表示を設定] をクリックします。
- [When to Display Component (コンポーネントを表示するタイミング)] で、[Any Condition Is Met (OR) (いずれかの条件に一致 (OR))] を選択します。
- [Resource (リソース)] に [AdjustDueDate] > [value] を選択します。
- [Operator (演算子)] で [Less Than (＜)] を選択します。
- [Value (値)] に 3 と入力します。
ポップアップの [Done (完了)] をクリックします。
[Add Condition (条件を追加)] をクリックします。
- [Resource (リソース)] に [AdjustDueDate] > [value] を選択します。
- [Operator (演算子)] で [Is Null (null)] を選択します。
- [値] に [$GlobalConstant.True] を選択します。
ポップアップの [Done (完了)] をクリックします。
[Display Text (表示テキスト)] パネルは次のようになります。
[Done (完了)] をクリックして画面要素を閉じます。
フローを保存します。

これで、アラートとして 2 つの [Display Text (表示テキスト)] コンポーネント機能が追加されました。ただし、各コンポーネントの条件付き表示により、任意の時点でユーザーに表示されるコンポーネントは 1 つのみです。承認の警告は [Adjust Due Date (期日を調整)] スライダーで期日に 3 日以上追加された場合にのみ表示され、承認不要メッセージは期日に追加された日数が 3 日未満の場合にのみ表示されます。DefaultDueDate 数式のように、null は「0」と同じであるため、[Adjust Due Date (期日を調整)] の null 値を検索する条件を追加します。追加しなければ、ユーザーがスライダーを動かさなかった場合に承認不要メッセージが表示されません。

もう一度、[Run (実行)] をクリックして完成画面を確認しましょう。スライダーを動かすと、2 つのコンポーネントが表示または非表示になります。

これで、リアクティビティの実際の動作を確認できました。次は、この機能を使用して組織の画面フローをどのように改善できるかを考えてみましょう。作成したフローが機能していることに満足しないでください。使い勝手が悪ければ、フローの優れた機能を活用して、さらに改善することが可能です。

リソース

Salesforce ヘルプ: フローの条件付き表示に関する考慮事項

予想時間

トピック

ヘルプをお探しですか?

Flow Builder のリソース

Agentforce 360 Platform のリソース