Open Flow Dialog

Overview

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.

1. Overview

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.

Supported Components

You can add the "Open Flow Dialog" interaction to components that support user interaction, such as:

• Button

• Button Group

• Button Menu

• Button Icon

• Data Table (row actions, header actions)

• List Item

• And potentially others

Key Difference from "Execute Flow": The "Open Flow Dialog" interaction is for Screen Flows (Flows with user interface elements). The "Execute Flow" interaction is for autolaunched Flows (background processes).

2. How it Works

1. User Action: The user interacts with the component (e.g., clicks a button).

2. Dialog Opens: The "Open Flow Dialog" interaction opens a modal dialog window.

3. Screen Flow Executes: The specified Screen Flow runs within the dialog window.

4. User Interaction with Flow: The user interacts with the Screen Flow's screens, providing input and making choices.

5. Data Passing (Optional): You can pass data from the Dynamic Component to the Flow as input variables.

6. Output (Optional): The Flow can return data to the Dynamic Component as output variables.

7. Dialog Closes: When the Flow finishes (or the user closes the dialog), the modal window closes.

8. 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 Dialog" interaction:

1. Select the Component: Choose the Avonni component that will trigger the Flow (e.g., a Button).

2. 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.

3. 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.

Important

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 returned by the Flow.

• 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 size of the dialog window (Small, Medium, Large).

• On Finish (Optional): Configure actions to occur when the Flow completes successfully. Common 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.

4. Example Use Case: Creating a Contact from an Account

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.

1. 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.

2. Add a Data Table Component: Add an Avonni Data Table component to your Dynamic Component, and configure it to display Accounts.

3. Add a Button (Row Action): Add a Button component as a row action to the Data Table.

4. 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: @ThisItem.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 data table to see the new contact appear.

5. 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.

5. Important Considerations

• 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.

In Summary: 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. By carefully configuring input and output variables, you can create seamless interactions between your components and your Flows