> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-flow-dialog.md).
# Open Flow Dialog
## Overview
The Open Flow Dialog interaction launches a Salesforce flow in a modal dialogue within the Salesforce Experience Cloud environment. This interaction enables users to complete a process or input data without needing to navigate away from the current page.
{% hint style="danger" %}
#### Displaying Flows in Dialog Boxes or Panels
When you want to launch a Salesforce Flow in a pop-up dialog box using the "Open Flow Dialog Interaction" feature, proper setup is essential to avoid errors. The same principles apply to the "Flow Panel Interaction," which displays the Flow in a side panel instead of a dialog. Below, we'll explain the configuration steps, why they're needed, and key tips for both.
#### Steps to Configure a Flow for Dialog or Panel Display
1. **Add the Flow to Your Experience Cloud Site**\
Place the Flow you want to use on any page in your site. It doesn't have to be a public or visible page—just ensure it's added somewhere in the site's structure. This makes the Flow accessible to the system.\
2. **Publish Your Site**\
After adding the Flow, publish the site. This step registers the Flow in Experience Cloud, allowing it to load properly when triggered in a dialog or panel.
#### Why Is This Setup Necessary?
Imagine trying to open a book that's not on your shelf—you can't read it until it's available. Similarly, Experience Cloud needs the Flow to exist within your site's framework to retrieve and display it. Without this, the dialog or panel won't find the Flow, leading to loading issues.
#### Important Notes
* **Visibility Isn't Required:** The page hosting the Flow doesn't need to be accessible or visible to users. As long as it's part of the site's structure, the system can use it behind the scenes.
* **For Flow Panel Interaction:** This works the same way as the dialog but opens the Flow in a sliding side panel for a less intrusive experience. Use it when you want users to keep the main page in view while interacting with the Flow.
* **Troubleshooting Tip:** If the Flow doesn't appear, double-check that it's published and test in a preview or live site environment.
{% endhint %}
## Tutorials
| Name | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| [**Configure the Open Flow Dialog to open a flow by clicking a button**](/experience-cloud/tutorials/interactions/configure-the-open-flow-dialog-to-open-a-flow-by-clicking-a-button.md) | Learn to trigger Salesforce flows with Avonni Button clicks, enhancing user experience in Experience Cloud. |
## Properties
| Name | Description |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Flow API Name`** | The unique identifier of the Salesforce flow to be launched. |
| **`Input Variable`** | Any variables needed to initiate the flow with specific data contexts. |
| **`Modal Header`** | The title displayed at the top of the flow dialog. |
| **`Accessible Description`** | A short description of the dialog’s contents, providing context for screen readers and enhancing accessibility. |
| **`Size`** | The pre-set sizes for the modal:
Small: Best for focused tasks with limited inputs.Medium: The default size, suitable for most flows.Large: Ideal for more complex flows that require more screen space.
|
| **`Display Footer with Close Button`** | A toggle determines whether the dialog has a footer with a button to close the modal. |
| **`On Finish Interaction`** | Defines the behavior after the flow is completed successfully. |
| **`On Close Interaction`** | Defines the behavior when the flow dialog is manually closed by the user. |
| **`On Error Interaction`** | Specifies the action to take if an error occurs within the flow. |
### Tips for Effectiveness
* Ensure the flow is intuitive and all fields are clearly labeled.
* Test the flow for functionality and user experience across different device sizes and screen resolutions.
* Be clear about the flow’s outcome in the On Finish Interaction to set proper user expectations.
* Ensure the flow have access to run properly on Experience Cloud.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/properties-panel/interactions/open-flow-dialog.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.