•
進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

フローへの画面の追加

学習の目的

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

  • 画面に追加できるコンポーネントの種類を挙げる。
  • 確認画面をフローに追加する。

画面コンポーネントの概要

Lightning アプリケーションビルダーでレコードページのユーザエクスペリエンスを設定するのと同じように、画面を使用してフローユーザ向けに設定を行います。

各画面は 1 つ以上の画面コンポーネントで構成されます。画面コンポーネントとは、画面に追加される、設定可能で再利用可能な要素です。

画面コンポーネントには、3 つのカテゴリがあります。

  • 入力: ユーザからの情報を必要とする標準コンポーネントが含まれます。
  • 表示: ユーザに情報を表示する標準コンポーネントが含まれます。
  • カスタム: ユーザが作成したコンポーネントが含まれます。AppExchange やサードパーティライブラリからインストールするか、開発者と協力して独自のものを作成します。

画面コンポーネントでの選択肢

ほとんどの標準入力コンポーネントでは、数値やテキストのパラグラフといった値が要求されます。ただし、ラジオボタン、選択リスト、チェックボックスグループ、複数選択リストの各コンポーネントでは、ユーザはオプションのセットから選択します。使用可能なオプションを指定するには、少なくとも 1 つの選択肢リソースまたは選択肢セットリソースを選択します。

  • レコード選択肢セットでは、絞り込まれたレコードのリストを使用して複数のオプションが生成されます。
  • 選択リスト選択肢セットでは、選択リスト項目または複数選択リスト項目の値を使用して複数のオプションが生成されます。
  • 選択肢は、表示ラベルと値が手動で設定された 1 つのオプションを表します。
ヒント

ヒント

選択肢リソースは、他の 2 つがどちらも使用できない場合にのみ使用することをお勧めします。レコード選択肢セットと選択リスト選択肢セットは設定が簡単で、選択肢ほどメンテナンスを要しません。

ランタイム環境

画面コンポーネントについて、もう 1 つの重要な考慮事項が、どのフローランタイム環境でサポートされているかということです。

フローには、Lightning ランタイムと Classic ランタイムの 2 つ異なるのランタイム環境があります。名前からわかるように、Lightning ランタイムの外観や動作は Lightning Experience に類似していて、Classic ランタイムの外観や動作は、Visualforce に類似しています。

Classic ランタイムと Lightning ランタイムでの同じフロー画面の比較

ただし、この 2 つのランタイム環境はどちらのデスクトップ環境にも関連付けられていません。Salesforce Classic で Lightning ランタイムを使用することも、Lightning Experience で Classic ランタイムを使用することもできます。

メモ

メモ

Classic ランタイムの機能強化は実施されなくなりました。そのため、フロー画面の動作に関して機能強化を利用したい場合は、Lightning ランタイムを使用してください。

Lightning ランタイムではすべての画面コンポーネントがサポートされていますが、Classic ランタイムでは一部の画面コンポーネントがサポートされていません。コンポーネントに Lightning ランタイムが必要なことは、次の 3 つによって示されます。

  • コンポーネントアイコンが稲妻である。
  • コンポーネントでプレビューが使用できない。

    画面キャンバス上の [切り替え] コンポーネントに、このコンポーネントのプレビューが使用できないことが表示されています。

  • フローを保存するときに、画面コンポーネントに Lightning ランタイムが必要であるという警告が表示される。

    一部の画面コンポーネントは正常に動作するために Lightning ランタイムが必要であることを示す警告画面

画面要素

画面要素を詳しく見てみましょう。

新規画面要素

画面コンポーネントペイン (1)
左側のペインには、組織で使用できるすべての画面コンポーネントが表示されます。コンポーネントを画面に追加するには、クリックしてドラッグします。
ヒント

ヒント

検索項目を使用すると、必要な画面コンポーネントを簡単に見つけることができます。

画面キャンバス (2)
キャンバスは、画面を作成する場所です。コンポーネントを正しい順序に並び替えるには、ドラッグします。
プロパティペイン (3)
プロパティペインにはキャンバスで選択している内容に応じて、画面のプロパティまたは選択したコンポーネントのプロパティのいずれかが表示されます。画面のプロパティを表示または変更するには、キャンバスのヘッダーまたはフッターをクリックします。

