フローへの画面の追加
学習の目的
この単元を完了すると、次のことができるようになります。
- 画面に追加できるコンポーネントの種類を挙げる。
- 確認画面をフローに追加する。
画面コンポーネントの概要
Lightning アプリケーションビルダーでレコードページのユーザエクスペリエンスを設定するのと同じように、画面を使用してフローユーザ向けに設定を行います。
各画面は 1 つ以上の画面コンポーネントで構成されます。画面コンポーネントとは、画面に追加される、設定可能で再利用可能な要素です。
画面コンポーネントには、3 つのカテゴリがあります。
- 入力: ユーザからの情報を必要とする標準コンポーネントが含まれます。
- 表示: ユーザに情報を表示する標準コンポーネントが含まれます。
- カスタム: ユーザが作成したコンポーネントが含まれます。AppExchange やサードパーティライブラリからインストールするか、開発者と協力して独自のものを作成します。
画面コンポーネントでの選択肢
ほとんどの標準入力コンポーネントでは、数値やテキストのパラグラフといった値が要求されます。ただし、ラジオボタン、選択リスト、チェックボックスグループ、複数選択リストの各コンポーネントでは、ユーザはオプションのセットから選択します。使用可能なオプションを指定するには、少なくとも 1 つの選択肢リソースまたは選択肢セットリソースを選択します。
- レコード選択肢セットでは、絞り込まれたレコードのリストを使用して複数のオプションが生成されます。
- 選択リスト選択肢セットでは、選択リスト項目または複数選択リスト項目の値を使用して複数のオプションが生成されます。
- 選択肢は、表示ラベルと値が手動で設定された 1 つのオプションを表します。
ランタイム環境
画面コンポーネントについて、もう 1 つの重要な考慮事項が、どのフローランタイム環境でサポートされているかということです。
フローには、Lightning ランタイムと Classic ランタイムの 2 つ異なるのランタイム環境があります。名前からわかるように、Lightning ランタイムの外観や動作は Lightning Experience に類似していて、Classic ランタイムの外観や動作は、Visualforce に類似しています。
ただし、この 2 つのランタイム環境はどちらのデスクトップ環境にも関連付けられていません。Salesforce Classic で Lightning ランタイムを使用することも、Lightning Experience で Classic ランタイムを使用することもできます。
Lightning ランタイムではすべての画面コンポーネントがサポートされていますが、Classic ランタイムでは一部の画面コンポーネントがサポートされていません。コンポーネントに Lightning ランタイムが必要なことは、次の 3 つによって示されます。
- コンポーネントアイコンが稲妻である。
- コンポーネントでプレビューが使用できない。
- フローを保存するときに、画面コンポーネントに Lightning ランタイムが必要であるという警告が表示される。
画面要素
画面要素を詳しく見てみましょう。
画面のプロパティには、ヘッダー、フッター、または特定のナビゲーションオプションを表示するかどうかが含まれます。
プロジェクトで行ったこと
「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した画面を見てみましょう。
- [設定] から、[クイック検索] ボックスに「フロー」と入力し、[フロー] を選択します。
- [New Contact (新規取引先責任者)] フローを開きます。
- キャンバスで、[Contact Info (取引先責任者情報)] をダブルクリックします。
画面には、取引先責任者に関する情報を求める 3 つのコンポーネントがあります。名前、関連付けられた取引先、取引先責任者の名前がすでに存在する場合にどうするかを指定する切り替えです。
名前コンポーネント
まずは、名前コンポーネントを見てみましょう。
- このコンポーネントは無効になっておらず、参照のみでもありません。
- このコンポーネントには、[姓] と [名] の項目のみが表示されます。(名前コンポーネントには、ミドルネームなどの他の名前項目も表示できます。)プロジェクトの名前コンポーネントに敬称が表示されていた場合は、オプションは [Mr. (様)]、[Mrs.(様)]、[Ms.(様)] になります。
- このコンポーネントの表示ラベルは [Name (名前)] です。
フローの他の部分で、ユーザが入力した [姓] と [名] の値を参照できるようにする必要があります。名前コンポーネントを使用すると、入力された値を参照するには、値を変数に保存するしかありません。そこで [出力値を保存] セクションを使用します。
[姓] と [名] の値は {!contact} レコード変数の項目に保存されます。
[Account (取引先)] コンポーネント
次に、[Account (取引先)] を見てみましょう。これは、選択リストコンポーネントです。
- このコンポーネントの表示ラベルは [Account (取引先)] です (1)。
- このコンポーネントではテキストの選択肢と選択肢セットのみがサポートされています (2)。
- 選択肢は、[accounts (取引先)] レコード選択肢セットを使用して生成されます (3)。
変数内で選択した選択肢の値を手動で保存する必要はありません。その代わりに、画面コンポーネントを API 参照名 (Account) によって参照できます。ユーザが取引先を選択すると、画面コンポーネントは選択された選択肢の値に設定されます。レコード選択肢セットの設定に基づき、選択肢の値は選択された取引先の ID になります。
フローの更新
「フローの基本」モジュールに記載されているビジネス要件を簡単に確認しましょう。
要件 | 使用する要素の種類 |
---|---|
ユーザから取引先責任者の名、姓、取引先などの情報と、一致する取引先責任者が存在する場合の対処法を収集する。 | 画面 |
一致する取引先責任者レコードを検索する。 | アクション |
一致するレコードが見つかったかどうかを確認する。 | ロジック |
一致が存在しない場合、取引先責任者を作成する。 | アクション |
一致が存在する場合、取引先責任者を更新する。 | アクション |
両方のブランチで、フローが行った処理を Chatter で確認する。 | アクション |
両方のブランチで、フローが完了したことを確認する。 | 画面 |
このフローには、ユーザから情報を収集する画面がすでにあるので、最初の要件は満たされたとみなすことができます。ただし、もう 1 つ画面が足りません。フローが完了したことを確認する画面です。
確認画面を追加しましょう。
確認画面の追加
- 「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した [New Contact (新規取引先責任者)] フローをまだ開いていない場合は、開きます。
- [画面] 要素をキャンバスにドラッグします。
- 画面の表示ラベル (「Confirm」 (確認)) を設定します。
- スクロールするか Tab キーを使用して [ナビゲーションを制御] セクションに移動して展開し、[前へ] を選択解除します。他の画面プロパティはそのままにします。
- 画面に表示テキストコンポーネントを追加します。画面コンポーネントペインで、「テキスト」を検索し、[表示テキスト] をキャンバスにドラッグします。
- 表示テキストコンポーネントの [API 参照名] に「confirmation_message」と入力します。次に、ユーザに感謝してフローの処理を確認するメッセージを作成しましょう。このフローには複数のブランチがあり、新しい取引先責任者が作成されるか、既存の取引先責任者が更新されます。理想的には、確認メッセージは「Thanks! The contact was created. (ありがとうございます。取引先責任者が作成されました。)」または「Thanks! The contact was updated. (ありがとうございます。取引先責任者が更新されました。)」となります。カスタム確認メッセージを表示するには、次の方法があります。
- 両方の可能性に対応した静的な確認メッセージを 1 つ作成する。たとえば、「Thanks! The contact was created or updated. (取引先責任者が作成または更新されました。)」とします。このオプションは簡単ですが、ユーザはすぐに「どっちなのだろう?」と思うでしょう。
- フローの結果によって変化する動的な確認メッセージを作成する。
- 各可能性に別々の確認画面を作成する。(フローをすっきりさせておくために、この方法は最後の手段に取っておきましょう。)
- テキストボックスに「Thanks! The contact was XYZ.」 (ありがとうございます。取引先責任者が XYZ されました。) と入力します。(心配いりません。XYZ は数式のプレースホルダです。)
次に、数式をどのようにするかを考えましょう。
数式を使用した動的な確認メッセージ
まず、IF 関数 IF(logical_test, value_if_true, value_if_false) から始めます。
logical_test では、フローによって取引先責任者が作成されたか更新されたかをチェックします。そのためには、レコードの作成要素を参照します。{!Create_Contact} 差し込み項目は、フローが [Create Contact (取引先責任者の作成)] 要素を実行した場合は true に解決されます。そうでない場合 (フローが取引先責任者を更新した場合) は、この差し込み項目は true に解決されません。
論理テストが true であれば、フローは取引先責任者を作成しました。論理テストが false であれば、フローは取引先責任者を更新しました。したがって、value_if_true は “created” で value_if_false は “updated” となります。
最終的な数式は次のようになります。IF({!Create_Contact}, "created", "updated")
では、表示テキストコンポーネントに戻って、この数式を使用しましょう。
- 表示テキストコンポーネントで、テキストボックスの上にある検索ボックスをクリックし、[新規リソース] をクリックします。
- 次の値を使用して数式を設定し、[完了] をクリックします。
項目 値 リソース種別 数式 API 参照名 created_or_updated データ型 テキスト 数式 IF({!Create_Contact}, "created", "updated") - 表示テキストコンポーネントで、XYZ を数式への参照で置き換えます。数式を挿入するには、もう一度検索ボックスをクリックし、「created」と入力して、作成した数式を選択します。
- 作成または更新された取引先責任者へのリンクを追加しましょう。数式は必要ありません。{!contact} レコード変数に保存されている取引先責任者レコードの ID を使用して相対リンクを作成します。
- 確認メッセージで、「The contact」を選択して
をクリックします。
- キーボードの Delete キーまたは Backspace キーを使用して既存のテキストを削除してから、「/{!contact.Id}」と入力します。
- [保存] をクリックします。
- 確認メッセージで、「The contact」を選択して
- [画面] 要素で、[完了] をクリックします。
- フローを保存し、警告は無視します。画面は後ほど接続します。
これで、フローにはユーザとやりとりを行う 2 つの画面ができました。「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した最初の画面では、ユーザからの情報を要求します。この単元で作成した 2 つ目の画面では、その情報でフローが実行した処理を確認します。次は、Flow Builder の基本的なロジック要素を詳しく見ていきましょう。
リソース
- Salesforce ヘルプ: 画面要素リファレンス
- Salesforce ヘルプ: 提供される画面コンポーネント
- AppExchange: Flow Solutions (フローソリューション)
- Lightning Aura コンポーネント開発者ガイド: Aura コンポーネントを使用したフロー画面のカスタマイズ
- Trailhead: 数式と入力規則