Open Flow Dialog
Last updated
Was this helpful?
Last updated
Was this helpful?
The "Open Flow Dialog" interaction lets you launch a Salesforce Screen Flow in a modal dialog window directly from within an Avonni Dynamic Component. This provides a powerful way to incorporate interactive, multi-step processes into your user interface without requiring the user to navigate away from the current page.
The "Open Flow Dialog" interaction embeds a Screen Flow within your Dynamic Component. This is ideal for scenarios where you need to:
Guide users through a complex process.
Collect information in a structured way.
Present a series of screens based on user input.
Perform actions that require user interaction before continuing with the main component's logic.
(Key Difference: Use "Open Flow Dialog" for Screen Flows with UI. Use the separate "" interaction to run Autolaunched Flows in the background.)
See practical examples and learn how to implement specific scenarios using this interaction:
User Action: The user interacts with the component (e.g., clicks a button).
Dialog opens: The "Open Flow Dialog" interaction opens a modal dialog window.
Screen Flow Executes: The specified Screen Flow runs within the dialog window.
User Interaction with Flow: The user interacts with the Screen Flow's screens, providing input and making choices.
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.
Dialog Closes: The modal window closes when the Flow finishes (or the user closes the dialog).
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 Dialog" interaction:
Select the Component: Choose the Avonni component that will trigger the Flow (e.g., a Button).
Add the Interaction: In the component's properties panel, find the section for configuring "Actions" or "Interactions." Add a new action and select the "Open Flow Dialog" type.
Configure the Settings:
Flow API Name: Select the API name of the Screen Flow you want to launch.
Flow Input Variables (Optional):
Name: The API name of the input variable in your Screen Flow.
Value: The value you want to pass to the input variable. This can be a static value, a dynamic value from the component (e.g., a selected row's ID), or a resource.
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 the Open Flow Dialog interaction. For the Value, provide the value you want to pass to the selected input variable.
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 where you want to store the value the Flow returns.
Modal Header: The text to display as the title of the dialog window. This can be static text or a dynamic value from a resource/field.
Accessible Description: (Optional) Provide a description for screen readers to improve accessibility.
Size: Choose the dialog window size (Small, Medium, Large).
On Finish (Optional): Configure actions to occur when the Flow completes successfully. Everyday use cases include displaying a toast message or refreshing data.
On Close (Optional): Configure actions to occur when the user closes the dialog window (regardless of whether the Flow finished).
On Error (Optional): Configure actions to occur if the Flow encounters an error.
Imagine you have an Avonni Data Table displaying Accounts. You want to add a button to each row that, when clicked, opens a Screen Flow to create a new related Contact.
Create the Screen Flow
Create a new Screen Flow in Salesforce Setup.
Add an input variable named AccountId (Text type).
Add screen elements to collect Contact information (First Name, Last Name, Email, etc.).
Add a "Create Records" element to create a new Contact, setting the AccountId field to the value of the AccountId input variable.
(Optional) Add an output variable, for instance, to return the newly created Contact ID.
Activate the Flow. Note the Flow's API Name.
Add a Data Table Component: Add an Avonni Data Table component to your Dynamic Component, and configure it to display Accounts.
Add a Button (Row Action): Add a Button component as a row action to the Data Table.
Configure the "Open Flow Dialog" Interaction
Select the Button component (the row action).
Add an "Open Flow Dialog" interaction.
Flow API Name: Enter the API name of your Screen Flow.
Flow Input Variables:
Name: AccountId
Value: Record: Account ID (This passes the ID of the selected Account to the Flow).
Modal Header: Set to 'Create new Contact'
On Finish: Add a "Show Toast" action to confirm the Contact creation, and refresh your query table to see the new contact appear.
Test: Save and test. Clicking the button in a Data Table row should now open your Screen Flow in a dialog, pre-populated with the Account ID.
Screen Flows Only: The "Open Flow Dialog" interaction only works with Screen Flows, not autolaunched Flows.
Input/Output Variable Names: The API names of your input and output variables must match strictly between the Flow and the "Open Flow Dialog" configuration.
Modal Behavior: The Flow runs within a modal dialog window. Users must complete or close the Flow before interacting with the rest of the page.
The "Open Flow Dialog" interaction is a powerful tool for launching Screen Flows directly within your Avonni Dynamic Components. It provides a user-friendly way to incorporate complex, multi-step processes into your applications. You can create seamless interactions between your components and Flows by carefully configuring input and output variables.