フローパネルを開く

概要

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

案内付きのステップごとのプロセスであり、 の一部である メインページレイアウトの一部で、別のポップアップではない。
フローがページ上の他のコンポーネントと並んで表示されること。
モーダルダイアログよりも統合された体験。

「Open Flow Dialog」との主要な違い

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

チュートリアル

実用的な例を参照し、このインタラクションを使って特定のシナリオを実装する方法を学んでください：

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

仕組み

ユーザーアクション（任意）： ユーザーは かもしれません コンポーネントと対話して（例：ボタンをクリック）パネルを起動します。ただし、パネルが読み込み時にフローを表示するように構成することもできます。 読み込み時に.
パネルが表示される： 「Open Flow Panel」インタラクションはコンポーネント内のパネル領域を表示可能にします。
画面フローが実行される： 指定した画面フローが実行されます内にパネル内で。
フローとのユーザー対話： ユーザーはパネル内で画面フローの画面と対話し、入力や選択を行います。
データ受け渡し（任意）： ダイナミックコンポーネントからフローへデータを渡すことができます（例： 入力変数として.
出力（任意）： フローはダイナミックコンポーネントにデータを返すことができます（例： 出力変数として.
パネルの開閉： フローが終了するまでパネルは開いたままになりますが、可視性を制御するアクションを設定することもできます。
実行後のアクション（任意）： フロー終了後に実行するアクション（例：トーストメッセージの表示、データの再読み込み）を構成できます。

設定

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

コンポーネントを選択： フローパネルをホストする（または表示をトリガーする）Avonniコンポーネントを選択します。
インタラクションを追加： コンポーネントのプロパティパネルで「Actions」または「Interactions」を探します。新しいアクションを追加し、「Open Flow Panel」を選択します。
設定を構成：
- フローのAPI名： 埋め込みたい 画面フロー（Screen Flow）の API名を選択します。
- フローの入力変数（任意）：
  - 名前： 画面フロー内の入力変数のAPI名。このリストは、既に画面フロー内で定義され「Available for Input」にマークされた変数を表示します。これらの入力変数は、このインタラクションを設定する前にフロー内で作成しておく必要があります。
  - 値：選択した入力変数に渡す値。静的でも、コンポーネントからの動的値でも、リソースでもかまいません。
- 出力変数（任意）：
  - 名前： 画面フロー内の出力変数のAPI名。
  - リソース名： 返された値を格納するための、あなたの ダイナミックコンポーネント内の リソース（変数）の名前。
- パネルヘッダー（任意）： フローパネルのヘッダーを設定します。
- アクセシブルな説明（任意）： スクリーンリーダー用の説明を提供します。
- 完了時（任意）： フローが正常に完了したときに実行するアクションを構成します（例：トースト表示、データの再読み込み、 パネルを非表示にする).
- 閉じるとき（任意）： ユーザーがパネルを閉じた場合に実行するアクションを構成します（これはパネルとフローの構成方法によっては可能でない場合があります）。
- エラー発生時（任意）： フローがエラーに遭遇した場合に実行するアクションを構成します。

使用例

連絡先情報をインラインで更新する

連絡先を表示するデータテーブルがあるとします。ユーザーが別の編集ページに移動せずに、テーブルから直接連絡先の ステータスを 更新できるようにしたい場合。

画面フローを作成：
- 新しい画面フローを作成します。
- 次の名前の入力変数を追加します： ContactId （テキスト型）。
- 「Get Records」要素を追加して、Contactレコードを取得します（基準として ContactId.
- ユーザーが新しい ステータスを.
- 「Update Records」要素を追加してContactの ステータスを フィールドを更新します。
- フローを有効化します。フローのAPI名を記録してください。
データテーブルコンポーネントを追加： Contactsを表示するように構成したAvonniのデータテーブルをダイナミックコンポーネントに追加します。
ボタンを追加（行アクション）： ボタンコンポーネントを 行アクションとして データテーブルに追加します。このボタンがフローパネルを起動します。
「Open Flow Panel」インタラクションを設定：
- ボタンコンポーネント（行アクション）を選択します。
- 「Open Flow Panel」インタラクションを追加します。
- フローのAPI名： 画面フローのAPI名を入力します。
- フローの入力変数：
  - 名前： ContactId
  - 値： @ThisItem.Id （選択された連絡先のIDをフローに渡します）。
- 完了時： 成功メッセージ（Show Toast）を表示し、更新されたステータスを反映させるためにデータテーブルを再読み込みするアクションを追加します。
テスト： 保存してテストします。データテーブルの行にあるボタンをクリックすると、画面フローがパネルに表示され、ユーザーはデータテーブルのコンテキスト内で直接連絡先のステータスを更新できるようになります。

重要な注意点

画面フローのみ： 「Open Flow Panel」インタラクションは次にのみ対応します： 画面フロー（Screen Flows）.
入力/出力変数名： API名は完全に一致している必要があります。
パネルの可視性： パネルの可視性がどのように制御されるかを慎重に検討してください。フロー完了後にパネルを非表示にする場合は「On Finish」アクションを使用することを検討してください。
レイアウト： ダイナミックコンポーネントのレイアウトと、パネルがその中でどのように収まるかを検討してください。

まとめると

この Open Flow Panel は、画面フローをダイナミックコンポーネント内にシームレスに埋め込み、ユーザーの操作性を向上させワークフローを効率化する貴重なインタラクションです。入力および出力変数を活用することで、コンポーネントと埋め込まれたフロー間で動的なデータ交換を実現できます。

最終更新 24 日前

役に立ちましたか？