# Open Flow Panel

## Overview

The Open Flow Panel interaction launches a Screen Flow in a side panel that slides into your Dynamic Component. Unlike the Open Flow Dialog (which overlays the page as a modal), the panel stays alongside the component content, allowing users to reference existing data while interacting with the flow.

{% hint style="success" %}

#### Key Difference from "Open Flow Dialog"

The "Open Flow Panel" displays the Screen Flow *as a panel within the component's layout*. The "Open Flow Dialog" displays the Screen Flow in a modal dialog window overlaying the page. Both are for Screen Flows (Flows with UI), not auto-launched Flows.
{% endhint %}

### Tutorials

{% content-ref url="../../../tutorials/interactions/flow-integration/how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow" %}
[how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow](https://docs.avonnicomponents.com/dynamic-components/tutorials/interactions/flow-integration/how-to-pass-multiple-selected-records-from-a-dynamic-component-to-a-screen-flow)
{% endcontent-ref %}

### How It Works

1. **User triggers the interaction** — clicks a button, row action, or header action.
2. **The panel slides in** from the left or right side of the component.
3. **The Screen Flow renders** inside the panel. The user works through the flow screens.
4. **Data passes back and forth** — input variables send context to the flow; output variables capture results when the flow finishes.
5. **The panel closes** — either when the flow finishes, the user clicks the close icon, or a chained action hides it.
6. **Follow-up actions run** — On Finish, On Close, or On Error interactions trigger (refresh data, show toast, etc.).

***

## Configuration Reference

### Flow Selection

| Setting           | Description                                                                                                                 | Example / Options                                 |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| **Flow API Name** | The Screen Flow to run inside the panel. Only Screen Flows appear in the list — auto-launched flows are not supported here. | `Update_Contact_Status`, `Quick_Edit_Opportunity` |

### Input Variables

Pass data from your Dynamic Component into the flow. Click **Add Item** to create each mapping.

| Setting                                | Description                                                                                                           | Example                                                           |
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Name**                               | The API name of an input variable defined in your Screen Flow (must be marked "Available for Input" in Flow Builder). | `ContactId`, `AccountName`                                        |
| **Value**                              | The value to send. Use the **resource selector** to map a dynamic value, or type a static value.                      | `@ThisItem.Id`, `Record: Account ID`, `{!MyVariable}`             |
| **Type**                               | The data type of the variable.                                                                                        | Text, Number, Boolean, Date, Date/Time, Salesforce Object, Custom |
| **Object API Name**                    | Required only when Type is set to **Salesforce Object**. The API name of the SObject.                                 | `Contact`, `Opportunity`                                          |
| **Allow Multiple Values (collection)** | Enable this when passing a list of values (e.g., multiple selected record IDs from a Data Table).                     | Toggle on/off                                                     |

### Output Variables

Capture data returned by the flow after it finishes. Click **Add Item** to create each mapping.

| Setting             | Description                                                                                                                                            | Example                               |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- |
| **API Name**        | The API name of an output variable defined in your Screen Flow (must be marked "Available for Output" in Flow Builder).                                | `newContactId`, `updatedStatus`       |
| **Variable Number** | Which slot to store the result in. Values are available as `flowInteractionOutputVariables.variable1` through `variable10` in subsequent interactions. | Variable 1, Variable 2, … Variable 10 |

### Panel Layout

These settings control how the panel appears and behaves within (or outside of) your component. This is what differentiates the panel from the dialog.

| Setting             | Description                                                                                                                                                                           | Options / Default                                                 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
| **Header**          | Title text displayed at the top of the panel. Supports expressions and data binding — you can map it to a resource or component attribute.                                            | `"Edit Contact"`, `{!SelectedContactName}`                        |
| **Position**        | Which side the panel slides in from.                                                                                                                                                  | **Left**, **Right** (default: Right)                              |
| **Size**            | Width of the panel.                                                                                                                                                                   | **Small**, **Medium** (default), **Large**, **X-Large**, **Full** |
| **Outer**           | When enabled, the panel extends **outside the component boundary**. Use this when your component is placed in a narrow column on the Lightning Page and the panel needs more room.    | Toggle on/off (default: off)                                      |
| **Superposed**      | When enabled, the panel **floats over** the component content instead of pushing it aside. The component content remains visible behind the panel.                                    | Toggle on/off (default: off)                                      |
| **Shadow Backdrop** | Only available when **Superposed** is enabled. Adds a grayed-out overlay behind the panel, drawing the user's attention to the flow.                                                  | Toggle on/off (default: off)                                      |
| **Hide Close Icon** | Removes the X close button from the panel header. Use this when you want users to complete the flow before they can exit — the only way to close the panel is for the flow to finish. | Toggle on/off (default: off)                                      |

{% hint style="warning" %} When **Outer** is enabled, the panel renders outside the component's own container. This means it may overlap other components on the Lightning Page. Test the layout on your target page to verify the positioning works as expected. {% endhint %}

### Interactions

| Event         | Fires When                                                                                                                                                     | Common Actions                                        |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| **On Finish** | The flow reaches its end (status `FINISHED` or `FINISHED_SCREEN`). Output variables are captured before this fires.                                            | Show Toast, Refresh All Queries, Navigate, Assignment |
| **On Error**  | The flow encounters an error (status `ERROR`). If no custom toast is configured in the On Error chain, a default error toast is shown automatically.           | Show Toast (custom error message), Navigate           |
| **On Close**  | The user clicks the **close icon** to dismiss the panel without the flow finishing. This does **not** fire when the flow finishes normally — that's On Finish. | Refresh All Queries, Assignment (reset a variable)    |

***

## Quick Start

### Updating Contact Status from a Data Table Row Action

{% stepper %}
{% step %}

#### Create the Screen Flow

Build a Screen Flow named `Update_Contact_Status`:

* Add an input variable `ContactId` (Text, Available for Input).
* Add a **Get Records** element to retrieve the Contact by `ContactId`.
* Add a Screen with a picklist that lets the user for the user to select a new Status value.
* Add an **Update Records** element to save the new Status.
* Activate the flow. {% endstep %}
  {% endstep %}

{% step %}

#### Set Up the Data Table

In your Dynamic Component, add a Data Table displaying Contact records. Add a **row action** button labeled "Update Status."
{% endstep %}

{% step %}

#### Configure the Interaction

Select the row action button and add an interaction:

* **Action Type**: Open Flow Panel
* **Flow API Name**: `Update_Contact_Status`
* **Input Variables**:
  * Name: `ContactId`
  * Value: `@ThisItem.Id`
* **Position**: Right
* **Size**: Medium
* **Header**: `"Update Status"`
* **On Finish**: Add **Refresh All Queries** + **Show Toast** ("Status updated.")

> **Why**: Mapping `@ThisItem.Id` passes the Contact ID of the specific row the user clicked, so the flow loads the correct record. 
> {% endstep %}

{% step %}

#### Save and Test

Save and activate your Dynamic Component. On the Lightning Page, click the "Update Status" row action — the panel slides in from the right with the flow pre-loaded for that Contact. After submitting, the Data Table refreshes automatically. 
{% endstep %}
{% endstepper %}

***

## Troubleshooting

* **Flow doesn't launch.** Verify the **Flow API Name** matches an active Screen Flow. Check that the user has permission to run the flow.
* **No data passed to the flow.** Confirm the input variable name matches exactly (case-sensitive) what's defined in Flow Builder and that the variable is marked "Available for Input."
* **Panel overlaps other components.** This happens when **Outer** is enabled. Either disable **Outer** or adjust the component's column width on the Lightning Page.
* **Panel doesn't close after flow finishes.** The panel closes automatically when the flow reaches a `FINISHED` status. If the flow ends on a screen without a Finish element, it stays open. Add a proper end to your flow in Flow Builder.
* **Output variables are empty.** Verify the output variable is marked "Available for Output" in Flow Builder and that the **API Name** in the configuration matches exactly