YouTube ChannelBook A DemoContact SupportInstall the Components for Flow Builder

Open Flow Panel

Overview

The Avonni Open Flow Panel component allows you to embed another Flow within a side panel inside any supported Avonni Component. This enhances user experience by providing a seamless, dynamic interface for additional actions or information without leaving the main screen.

Key features include:

  • Dynamic Data Refresh: Keeps the main screen in sync with panel actions for real-time updates.

  • Flexible Layouts: Overcomes nesting limits with section management and optimized space usage.

  • Customization: Adjustable panel position, size, and styling for tailored UIs.

  • Interaction Options: Trigger actions on finish, close, or errors, with input/output variable support.

  • Integration: Works with various Avonni Components for sophisticated workflows.

  • Output Capture: Supports capturing variables from the embedded Flow (requires Avonni Components package v6+).

Audience: Flow builders, business analysts, or admins creating interactive, multi-step processes in Screen Flows.

Tip: Use to embed record creation forms or approval steps; leverage output variables for dynamic data flow.

Use Cases

  • Record Creation/Editing: Display detailed input forms for main record updates.

  • Approval Processes: Show review details in a side panel for approvals.

  • Related Data Display: Present associated records or context alongside the primary Flow.

  • Guided Workflows: Guide users through sub-processes without navigation.

  • Data Updates: Refresh queries post-panel to reflect changes (e.g., new records)

Configuration

Add the Open Flow Panel to a Screen element in a Salesforce Flow and configure via the Properties Panel within an Avonni Component’s Interactions section.

Accessing the interaction

You can access the Open Flow Panel feature within the interaction panel of any supported Avonni Component. Choose "Open Flow Panel" as the interaction type you want to create, and then customize the settings as needed.

Basic Properties

These control the panel’s Flow integration and behavior

Property
Type
Description
Example

API Name

Text

Unique identifier for the instance (select the Flow to open as a panel).

ReviewFlow

Input Variables

Settings

Variables passed from the main Flow to initialize the embedded Flow.

{!recordId}

Output Variables

Settings (Optional)

Variables updated from the embedded Flow on completion (requires v6+).

{!outputVar}

Header

Text

Title displayed at the top of the panel.

"Review Details"

Position

Select

Panel slide direction: left or right.

right

Outer

Boolean

Displays panel outside the component (if On).

Off

Superposed

Boolean

Displays panel over the component (if On).

On

Shadow Backdrop

Boolean

Adds a shadow backdrop over the component (if On).

On

Size

Select

Panel size: small, medium, large, x-large, full.

medium

Hide Close Icon

Boolean

Removes the default close icon (if On, control via interactions).

Off

Best Practice: Bind Input Variables to Flow data (e.g., {!Record.Id}); use Output Variables to capture results dynamically.

Interaction Properties

Define actions triggered by panel events.

Property
Type
Description
Example Use Case

On Finish

Settings

Triggers when the embedded Flow completes successfully. Use output variables for data.

Refresh Query to update main screen with new data.

On Close

Settings

Triggers when the panel is manually closed by the user.

Navigate to a new screen or show a Toast message.

On Error

Settings

Triggers if the embedded Flow encounters an error.

Display an error Toast or redirect to a support screen.

Tip: Use On Finish with Refresh Query to sync data; test On Error handling in Flow Debug.

Capture Output Variables

The "Open Flow Panel" interaction now allows you to capture output variables from the flow you launch. This means you can pass information from the launched flow back to your original screen flow, making your flows more dynamic and efficient.

Step-by-step guide

  1. Launch a Flow Within a Flow: Use the "Open Flow Panel" to embed another flow within your current screen flow. This is the flow from which you'll get data.

  2. Prepare the Launched Flow

    • In the launched flow, create a variable to hold the information you want to pass back.

    • Important: Make sure this variable is marked as "Available for Output" by checking the corresponding checkbox.

  3. Configure the "Open Flow Dialog"

    • Find your original screen flow's "Open Flow Panel" interaction element.

    • In the interaction's properties, locate the "Output Variables" attribute.

    • Add a new output variable and enter its API Name. This name must exactly match the API name of the variable you created in the launched flow.

    • Select a variable number from the list. This number helps you identify the variable later.

  4. Use the Captured Variable

    • In your original flow, you can now access the captured variable. Look for it under the flowInteractionOutputVariables attribute of the "Open Flow Panel" component and select the chosen variable number above.

    • Use this variable in subsequent elements and logic within your flow, just like any other variable.

Styling

When you set a component to open a flow panel, you'll get extra styling options to customize the panel's appearance. These options let you change:

Flow Panel

Control the overall appearance of the panel itself, like its background color, border, and size.

Flow Panel Header

Adjust the look of the panel's header, including its text, background, and more.

Tutorials

Cover

How to setup an Open Flow Panel Interaction

This tutorial explains the basics of configuring the Open Flow Panel interaction.

Examples

Example 1: Record Editing Panel

This example embeds a Flow to edit a record in a side panel, refreshing the main screen on completion.

  1. Configure Open Flow Panel:

    • API Name: EditRecordFlow (select an existing Flow for editing).

    • Input Variables: {!recordId} (pass the current record ID).

    • Header: "Edit Record"

    • Position: right

    • Superposed: On

    • Size: large

  2. Set Interactions:

    • On Finish: Add a Refresh Query action to update the main Flow’s data source.

    • On Close: Add a Show Toast action with message "Edit canceled."

    • On Error: Add a Navigate action to a support screen.

Result: A right-side panel opens for editing, refreshes the main screen on save, and handles close/error events.

Key Considerations

  • Flow Selection: Ensure the API Name matches a valid Flow; test for compatibility.

  • Input/Output Variables: Map relevant data to Inputs; use Outputs for post-panel logic.

  • Panel Display: Use Superposed/Shadow Backdrop for overlay effects; adjust Size for content fit.

  • Performance: Limit Input data size; use On Finish Refresh Query for real-time updates.

  • Error Handling: Define On Error to manage Flow failures gracefully.

  • Accessibility: Ensure Header is descriptive; test keyboard navigation for panel controls.

Troubleshooting Common Issues

  • Panel Not Opening: Verify API Name and Flow access; check Input Variables.

  • No Output Data: Ensure Output Variables are defined in the embedded Flow (v6+); match API Names.

  • Interactions Fail: Confirm action bindings (e.g., {!outputVar}); test in Debug mode.

  • UI Overlap: Toggle Outer/Superposed; adjust Size for screen fit.

  • Close Icon Missing: Check Hide Close Icon; use On Close to manage programmatically.

  • Slow Response: Optimize embedded Flow; limit record queries.

Summary

The Avonni Open Flow Panel component enhances Screen Flows with embedded, interactive panels for record editing, approvals, or data display. With customizable styling and robust interactions, it’s perfect for complex workflows

Last updated

Was this helpful?