> 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-panel.md).

# Open Flow Panel

Launch a Salesforce flow in a sliding side panel so users can complete a process or enter data while keeping the main page in view.

## Overview

The Open Flow Panel interaction launches a Salesforce flow inside a sliding side panel attached to a component. It lets users complete a process or input data while keeping the main page in view, optionally passing input variables to the flow and reacting when the flow finishes, closes, or fails.

## Configuration

{% hint style="danger" %}

#### Displaying Flows in Panels

Just like the Open Flow Dialog interaction, the flow you want to display must be added to a page of your Experience Cloud site and the site must be published before the panel can load it. See the setup steps and troubleshooting tips on the [Open Flow Dialog](/experience-cloud/properties-panel/interactions/open-flow-dialog.md) page — the same configuration applies to the Flow Panel interaction.
{% endhint %}

| Name                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **`Flow API Name`**         | The API name of the Salesforce flow that runs inside the panel.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **`Input Variables`**       | <p>Optional variables passed into the flow before it starts, providing initial values or context the flow requires. Each variable defines:</p><ul><li><strong>Name</strong>: The API name of the flow input variable to set.</li><li><strong>Value</strong>: The value to assign — static text or a dynamic expression.</li><li><strong>Type</strong>: The data type of the value (<code>String</code>, <code>Number</code>, <code>Boolean</code>, <code>Date</code>, <code>DateTime</code> or <code>SObject</code>). You can also enter a custom value when you need a non-standard or specialized type.</li><li><strong>Object Type</strong>: When the type is <code>SObject</code>, the object API name (for example <code>Account</code> or <code>Contact</code>) so the flow can interpret the object structure correctly.</li><li><strong>Is Collection</strong>: Enable when the flow variable expects a collection of values rather than a single value.</li></ul> |
| **`Panel Header`**          | Optional header text displayed at the top of the panel. If the interaction is triggered by a record-related item, you can reference a field of this record using the `{{Record.FieldName}}` syntax (e.g. `{{Record.Name}}`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| **`Position`**              | Controls whether the panel slides in from the `Left` or the `Right` side.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **`Outer`**                 | A toggle that displays the panel outside the component instead of within its bounds.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **`Superposed`**            | A toggle that displays the panel over the component content, overlay style.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| **`Show Overlay`**          | When the panel is superposed, shows a dimmed backdrop behind it.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **`Size`**                  | The width of the panel: `Small`, `Medium`, `Large`, `X-Large` or `Full`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **`Hide Close Icon`**       | A toggle that removes the close icon so users cannot close the panel via the header icon.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **`On Finish Interaction`** | Defines the behavior after the flow is completed successfully. Accepted interactions are Show Toast, Refresh All Queries, Refresh Query, Open Flow Dialog and Open Flow Panel.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **`On Close Interaction`**  | Defines the behavior when the flow panel is manually closed by the user. Accepted interactions are Show Toast, Refresh All Queries, Refresh Query, Open Flow Dialog and Open Flow Panel.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **`On Error Interaction`**  | Specifies the action to take if an error occurs within the flow. Accepted interactions are Show Toast, Refresh All Queries, Refresh Query, Open Flow Dialog and Open Flow Panel.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |

## Important Considerations

* Use the panel over a dialog when users need to keep the main page content in view while completing the flow.
* Reserve the `Superposed` and `Show Overlay` options for flows that should temporarily take focus away from the component content.
* Be clear about the flow’s outcome in the On Finish Interaction to set proper user expectations.
* Ensure the flow has 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-panel.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.
