# 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." --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/flow/tutorials/interactions/how-to-setup-an-open-flow-panel-interaction.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.