How to setup an Open Flow Panel interaction

---

Overview

The Open Flow Panel slides a side panel into the component, displaying another screen flow. Unlike Open Flow Dialog (which opens a modal overlay over the entire page), the panel stays anchored to the component, making it a good fit for detail views, edit forms, or contextual information that the user might want to see alongside the main content.

When to Use a Panel vs. a Dialog

	Open Flow Panel	Open Flow Dialog
Position	Slides in from the left or right of the component	Overlays the center of the page
User can interact with the main component	Yes, if the panel is not superposed with a backdrop	No — the dialog blocks interaction until closed
Best for	Detail views, inline editing, contextual info	Forms that need the user's full attention, multi-step wizards
Size options	Small, Medium, Large, X Large, Full	Small, Medium, Large, Full

Step 1 — Create the Target Flow

Before setting up the panel, build the screen flow that will appear inside it.

1. In Flow Builder, create or open a screen flow.
2. Create any input variables the flow needs (e.g., a record ID or a text value). Mark them as Available for Input.
3. If the flow produces values you need back, create output variables and mark them as Available for Output.
4. Save and activate the flow.

Step 2 — Add an Interaction With Open Flow Panel

1. On your component, open the Interactions tab in the Component Builder.
2. Pick the interaction event that should trigger the panel (e.g., Event Select on a Calendar, Row Action Click on a Data Table).
3. If the event requires a Target Name (like Event Action Click or Row Action Click), enter the name of the action button that should open the panel.
4. Select Open Flow Panel as the action type.
5. In the Flow API Name dropdown, search for and select your target flow.

Step 3 — Configure Input Variables

Pass data from the current component context into the panel flow. Click Add Item under Input Variables.

Field	What to enter
Name	Must match the input variable name in the target flow exactly.
Value	Pick a context variable from the interaction event (e.g., Start Date Time, item variables), a flow variable, or enter a custom value.
Type	Text, Number, Boolean, Date, Date/Time, Salesforce Object, or Custom.
Object API Name	Only when Type is Salesforce Object. Enter the object API name.
Allow Multiple Values	Enable for collection variables.

Example: On a Data Table's Row Action Click, you open a panel showing a Contact's details. Add an input variable named recordId, set Value to the row's Id item variable, and Type to Text. The panel flow receives the Contact ID and can use a Get Records element to load the full record.

Step 4 — Configure Panel Appearance

Setting	What it does	Default
Header	Text at the top of the panel. Supports item variables for dynamic titles.	(empty)
Position	Which side the panel slides in from.	Right
Size	Width of the panel.	Medium

Tip: Small works well for quick detail views. Large or X Large are better for forms with multiple fields. Full takes over the entire component width — use it sparingly.

Panel Layout Options

These three toggles control how the panel relates to the component content:

Setting	What it does
Outer	The panel appears outside the component boundaries, extending beyond its edges. When off (default), the panel appears inside the component, reducing the visible content area.
Superposed	The panel overlays the component content instead of pushing it aside. The content stays in place but is hidden behind the panel.
Shadow Backdrop	Only available when Superposed is on. Adds a grayed-out backdrop behind the panel, visually dimming the content underneath. Helps the user focus on the panel.

Common combinations:

Use case	Outer	Superposed	Shadow Backdrop
Inline detail view — content shifts to make room	Off	Off	—
Quick overlay — content stays, panel slides over it	Off	On	Off
Focused edit form — content dimmed, panel has full attention	Off	On	On
Panel outside the component — doesn't affect layout	On	Off	—

Hide Close Icon

Enable Hide Close Icon to remove the X button from the panel header. This forces the user to complete the flow (or use a close button you build into the flow) before the panel closes. Use this for required workflows where you don't want the user to dismiss the panel prematurely.

Step 5 — Configure Output Variables

If your panel flow returns data (e.g., a status, a new record ID), map its output variables back to the component.

1. Under Output Variables, click Add Item.
2. Select the flow's output variable from the API Name dropdown.
3. Choose a Variable Number (1–10) to store the value in.

The component's flowInteractionOutputVariables output variables get updated when the panel flow finishes.

Step 6 — Set Up Completion Actions

Use the three hooks to control what happens when the panel closes:

Hook	Fires when...	Common use
On Finish	The panel flow completes	Refresh All Queries to reload data, Show Toast to confirm
On Close	The user closes the panel (X icon or backdrop click)	Show a warning toast, or do nothing
On Error	The panel flow throws an error	Show an error toast

Example: On Finish: add Refresh All Queries so the Data Table or Calendar refreshes with any changes the user made in the panel. Then add a Show Toast (Variant: Success) saying "Record updated." On Error: add a Show Toast (Variant: Error) saying "Could not save changes."