# How to setup an Open Flow Panel interaction {% embed url="" %} *** ## 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."