Open Flow Panel
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
The "Open Flow Panel" displays the Screen Flow within the component's layout as a panel. The "Open Flow Dialog" displays the Screen Flow in a modal dialog window overlaying the page. Both are for Screen Flows (Flows with UI), not auto-launched Flows.
See practical examples and learn how to implement specific scenarios using this interaction:
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).
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.
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 Status field.
Activate the Flow. Note the Flow's API Name.
Add a Data Table Component: Add an Avonni Data Table configured to display Contacts to your dynamic component.
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: ContactId
Value: @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.
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.
The Open Flow Panel is a valuable interaction that seamlessly embeds Screen Flows within your Dynamic Components, enhancing user interaction and streamlining workflows. By leveraging input and output variables, you can create a dynamic data exchange between the component and the embedded Flow.