画面のプロパティには、ヘッダー、フッター、または特定のナビゲーションオプションを表示するかどうかが含まれます。

プロジェクトで行ったこと

「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した画面を見てみましょう。

[New Contact (新規取引先責任者)] フローで、画面を開きます。
  1. [設定] から、[クイック検索] ボックスに「フロー」と入力し、[フロー] を選択します。
  2. [New Contact (新規取引先責任者)] フローを開きます。
  3. キャンバスで、[Contact Info (取引先責任者情報)] をダブルクリックします。

画面には、取引先責任者に関する情報を求める 3 つのコンポーネントがあります。名前、関連付けられた取引先、取引先責任者の名前がすでに存在する場合にどうするかを指定する切り替えです。

[New Contact (新規取引先責任者)] フローの [Contact Info (取引先責任者情報)] 画面

名前コンポーネント

まずは、名前コンポーネントを見てみましょう。

名前コンポーネントの設定

  • このコンポーネントは無効になっておらず、参照のみでもありません。
  • このコンポーネントには、[姓] と [名] の項目のみが表示されます。(名前コンポーネントには、ミドルネームなどの他の名前項目も表示できます。)プロジェクトの名前コンポーネントに敬称が表示されていた場合は、オプションは [Mr. (様)]、[Mrs.(様)]、[Ms.(様)] になります。
  • このコンポーネントの表示ラベルは [Name (名前)] です。

フローの他の部分で、ユーザが入力した [姓] と [名] の値を参照できるようにする必要があります。名前コンポーネントを使用すると、入力された値を参照するには、値を変数に保存するしかありません。そこで [出力値を保存] セクションを使用します。

[姓] と [名] の値は {!contact} レコード変数の項目に保存されます。

[出力値を保存] セクション。ユーザが [姓] と [名] に入力した値は、{!contact} 変数の項目に保存されます。

[Account (取引先)] コンポーネント

次に、[Account (取引先)] を見てみましょう。これは、選択リストコンポーネントです。

選択リストコンポーネントの設定

  • このコンポーネントの表示ラベルは [Account (取引先)] です (1)。
  • このコンポーネントではテキストの選択肢と選択肢セットのみがサポートされています (2)。
  • 選択肢は、[accounts (取引先)] レコード選択肢セットを使用して生成されます (3)。

変数内で選択した選択肢の値を手動で保存する必要はありません。その代わりに、画面コンポーネントを API 参照名 (Account) によって参照できます。ユーザが取引先を選択すると、画面コンポーネントは選択された選択肢の値に設定されます。レコード選択肢セットの設定に基づき、選択肢の値は選択された取引先の ID になります。

切り替えコンポーネント

最後は、切り替えコンポーネントです。

切り替えコンポーネントの設定

  • 切り替えの横に表示されるテキストは [If this contact already exists, update the existing record. (この取引先責任者がすでに存在する場合は、既存のレコードを更新する。)] です。
  • 切り替えが有効になっている場合は、表示ラベルは [Update existing (既存の更新)] です。
  • そうでない場合は、切り替えの表示ラベルは [Create other contact (他の取引先責任者の作成)] です。

名前コンポーネントと同じように、切り替え値もフローの他の部分で使用する必要があります。[出力値を保存] セクションで、この切り替え値は {!updateExisting} という Boolean 変数に保存されます。切り替え値は true または false と同等なので、変数は Boolean である必要があります。

[出力値を保存] セクションで、この切り替え値は {!updateExisting} 変数に保存されます。

フローの更新

「フローの基本」モジュールに記載されているビジネス要件を簡単に確認しましょう。

要件 使用する要素の種類
ユーザから取引先責任者の名、姓、取引先などの情報と、一致する取引先責任者が存在する場合の対処法を収集する。 画面
一致する取引先責任者レコードを検索する。 アクション
一致するレコードが見つかったかどうかを確認する。 ロジック
一致が存在しない場合、取引先責任者を作成する。 アクション
一致が存在する場合、取引先責任者を更新する。 アクション
両方のブランチで、フローが行った処理を Chatter で確認する。 アクション
両方のブランチで、フローが完了したことを確認する。 画面

