フローパネルを開く

「Open Flow Panel」インタラクションは、Salesforceの Screen Flow（画面フロー） を Avonni のダイナミックコンポーネント内に埋め込み、パネルとして表示することを可能にします。 可能で、 コンポーネントの領域内に表示し、別のモーダルダイアログではなく、インタラクティブな複数ステップのプロセスをユーザーインターフェースにシームレスに統合します。

概要

「Open Flow Panel」インタラクションは Screen Flow をホストし、 インラインで ダイナミックコンポーネント内に表示します。これは次のようなシナリオに最適です：

• ガイド付きのステップバイステッププロセスで、 の一部である メインページのレイアウト内にあり、別のポップアップではないもの。

• フローがページ上の他のコンポーネントと並んで表示されること。

• モーダルダイアログよりも統合された体験を提供すること。

「Open Flow Dialog」との主な違い

「Open Flow Panel」は Screen Flow を 可能で、 コンポーネントのレイアウト内にパネルとして表示します。一方「Open Flow Dialog」はページを覆うモーダルダイアログウィンドウ内に Screen Flow を表示します。どちらも画面（UI）を持つ Screen Flow 用であり、自動起動フローには対応しません。

チュートリアル

このインタラクションを使用して特定のシナリオを実装する方法や実例は次をご覧ください：

Dynamic Component から Screen Flow に複数の選択レコードを渡す方法

仕組み

1. ユーザーアクション（任意）： ユーザーは することが コンポーネントと対話（例：ボタンをクリック）してパネルをトリガーするかもしれません。ただし、パネルを読み込み時にフローを表示するように構成することもできます。 読み込み時に.

2. パネルの表示： 「Open Flow Panel」インタラクションはコンポーネント内のパネル領域を表示可能にします。

3. Screen Flow の実行： 指定した Screen Flow が実行されます。 可能で、 パネル。

4. フロー内でのユーザーの対話： ユーザーはパネル内で Screen Flow の画面と対話し、入力や選択を行います。

5. データの受け渡し（任意）： ダイナミックコンポーネントからフローへデータを渡すことができます（例： 入力変数.

6. 出力（任意）： フローはダイナミックコンポーネントにデータを 出力変数として返すことができます。.

7. パネルの開閉： フローが完了するまでパネルは開いたままになります。あるいは、その表示を制御するアクションを設定することもできます。

8. 実行後のアクション（任意）： フロー完了後に発生させるアクション（例：トーストメッセージを表示、データのリフレッシュなど）を設定できます。

設定

「Open Flow Panel」インタラクションを設定するには：

1. コンポーネントを選択： フローパネルをホストする（または表示をトリガーする）Avonni コンポーネントを選択します。

2. インタラクションを追加： コンポーネントのプロパティパネルで「Actions」または「Interactions」を見つけます。新しいアクションを追加し、「Open Flow Panel」を選択します。

3. 設定を構成：

   • Flow の API 名： 埋め込みたい Screen Flow（画面フロー） の API 名を選択します。

   • フロー入力変数（任意）：

     • 名前： Screen Flow 内の入力変数の API 名。 このリストは、すでに Screen Flow 内で定義され「Available for Input（入力可能）」にマークされた変数を表示します。これらの入力変数は、このインタラクションを構成する前にフロー内で作成しておく必要があります。

     • 値： 選択した入力変数に渡す値。これは静的、コンポーネントからの動的値、またはリソースにすることができます。

   • 出力変数（任意）：

     • 名前： Screen Flow 内の出力変数の API 名。

     • リソース名： 返された値を格納するための ダイナミックコンポーネント 内のリソース（変数）の名前。

   • パネルヘッダー（任意）： フローパネルのヘッダーを設定します。

   • アクセシブルな説明（任意）： スクリーンリーダー向けの説明を提供します。

   • 完了時（任意）： フローが正常に完了したときに実行するアクションを設定します（例：トーストを表示、データをリフレッシュ、 パネルを非表示にする).

   • 閉じたとき（任意）： ユーザーがパネルを閉じた場合に発生させるアクションを設定します（これはパネルとフローの構成によっては可能/不可能があります）。

   • エラー時（任意）： フローがエラーに遭遇した場合に実行するアクションを設定します。

使用例：連絡先情報をインラインで更新する

Contacts を表示するデータテーブルがあるとします。ユーザーが連絡先の 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 を別の編集ページに移動せずにテーブルから直接更新できるようにしたい場面です。

1. Screen Flow を作成する：

   • 新しい Screen Flow を作成します。

   • 次という名前の入力変数を追加します： ContactId （テキスト型）。

   • 「Get Records」要素を追加して、に基づいて Contact レコードを取得します。 ContactId.

   • ユーザーが新しい 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。.

   • を選択できるように、ピックリスト（または他の入力）を含む Screen 要素を追加します。 通常、フィルターパネルの条件をグループ化するボタンやオプションを使用します。 フィールド。

   • 「Update Records」要素を追加して、Contact の

2. を更新します。 フローを有効化します。フローの API 名をメモしてください。

3. データテーブルコンポーネントを追加： Contacts を表示するよう構成された Avonni の Data Table をダイナミックコンポーネントに追加します。 ボタンを追加（行アクション）： ボタンコンポーネントを

4. 行アクションとして

   • データテーブルに追加します。このボタンがフローパネルをトリガーします。

   • 「Open Flow Panel」インタラクションを設定：

   • Flow の API 名： ボタンコンポーネント（行アクション）を選択します。

   • 「Open Flow Panel」インタラクションを追加します。

     • 名前： ContactId

     • 値： Screen Flow の API 名を入力します。 フロー入力変数：

   • @ThisItem.Id （これは選択された連絡先の ID をフローに渡します）。

5. 完了時： 成功メッセージ（Show Toast）を表示し、更新された状態を表示するためにデータテーブルをリフレッシュするアクションを追加します。

重要な考慮事項

• テスト： 保存してテストします。データテーブルの行にあるボタンをクリックすると、パネル内に Screen Flow が表示され、ユーザーはデータテーブルのコンテキスト内で連絡先のステータスを直接更新できるはずです。 Screen Flow のみ：.

• 「Open Flow Panel」インタラクションは Screen Flow のみで動作します。

• 入力／出力変数名： API 名は完全に一致している必要があります。

• パネルの可視性： パネルの可視性がどのように制御されるかを慎重に検討してください。フロー完了後にパネルを非表示にするために「完了時」アクションを使用することを検討してもよいでしょう。

まとめ

この フローパネルを開く レイアウト：