# Flow Builder Integration

## Overview

Avonni Dynamic Components offer four distinct ways to connect to Salesforce Flow Builder. You can run auto-launched flows in the background, open screen flows in a modal or side panel, or embed a screen flow directly into your component layout.

Each method serves a different purpose. This page helps you understand which one to use and when.

### When to Use Each Method

| Method                                                                                                                  | Flow Type                | What the User Sees                                | Best For                                                                                                      |
| ----------------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| [**Execute Flow**](/dynamic-components/component-builder/interactions/flow-builder-integration/execute-flow.md)         | Auto-launched flows only | Nothing — runs in the background                  | Fetching data on load, bulk record updates, running calculations, any automation that doesn't need user input |
| [**Open Flow Dialog**](/dynamic-components/component-builder/interactions/flow-builder-integration/open-flow-dialog.md) | Screen flows             | A modal popup over the page                       | Guided processes triggered by a button click (create a record, fill a form, run a wizard)                     |
| [**Open Flow Panel**](/dynamic-components/component-builder/interactions/flow-builder-integration/open-flow-panel.md)   | Screen flows             | A side panel (left or right)                      | Inline editing, contextual forms that stay visible alongside the component                                    |
| [**Flow Component**](/dynamic-components/components/flow.md)                                                            | Screen flows             | The flow renders directly in the component layout | Embedding a persistent flow as part of the page (questionnaires, checklists, kiosk-style data entry)          |

### How They Compare

#### Data Flow

All four methods support passing **input variables** from your Dynamic Component into the flow and capturing **output variables** back when the flow finishes.

**Input variable types supported:** Text, Number, Boolean, Date, Date/Time, Salesforce Object (SObject), and Custom. All support collections.

**Output variable differences**

<table><thead><tr><th width="210.1640625">Method</th><th>Output Variable System</th></tr></thead><tbody><tr><td><strong>Execute Flow</strong></td><td>Up to 10 numbered slots (<code>variable1</code> through <code>variable10</code>) stored in <code>flowInteractionOutputVariables</code></td></tr><tr><td><strong>Open Flow Dialog</strong></td><td>Up to 10 numbered slots (same system)</td></tr><tr><td><strong>Open Flow Panel</strong></td><td>Up to 10 numbered slots (same system)</td></tr><tr><td><strong>Flow Component</strong></td><td>Maps each output variable directly to a Dynamic Component <strong>resource</strong> (Variable) — more flexible, no slot limit</td></tr></tbody></table>

#### Interaction Chaining

After a flow finishes, you can trigger follow-up actions. The available event hooks differ by method:

| Method               | On Finish | On Error | On Close                  | On Started | On Paused |
| -------------------- | --------- | -------- | ------------------------- | ---------- | --------- |
| **Execute Flow**     | ✅         | ✅        | —                         | —          | —         |
| **Open Flow Dialog** | ✅         | ✅        | ✅ (user closed the modal) | —          | —         |
| **Open Flow Panel**  | ✅         | ✅        | ✅ (user closed the panel) | —          | —         |
| **Flow Component**   | ✅         | ✅        | —                         | ✅          | ✅         |

Common chained actions include: **Show Toast**, **Refresh All Queries**, **Navigate**, **Assignment**, or even launching another flow.

#### Execution

| Method               | Where It Runs                                           | How It's Triggered                                                               |
| -------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------- |
| **Execute Flow**     | Server-side via Apex                                    | Any interaction trigger (button click, on load, row action, etc.)                |
| **Open Flow Dialog** | Client-side (`lightning-flow` inside a Lightning Modal) | Any interaction trigger                                                          |
| **Open Flow Panel**  | Client-side (`lightning-flow` inside a side panel)      | Any interaction trigger                                                          |
| **Flow Component**   | Client-side (`lightning-flow` embedded in the layout)   | Runs automatically when the component renders (if visibility conditions are met) |

### Common Patterns

#### Fetch Data on Page Load

Use [**Execute Flow**](/dynamic-components/component-builder/interactions/flow-builder-integration/execute-flow.md) with an [**On Load**](/dynamic-components/component-builder/on-load-interaction.md) interaction to run an auto-launched flow when the component first renders. The flow can query records, perform calculations, or call external services — then return results to output variables that feed into your component's display.

> **Example:** On Load → Execute Flow `Calculate_Account_Health_Score` with `accountId` = `{!$Component.RecordId}` → Store the score in `variable1` → Display it in a Metric component.

#### Button Click Opens a Creation Form

Use [**Open Flow Dialog**](/dynamic-components/component-builder/interactions/flow-builder-integration/open-flow-dialog.md) on a button's On Click interaction. Pass context (like a parent record ID) as an input variable. On Finish, refresh the data and show a success toast.

> **Example:** Data Table header button "New Contact" → Open Flow Dialog `Create_Contact_Flow` with `AccountId` = `Record: Account ID` → On Finish: Refresh All Queries + Show Toast "Contact created."

#### Inline Editing in a Side Panel

Use [**Open Flow Panel**](/dynamic-components/component-builder/interactions/flow-builder-integration/open-flow-panel.md) on a row action button. The panel slides in from the right, showing a screen flow pre-filled with the selected record's data. The user edits without leaving the page.

> **Example:** Data Table row action "Edit" → Open Flow Panel `Edit_Contact_Status` with `ContactId` = `@ThisItem.Id` → Position: Right, Size: Medium → On Finish: Refresh All Queries.

#### Persistent Embedded Flow

Use the [**Flow component**](/dynamic-components/components/flow.md) to place a screen flow directly in the component layout. It renders inline — no button click needed. Combine it with other components (a Kanban on the left, the flow on the right) for split-screen workflows.

> **Example:** A Dynamic Component on the Case record page has a Flow Element running `Quick_Update_Task_Flow` with `inputCaseId` = `{!$Component.RecordId}`. Finish Behavior is set to **Restart** so the user can submit multiple tasks in a row.

### Choosing the Right Method

Use this decision tree:

1. **Does the flow need user input (screens)?**
   * **No** → Use **Execute Flow** (auto-launched, server-side, no UI)
   * **Yes** → Continue to step 2
2. **Should the flow be visible at all times, as part of the page layout?**
   * **Yes** → Use the **Flow** component (inline embed)
   * **No** → Continue to step 3
3. **Should the flow appear alongside the component content, or overlay it?**
   * **Alongside (side panel)** → Use **Open Flow Panel**
   * **Overlay (modal popup)** → Use **Open Flow Dialog**

{% hint style="info" %}

#### Info

You can combine multiple methods in the same Dynamic Component. For example: an **On Load** interaction runs **Execute Flow** to fetch data, a button opens an **Open Flow Dialog** for record creation, and a **Flow Component** provides a persistent inline form — all in the same component
{% endhint %}


---

# Agent Instructions: 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:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/flow-builder-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.