> 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/dynamic-components/component-builder/interactions/open-flow-dialog.md).

# Open Flow Dialog

The Open Flow Dialog interaction launches a Salesforce Screen Flow inside a modal dialog over the current page.

## Overview

The "Open Flow Dialog" interaction lets you launch a Salesforce *Screen Flow* in a modal dialog window directly from within an Avonni Dynamic Component. This provides a powerful way to incorporate interactive, multi-step processes into your user interface without requiring the user to navigate away from the current page.

### Use Cases

The "Open Flow Dialog" interaction embeds a Screen Flow within your Dynamic Component. This is ideal for scenarios where you need to:

* Guide users through a complex process.
* Collect information in a structured way.
* Present a series of screens based on user input.
* Perform user-interaction steps *before* continuing with the main component's logic.

(**Key Difference:** Use "Open Flow Dialog" for **Screen Flows** with UI. Use the separate "[Execute Flow](/dynamic-components/component-builder/interactions/execute-flow.md)" interaction to run **Autolaunched Flows** in the background.)

### Tutorials

See practical examples and learn how to implement specific scenarios using this interaction:

{% content-ref url="<https://github.com/avonni/xp-sfdx/tree/main/docs/tutorials/interactions/flow-integration/how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow.md>" %}
<https://github.com/avonni/xp-sfdx/tree/main/docs/tutorials/interactions/flow-integration/how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow.md>
{% endcontent-ref %}

### How it Works

1. **User Action:** The user interacts with the component (e.g., clicks a button).
2. **Dialog opens:** The "Open Flow Dialog" interaction opens a modal dialog window.
3. **Screen Flow Executes:** The specified Screen Flow runs *within* the dialog window.
4. **User Interaction with Flow:** The user interacts with the Screen Flow's screens, providing input and making choices.
5. **Data Passing (Optional):** You can pass data from the Dynamic Component to the Flow as *input variables*.
6. **Output (Optional):** The Flow can return data to the Dynamic Component as *output variables*.
7. **Dialog Closes:** The modal window closes when the Flow finishes (or the user closes the dialog).
8. **Post-Execution Actions (Optional):** You can configure actions to occur after the Flow finishes (e.g., display a toast message, refresh data).

***

## Configuration

To configure the "Open Flow Dialog" interaction:

1. **Select the Component:** Choose the Avonni component that will trigger the Flow (e.g., a Button).
2. **Add the Interaction:** In the component's properties panel, find the section for configuring "Actions" or "Interactions." Add a new action and select the "Open Flow Dialog" type.
3. **Configure the Settings:**
   * **Flow API Name:** Select the API name of the *Screen Flow* you want to launch.
   * **Flow Input Variables (Optional):**
     * **Name:** The API name of the input variable in your Screen Flow.
     * **Value:** The value you want to pass to the input variable. This can be a static value, a dynamic value from the component (e.g., a selected row's ID), or a resource.
     * **Type:** The data type of the value you are passing (Text, Number, Boolean, Date, Date/Time, or Salesforce Object). Choose Salesforce Object when passing a record. A custom type can be used for specialized cases.
     * **Object API Name:** Required only when Type is set to Salesforce Object — the API name of the object (e.g., `Account`, `Contact`) so the Flow interprets the structure correctly.
     * **Allow Multiple Values (collection):** Enable this when the Flow variable expects a collection (multiple values) rather than a single value.

{% hint style="warning" %}

#### Important

This list shows variables already defined in your Screen Flow and marked as Available for Input. You must create these input variables in your Flow before configuring the Open Flow Dialog interaction. For the Value, provide the value you want to pass to the selected input variable.
{% endhint %}

* **Output Variables (Optional):**
  * **Name:** The API name of the output variable in your Screen Flow.
  * **Resource Name:** The name of the resource (variable) in your *Dynamic Component* where you want to store the value the Flow returns.
* **Modal Header:** The text to display as the title of the dialog window. This can be static text or a dynamic value from a resource/field.
* **Accessible Description:** (Optional) Provide a description for screen readers to improve accessibility.
* **Size:** Choose the dialog window size (Small, Medium, Large, Full).
* **Display Modal Footer with a close button (Optional):** Show a modal footer with a close button so the user can dismiss the dialog.
* **Close Button Label (Optional):** Customize the footer close button label — for example Close, Cancel, or Done (available when Display Modal Footer with a close button is enabled).
* **On Finish (Optional):** Configure actions to occur when the Flow completes *successfully*. Everyday use cases include displaying a toast message or refreshing data.
* **On Close (Optional):** Configure actions to occur when the user *closes* the dialog window (regardless of whether the Flow finished).
* **On Error (Optional):** Configure actions to occur if the Flow encounters an *error*.

***

## Example

Imagine you have an Avonni Data Table displaying Accounts. You want to add a button to each row that, when clicked, opens a Screen Flow to create a new related Contact.

1. **Create the Screen Flow**
   * Create a new Screen Flow in Salesforce Setup.
   * Add an input variable named `AccountId` (Text type).
   * Add screen elements to collect Contact information (First Name, Last Name, Email, etc.).
   * Add a "Create Records" element to create a new Contact, setting the `AccountId` field to the value of the `AccountId` input variable.
   * (Optional) Add an output variable, for instance, to return the newly created Contact ID.
   * Activate the Flow. Note the Flow's API Name.
2. **Add a Data Table Component:** Add an Avonni Data Table component to your Dynamic Component, and configure it to display Accounts.
3. **Add a Button (Row Action):** Add a Button component as a row action to the Data Table.
4. **Configure the "Open Flow Dialog" Interaction**
   * Select the Button component (the row action).
   * Add an "Open Flow Dialog" interaction.
   * **Flow API Name:** Enter the API name of your Screen Flow.
   * **Flow Input Variables:**
     * **Name:** `AccountId`
     * **Value:** `Record: Account ID` (This passes the ID of the selected Account to the Flow).
   * **Modal Header:** Set to 'Create new Contact'
   * **On Finish:** Add a "Show Toast" action to confirm the Contact creation, and refresh your query table to see the new contact appear.
5. **Test:** Save and test. Clicking the button in a Data Table row should now open your Screen Flow in a dialog, pre-populated with the Account ID.

***

## Important Considerations

* **Screen Flows Only:** The "Open Flow Dialog" interaction only works with *Screen Flows*, not autolaunched Flows.
* **Input/Output Variable Names:** The API names of your input and output variables *must* match strictly between the Flow and the "Open Flow Dialog" configuration.
* **Modal Behavior:** The Flow runs within a modal dialog window. Users must complete or close the Flow before interacting with the rest of the page.


---

# 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/dynamic-components/component-builder/interactions/open-flow-dialog.md?ask=<question>&goal=<endgoal>
```

`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.