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.

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.

Tutorials

How to Pass Multiple Selected Records from a Dynamic Component to a Screen Flow

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

1

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 %}

2

Set Up the Data Table

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

3

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.

4

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.

---

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