Open Flow Panel
The "Open Flow Panel" interaction allows you to embed a Salesforce Screen Flow directly within your Avonni Dynamic Component, displayed as a panel within the component's area, rather than in a separate modal dialog. This seamlessly integrates interactive, multi-step processes into your user interface.
1. Overview
The "Open Flow Panel" interaction hosts a Screen Flow inline within your Dynamic Component. This is ideal for scenarios where you want:
A guided, step-by-step process that's part of the main page layout, not a separate popup.
The flow is to be visible alongside other components on the page.
A more integrated experience than a modal dialog provides.
Supported Components:
You can add the "Open Flow Panel" interaction to components that support user interaction and have a suitable area to display the panel. Likely candidates include:
Data Table (row actions, header actions)
Container Components (to dedicate a section of the page to the Flow)
And potentially others
Key Difference from "Open Flow Dialog"
The "Open Flow Panel" displays the Screen Flow within the component's layout, as a panel. "Open Flow Dialog" displays the Screen Flow in a modal dialog window overlaying the page. Both are for Screen Flows (Flows with UI), not autolaunched Flows.
2. How it Works
User Action (Optional): The user might interact with a component (e.g., click a button) to trigger the panel. However, you could also configure the panel to display the flow on load.
Panel Appears: The "Open Flow Panel" interaction makes the panel area within the component visible.
Screen Flow Executes: The specified Screen Flow runs within the panel.
User Interaction with Flow: The user interacts with the Screen Flow's screens, providing input and making choices, all within the panel.
Data Passing (Optional): You can pass data from the Dynamic Component to the Flow as input variables.
Output (Optional): The Flow can return data to the Dynamic Component as output variables.
Panel Remains Open/Closes: The panel remains open until the Flow finishes, or you can configure actions to control its visibility.
Post-Execution Actions (Optional): You can configure actions to occur after the Flow finishes (e.g., display a toast message, refresh data).
3. Configuration
To configure the "Open Flow Panel" interaction:
Select the Component: Choose the Avonni component that will host the Flow panel (or trigger its display).
Add the Interaction: In the component's properties panel, find "Actions" or "Interactions." Add a new action, selecting "Open Flow Panel."
Configure the Settings:
Flow API Name: Select the API name of the Screen Flow you want to embed.
Flow Input Variables (Optional):
Name: The API name of the input variable in your Screen Flow. This list shows variables already defined in your Screen Flow and marked as "Available for Input". You must create these input variables in your Flow before configuring this interaction.
Value: The value to pass to the selected input variable. This can be static, dynamic (from the component), or a resource.
Output Variables (Optional):
Name: The API name of the output variable in your Screen Flow.
Resource Name: The name of the resource (variable) in your Dynamic Component to store the returned value.
Panel Header (Optional): Set the header of the flow panel.
Accessible Description (Optional): Provide a description for screen readers.
On Finish (Optional): Configure actions to occur when the Flow completes successfully (e.g., show a toast, refresh data, hide the panel).
On Close (Optional): Configure actions to occur if the user closes the panel (this might or might not be possible depending on how you configure the panel and Flow).
On Error (Optional): Configure actions to occur if the Flow encounters an error.
4. Example Use Case: Updating Contact Information Inline
Imagine you have a Data Table displaying Contacts. You want users to update a Contact's Status directly from the table, without navigating to a separate edit page.
Create the Screen Flow:
Create a new Screen Flow.
Add an input variable named
ContactId(Text type).Add a "Get Records" element to retrieve the Contact record based on
ContactId.Add a Screen element with a picklist (or other input) to allow the user to select a new
Status.Add an "Update Records" element to update the Contact's
Statusfield.Activate the Flow. Note the Flow's API Name.
Add a Data Table Component: Add an Avonni Data Table to your Dynamic Component, configured to display Contacts.
Add a Button (Row Action): Add a Button component as a row action to the Data Table. This button will trigger the Flow Panel.
Configure the "Open Flow Panel" Interaction:
Select the Button component (the row action).
Add an "Open Flow Panel" interaction.
Flow API Name: Enter the API name of your Screen Flow.
Flow Input Variables:
Name:
ContactIdValue:
@ThisItem.Id(This passes the ID of the selected Contact to the Flow).
On Finish: Add actions to display a success message (Show Toast) and refresh the Data Table to show the updated status.
Test: Save and test. Clicking the button in a Data Table row should now display your Screen Flow in a panel, allowing the user to update the Contact's status directly within the Data Table's context.
5. Important Considerations
Screen Flows Only: The "Open Flow Panel" interaction only works with Screen Flows.
Input/Output Variable Names: The API names must match exactly.
Panel Visibility: Carefully consider how the panel's visibility is controlled. You might want to use the "On Finish" action to hide the panel after the Flow completes.
Layout: Consider the layout of your Dynamic Component and how the panel will fit within it.
In Summary
The Open Flow Panel is a valuable interaction that seamlessly embeds Screen Flows within your Dynamic Components, enhancing user interaction and streamlining workflows. You can create a dynamic data exchange between the component and the embedded Flow by leveraging input and output variables.
Last updated
Was this helpful?