このフローには、ユーザから情報を収集する画面がすでにあるので、最初の要件は満たされたとみなすことができます。ただし、もう 1 つ画面が足りません。フローが完了したことを確認する画面です。

確認画面を追加しましょう。

確認画面の追加

  1. 「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した [New Contact (新規取引先責任者)] フローをまだ開いていない場合は、開きます。
  2. [画面] 要素をキャンバスにドラッグします。
  3. 画面の表示ラベル (「Confirm」(確認)) を設定します。
  4. スクロールするか Tab キーを使用して [ナビゲーションを制御] セクションに移動して展開し、[前へ] を選択解除します。他の画面プロパティはそのままにします。
  5. 画面に表示テキストコンポーネントを追加します。画面コンポーネントペインで、「テキスト」を検索し、[表示テキスト] をキャンバスにドラッグします。
  6. 表示テキストコンポーネントの [API 参照名] に「confirmation_message」と入力します。

    次に、ユーザに感謝してフローの処理を確認するメッセージを作成しましょう。

    このフローには複数のブランチがあり、新しい取引先責任者が作成されるか、既存の取引先責任者が更新されます。理想的には、確認メッセージは「Thanks! The contact was created. (ありがとうございます。取引先責任者が作成されました。)」または「Thanks! The contact was updated. (ありがとうございます。取引先責任者が更新されました。)」となります。

    カスタム確認メッセージを表示するには、次の方法があります。

    • 両方の可能性に対応した静的な確認メッセージを 1 つ作成する。たとえば、「Thanks! The contact was created or updated. (取引先責任者が作成または更新されました。)」とします。このオプションは簡単ですが、ユーザはすぐに「どっちなのだろう?」と思うでしょう。
    • フローの結果によって変化する動的な確認メッセージを作成する。
    • 各可能性に別々の確認画面を作成する。(フローをすっきりさせておくために、この方法は最後の手段に取っておきましょう。)

    2 つのメッセージの間で変更があるのは 1 語だけなので、動的メッセージを機能させるために必要なのは簡単な数式です。

  7. テキストボックスに「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")

では、表示テキストコンポーネントに戻って、この数式を使用しましょう。

  1. 表示テキストコンポーネントで、テキストボックスの上にある検索ボックスをクリックし、[新規リソース] をクリックします。
    検索ボックスからのドロップダウンオプションで強調表示されている [新規リソース] ボタン
  2. 次の値を使用して数式を設定し、[完了] をクリックします。
    項目 価値
    リソース種別 数式
    API 参照名 created_or_updated
    データ型 テキスト
    数式 IF({!Create_Contact}, "created", "updated")
    [created_or_updated] 数式
  3. 表示テキストコンポーネントで、XYZ を数式への参照で置き換えます。数式を挿入するには、もう一度検索ボックスをクリックし、「created」と入力して、作成した数式を選択します。
  4. 作成または更新された取引先責任者へのリンクを表示する簡単な HTML マークアップを追加しましょう。数式は必要ありません。{!contact} レコード変数に保存されている取引先責任者レコードの ID を使用して相対リンクを作成します。
    1. 確認メッセージ内で、取引先責任者をリンクの HTML タグで囲みます。メッセージの一部は <a href="">The contact</a> のようになります。
    2. 2 つの引用符の間に / を入力し、取引先責任者の ID の変数を挿入します。[リソースを挿入...] 検索ボックスにカーソルを置き、「contact」 と入力し、contact レコード変数の横にある [>] をクリックします。取引先責任者項目のリストから、[Id] を選択します。Thanks! <a href=“/{!contact.Id}”>The contact</a> has been {!created_or_updated}.
    確認画面の表示テキストコンポーネントの最終プレビュー
  5. [画面] 要素で、[完了] をクリックします。
    新しい [Confirm (確認)] 画面要素が強調表示されている [New Contact (新規取引先責任者)] フロー
  6. フローを保存し、警告は無視します。画面は後ほど接続します。

これで、フローにはユーザとやりとりを行う 2 つの画面ができました。「Build a Simple Flow (簡単なフローの作成)」プロジェクトで作成した最初の画面では、ユーザからの情報を要求します。この単元で作成した 2 つ目の画面では、その情報でフローが実行した処理を確認します。次は、Flow Builder の基本的なロジック要素を詳しく見ていきましょう。