YouTube ChannelBook A DemoContact SupportInstall the Avonni Dynamic Components

Flow

Overview

The Avonni Flow Component seamlessly embeds and runs a Salesforce Screen Flow directly within the layout of your Avonni Dynamic Component. This acts as a container, allowing you to integrate guided processes, interactive forms, and dynamic user experiences—all powered by Flow logic and automation—directly into your visually built custom Lightning Page UIs.

Key Features

  • Inline Screen Flow Execution: Run Screen Flows as an integral part of your Dynamic Component's layout.

  • Data Integration: Pass data from your Dynamic Component into the Flow using Input Variables.

  • Retrieve Flow Results: Capture data from the Flow and return it to your Dynamic Component using Output Variables.

  • Control Flow Behavior: Define what happens when the embedded Flow finishes.

Launching vs. Embedding

While interactions like "Open Flow Dialog" or "Open Flow Panel" launch a Screen Flow in a separate modal or side panel (usually triggered by a user action, such as a button click), the Avonni Flow Component embeds the Screen Flow directly within the component's current layout area. It's visible and active as part of the page structure (if its visibility conditions are met).

Use Cases

  • Embedding dynamic questionnaires or surveys directly on a record or app page.

  • Displaying guided mini-wizards or checklists as part of a larger custom UI.

  • Creating interactive forms for data entry or updates that leverage Flow logic, directly within a section of your page.

  • Showing conditional UI elements or messages driven by complex Flow logic inline.

  • Providing a compact, guided way to initiate a process related to displayed data.

Adding the Flow Component

Drag and Drop: From the Component Library (left panel), find the "Flow" component and drag it onto your canvas where you want the Screen Flow to appear.

Configuration

Basic Properties

  • API Name: (Text) A unique identifier for this Flow Component instance within your Dynamic Component (e.g., QuickContactUpdateFlow, SurveyFlowEmbed).

  • Flow API Name: Select the Name of the Salesforce Screen Flow you want to embed and run.

Input Variables (Passing Data to the Flow)

This section allows you to pass data from your Dynamic Component (e.g., current record ID, user selections, variable values) into the input variables of your selected Screen Flow.

  • Click "Add Input Variable" (or similar).

  • Name: From the dropdown, select the API Name of an input variable that is defined within your Screen Flow and marked as 'Available for Input'.

Important Note

If the input variable isn't correctly set up in your Flow, you won't see its name available for selection here

  • Value: Use the resource selector (Mapped) to choose the value from your Dynamic Component that you want to pass to this Flow input variable. This can be:

    • A static value.

    • A Global Variable (e.g., @recordId or $Component.recordId if the Dynamic Component has a Target Page Object set and is on a record page).

    • A Variable, Constant, or Formula resource from your Dynamic Component.

    • An attribute from another component on the canvas (e.g., !MyDataTable.firstSelectedRow.Id).

Output Variables (Getting Data from the Flow)

This section allows you to capture values from your Screen Flow's output variables (those marked 'Available for Output') and store them in Variable resources within your Dynamic Component.

  1. Click "Add Output Variable" (or similar).

  2. Output Name: From the dropdown, select the API Name of an output variable defined within your Screen Flow and marked as 'Available for Output'.

  3. Resource Name: Select a Variable resource (of a matching data type) from your Dynamic Component where the value returned by the Flow's output variable should be stored.

Controlling Flow Behavior

Finish Behaviour: (Select) Defines what happens automatically when the embedded Screen Flow reaches its 'Finish' screen or end point.

  • None (Default): The Flow runs once. After finishing, it typically remains on its last screen or in a finished state.

  • Restart: After the Flow finishes, it automatically restarts from the beginning. This can be useful for cyclical data entry or kiosk-like scenarios.

Set Component Visibility

Controls whether the entire Flow Component (and thus the embedded Flow) is visible on the page. Learn more about Set Component Visibility.

Example: Embedding a "Quick Update Task" Flow on a Case Page

1

Create Screen Flow: Build a Flow named Quick_Update_Task_Flow that:

  • Takes inputCaseId (Text, Available for Input) and inputTaskSubject (Text, Available for Input) as input.

  • Has a screen to modify the task subject or add comments optionally.

  • Updates or creates a Task related to inputCaseId with the subject.

  • Activate the Flow.

2

Create Dynamic Component: Set Target Object API Name to Case.

Set Target Page Object to Case.

3

Add Flow Component

  • API Name: CaseTaskFlow

  • Flow API Name: Quick_Update_Task_Flow

  • Input Variables:

    • Map 1: Name: inputCaseId, Value: @recordId (or $Component.record.Id)

    • Map 2: Name: inputTaskSubject, Value: (e.g., a Constant resource like {!DefaultTaskSubject} or another variable)

  • Finish Behaviour: Restart (so user can add another quick task if needed).

4

Add other components around it as needed

5

Place on Case Record Page: Add this Dynamic Component to a Case record page

Result: The "Quick Update Task" Flow will be embedded directly on the Case page, pre-loaded with the Case ID, allowing users to add or update tasks for that Case quickly.

Key Considerations

  • Screen Flows Only: This component is designed to run Screen Flows. Autolaunched Flows should be triggered via the "Execute Flow" interaction.

  • Flow UI is Separate: The visual design of the Flow's screens (the elements, layout, and any Avonni Components for Flows used within those screens) is managed in Salesforce Flow Builder. The Flow Component here hosts it.

  • Flow Limits: The embedded Flow is still subject to standard Salesforce Flow limits and governor limits.

  • Context: Remember that the Flow runs within the context provided by the Dynamic Component, especially regarding input variables.

  • Loading Time of the Embedded Flow: Be aware that the time it takes for the embedded Screen Flow to appear and become interactive is dependent on Salesforce's Flow rendering engine and the specific Flow's complexity (e.g., the number of elements and initial data queries within the Flow). While your surrounding Avonni Dynamic Component and the overall Lightning Page will load quickly, a very complex embedded Flow might take a moment to initialize within its designated area. This primarily affects the Flow's own startup time and should not degrade the performance of other components on the page.

In Summary

The Avonni Flow Component offers a powerful way to embed interactive Salesforce Screen Flows directly into your custom Lightning Page UIs built with Dynamic Components. It facilitates seamless data exchange and allows you to combine the strengths of declarative page design with guided process automation

Last updated

Was this helpful?