# フローダイアログを開く

## 概要

Open Flow Dialog インタラクションは、Salesforce Experience Cloud 環境内のモーダルダイアログで Salesforce フローを起動します。このインタラクションにより、ユーザーは現在のページを離れることなくプロセスを完了したりデータを入力したりできます。

{% hint style="danger" %}

#### ダイアログボックスまたはパネルにフローを表示する

「Open Flow Dialog Interaction」機能を使ってポップアップダイアログで Salesforce フローを起動する場合、エラーを避けるために適切な設定が不可欠です。同じ原則は、フローをダイアログではなくサイドパネルに表示する「Flow Panel Interaction」にも当てはまります。以下では、設定手順、なぜそれが必要か、および両者に関する主要なヒントを説明します。

#### ダイアログまたはパネル表示のためのフロー設定手順

1. **フローを Experience Cloud サイトに追加する**\
   使用したいフローをサイトの任意のページに配置します。それが公開ページやユーザーに見えるページである必要はありません—サイトの構造内のどこかに追加されていれば十分です。これによりシステムがフローにアクセスできるようになります。\
   ![](https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZpbqSjaaLc7Atba96UyJ%2F2024-10-30_16-42-48.png?alt=media\&token=b9800702-25c7-424d-b85a-d49a030ca791)
2. **サイトを公開する**\
   フローを追加したらサイトを公開します。この手順によりフローが Experience Cloud に登録され、ダイアログやパネルでトリガーされたときに正しく読み込まれるようになります。

#### なぜこの設定が必要なのか？

棚にない本を開こうとしても読めないのと同じように、Experience Cloud はフローを取得して表示するためにサイトのフレームワーク内にフローが存在している必要があります。これがないとダイアログやパネルはフローを見つけられず、読み込みの問題が発生します。

#### 重要な注意点

* **表示可能である必要はない：** フローをホストするページはユーザーにアクセス可能または表示される必要はありません。サイトの構造の一部でさえあれば、システムはバックグラウンドでそれを使用できます。
* **Flow Panel Interaction の場合：** これはダイアログと同じように機能しますが、フローをスライドするサイドパネルで開くため、より目立ちにくい体験になります。ユーザーがメインページを見たままフローとやり取りしてほしいときに使用してください。
* **トラブルシューティングのヒント：** フローが表示されない場合は、フローが公開されていることを再確認し、プレビューまたはライブサイト環境でテストしてください。
  {% endhint %}

## チュートリアル

| 名前                                                                                                                                                                                                   | 説明                                                                                  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| [**ボタンをクリックしてフローを開くよう Open Flow Dialog を設定する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/cao-zuo/botanwokurikkushitefurwokuyouni-open-flow-dialog-woshimasu) | Avonni Button のクリックで Salesforce フローをトリガーする方法を学び、Experience Cloud におけるユーザー体験を向上させます。 |

## プロパティ

| 名前                    | 説明                                                                                                                                                                                 |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Flow API 名`**      | 起動する Salesforce フローの一意の識別子。                                                                                                                                                        |
| **`入力変数`**            | 特定のデータコンテキストでフローを開始するために必要な任意の変数。                                                                                                                                                  |
| **`モーダルヘッダー`**        | フローダイアログの上部に表示されるタイトル。                                                                                                                                                             |
| **`アクセシブルな説明`**       | ダイアログの内容を簡潔に説明する短い説明で、スクリーンリーダー向けの文脈を提供しアクセシビリティを向上させます。                                                                                                                           |
| **`サイズ`**             | <p>モーダルの事前設定されたサイズ：</p><ul><li><code>小</code>：入力が限られた集中タスクに最適です。</li><li><code>中</code>：デフォルトサイズで、ほとんどのフローに適しています。</li><li><code>大</code>：より多くの画面スペースを必要とする複雑なフローに理想的です。</li></ul> |
| **`閉じるボタン付きフッターを表示`** | ダイアログにモーダルを閉じるボタンを含むフッターがあるかどうかを切り替えるトグルです。                                                                                                                                        |
| **`完了時のインタラクション`**    | フローが正常に完了した後の動作を定義します。                                                                                                                                                             |
| **`閉じたときのインタラクション`**  | ユーザーがフローダイアログを手動で閉じたときの動作を定義します。                                                                                                                                                   |
| **`エラー時のインタラクション`**   | フロー内でエラーが発生した場合に実行するアクションを指定します。                                                                                                                                                   |

### 効果的にするためのヒント

* フローが直感的で、すべてのフィールドに明確なラベルが付いていることを確認してください。
* さまざまなデバイスサイズや画面解像度でフローの機能性とユーザー体験をテストしてください。
* 完了時のインタラクションでフローの結果を明確にして、ユーザーの期待を適切に設定してください。
* フローが Experience Cloud 上で正しく実行できるようにアクセス権があることを確認してください。