Interactions Panel

Overview

Avonni Components provides a rich set of UI elements and empowers you with a no-code toolbox of interactions. These interactions transform your solutions into dynamic, responsive, and user-friendly experiences. Let's explore how to harness these interactions to enhance your Avonni-powered applications.

For example:

• Navigate: Guide users seamlessly through your Salesforce. After successfully closing a deal, direct them to a specific Opportunity record page or link to a Knowledge Article relevant to their inquiry.

• Open Flow Dialog: Streamline complex processes by embedding flows directly into your components. For example, launch a flow to collect additional case details from a Contact record page.

• Fire Confetti: Celebrate milestones and achievements! Trigger a confetti animation when a user completes a learning module or reaches a sales target!

Accessing the Interactions Panel

1. Drag an Avonni Flow Screen Component

2. Open the Component Builder

3. Click on the "Interactions" tab

---

How to create an Interaction

• Drag an Avonni Component

• Open the Component Builder

• Go to the Interaction Panel

• Click on the "Add Action" button for the desired type of action.

• Select your Target name (ensure to have created your action first)

• Select the action you want to create on the interaction.

Interactions can be combined. You can define multiple interactions for the same type of action. Actions will run in the order specified.

---

List of Interactions

Navigation & User Feedback

• Flow Navigation: Control the flow of your screens, seamlessly guiding users between screens based on their interactions.

• Show Toast: Deliver informative, timely feedback to users with non-intrusive toast messages that confirm actions, provide information, or issue warnings.

• Navigate: Create seamless transitions by linking to various pages within your Salesforce org or external websites.

Data Interaction

• Download: Users can directly download files associated with records from Data Tables, eliminating the need for separate file repositories.

• Export To: Empower users to export data from Data Tables into Excel or CSV formats for further analysis or sharing.

• Update Records: Automatically save changes made, streamlining data updates.

• Copy Records: Allow users to copy data from data table records to facilitate easy transfer to other applications, such as Excel.

User Engagement & Flow Control

• Open Alert Modal: Display important messages that demand user acknowledgment, ensuring critical information is not overlooked.

• Open Confirm: Prevent accidental actions by requiring user confirmation before executing operations.

• Open Flow Dialog: Simplify complex processes by launching predefined Salesforce flows within your screen flow.

• Open Flow Panel: Slide in a panel to display another flow.

• Fire Confetti: Celebrate user achievements or milestones with a fun and engaging confetti animation.

Data Refresh

• Refresh Query: Instantly update data displayed in Avonni components after a flow is launched, ensuring real-time accuracy without manual refreshes.

• Refresh All Queries: Instantly update all data pulled from a query data source in your flow.

Quick Actions

• Open Quick Action: Quickly access standard or custom Salesforce actions.

---

By leveraging Avonni interactions, you can transform your screen flows into powerful, dynamic tools that empower users, improve data management, and streamline processes. The combination of Avonni components and interactions allows you to create custom-like experiences without extensive coding.

Action Type Configuration Reference

Each action type has its own set of configuration fields. This reference covers every field for every action type.

Open Flow Dialog

Opens a Salesforce screen flow in a modal dialog over the current screen.

Setting	What it does
Flow API Name	The API name of the screen flow to launch. The dropdown searches your org's flows.
Input Variables	Pass data into the target flow. Each variable needs a Name (must match the flow's input variable name exactly), a Value (a static value, a flow variable, or a context variable from the interaction event), a Type (Text, Number, Boolean, Date, Date/Time, Salesforce Object, or Custom), and optionally an Object API Name (for Salesforce Object type) and Allow Multiple Values (for collections).
Output Variables	Retrieve data back from the target flow when it finishes. Each entry maps a flow output variable's API Name to a Variable Number (Variable 1 through Variable 10). The corresponding flowInteractionOutputVariables output variable on the component gets updated.
Modal Header	Text shown at the top of the dialog. Supports item variables from the interaction event (e.g., the event title).
Modal Size	Small (default), Medium, Large, or Full.
On Finish	Actions to run when the launched flow finishes. Supports: Show Toast, Flow Navigation, Refresh All Queries, Fire Confetti.
On Close	Actions to run when the user closes the dialog without finishing the flow. Same options as On Finish.
On Error	Actions to run when the launched flow throws an error. Same options as On Finish.
Modal Accessible Description	(Advanced) Accessibility description for the modal. Not visible to the user, read by screen readers.
Display Modal Footer with a close button	(Advanced) Adds a footer bar with a close button at the bottom of the dialog.
Close Button Label	(Advanced) Custom label for the footer close button. Only visible when the footer close button is enabled.

Example: A Calendar's New Event Drag interaction opens a "Create Appointment" flow. The input variables pass the dragged start and end times. The dialog size is set to Medium. On Finish, a Show Toast says "Appointment created" and a Refresh All Queries reloads the Calendar data.

Open Flow Panel

Slides in a panel from the side of the component, displaying another screen flow. Works similarly to Open Flow Dialog but remains anchored to the component rather than overlaying the entire screen.

Setting	What it does
Flow API Name	The API name of the screen flow to display in the panel.
Input Variables	Same structure as Open Flow Dialog: Name, Value, Type, Object API Name, Allow Multiple Values.
Output Variables	Same structure as Open Flow Dialog: API Name mapped to Variable Number (1–10).
Header	Text displayed at the top of the panel. Supports item variables.
Position	Left or Right (default). Which side of the component the panel slides in from.
Size	Small, Medium (default), Large, X Large, or Full.
Outer	When enabled, the panel appears outside the component boundaries instead of inside them.
Superposed	When enabled, the panel overlays the component content instead of pushing it aside.
Shadow Backdrop	Only available when Superposed is enabled. Adds a grayed-out backdrop behind the panel so the underlying content is visually dimmed.
Hide Close Icon	Removes the X icon from the panel header. Use this when you want the user to complete the flow before closing.
On Finish	Actions to run when the panel flow finishes. Supports: Show Toast, Flow Navigation, Refresh All Queries, Fire Confetti.
On Close	Actions to run when the user closes the panel. Same options as On Finish.
On Error	Actions to run on flow error. Same options as On Finish.

Navigate

Transitions the user to a different page in Salesforce or an external URL.

Setting	What it does
Target	Current Window or New Window.
Page Reference Type	The type of page to navigate to. Options below.

Page Reference Types:

Type	What it navigates to	Key fields
App	A Salesforce app	App Target
External Record Page (CMS Connect)	A CMS Connect page for a record	Record ID, Object Info
External URL	Any URL outside Salesforce	URL, Target (current/new window)
Knowledge Article	A Knowledge article	Article Type, URL Name
Lightning Component	A Lightning component page	Component Name, Parameters
Login Page	The Experience Cloud login page	Action Name
Named Page (Experience Builder)	An Experience Builder named page	Page Name, Parameters
Named Page (Standard)	A standard Salesforce named page	Page Name, Record IDs
Navigation Item Page	A navigation item (tab)	API Name
Object Page	An object's home or list view	Object API Name, Action (home/list/new), Prefilled Values, Use Record Type Check
Record Page	A specific record	Object API Name, Record ID, Action (view/edit/clone)
Record Relationship Page	A related list on a record	Object API Name, Record ID, Relationship API Name

Example: On Event Action Click with target name "View", set Navigate to Record Page, Object API Name to Event, Record ID to the event's Id from item variables, and Action to view. When the user clicks "View" on a Calendar event, Salesforce opens the event record.

Show Toast Notification

Displays a brief notification message at the top of the page.

Setting	What it does	Options
Title	The heading text of the toast (required). Supports expressions.	—
Message	The body text of the toast (required). Supports expressions.	—
Variant	The visual style.	Info (default), Success, Warning, Error
Mode	How long the toast stays visible.	Dismissible (default, user can close it), Pester (closes automatically, no close button), Sticky (stays until user closes it)

Open Alert Modal

Displays a modal dialog with a message that requires the user to acknowledge it by clicking OK.

Setting	What it does	Options
Label	The header text of the alert. Supports expressions.	—
Message	The body text. Supports expressions.	—
Variant	Controls whether the header bar is visible.	Header (default), Headerless
Theme	The color theme of the header bar.	Default, Shade, Inverse, Alt Inverse, Success, Info, Warning, Error, Offline
On Close	Actions to run after the user clicks OK.	Show Toast, Flow Navigation, Open Flow Dialog, Refresh All Queries, Open Quick Action, Fire Confetti

Open Confirm Dialog

Displays a confirmation dialog that requires the user to confirm or cancel before proceeding. Use this to prevent accidental actions, such as deleting a record.

Setting	What it does	Options
Label	The header text. Supports expressions.	—
Message	The body text. Supports expressions.	—
Variant	Controls whether the header bar is visible.	Header (default), Headerless
Theme	The color theme of the header bar.	Default, Shade, Inverse, Alt Inverse, Success, Info, Warning, Error, Offline
On Confirm	Actions to run when the user clicks Confirm.	Show Toast, Flow Navigation, Open Flow Dialog, Refresh All Queries, Open Quick Action, Fire Confetti

Flow Navigation

Controls the flow's screen navigation — move to the next screen, go back, pause, or finish the flow entirely.

Setting	What it does
Type	Next Screen, Previous Screen, Pause, or Finish.

Update Records

Saves any changes the user made in the component directly to Salesforce. This action has no configuration fields of its own — it automatically detects what changed and saves it.

Setting	What it does
On Success	Actions to run after the records are saved. Supports: Show Toast, Flow Navigation, Refresh All Queries, Fire Confetti.
On Error	Actions to run if the save fails. Same options as On Success.

Open Quick Action

Launches a Salesforce Quick Action (standard or custom).

Setting	What it does
Quick Action API Name	The API name of the quick action (e.g., Case.LogACall, NewEvent). Supports expressions.
Record Id	The record ID to associate with the action. Supports item variables.
Prefilled Values	A list of field-value pairs to pre-fill on the quick action form. Each entry has a Field (the field API name) and a Value (supports item variables and expressions).

Refresh All Queries

Refreshes data for all components on the screen that use a Query data source.

Setting	What it does
Flow Scope	When enabled, only refreshes queries in the current flow. By default, refreshes all flows on the page.
Exclude Self	When enabled, the component that triggered the refresh does not refresh its own query.

Fire Confetti

Triggers a confetti animation. Requires the Interaction Service component on the same flow screen.

Setting	What it does
Variant	The animation style: Base, Random Direction, Realistic, Fireworks, Snow, or Pride.

Download

Triggers a file download.

Setting	What it does
URL	Direct URL to the file to download. Supports expressions and item variables.
Content Document ID	The Salesforce Content Document ID to download.
Public Link	A public sharing link for the file.

Control Console Tab

Controls Salesforce console tabs in console apps (Service Console, Sales Console).

Setting	What it does
Action	What to do with the tab (open, close, focus, refresh).
Tab ID	The ID of the tab to control.
Include Sub Tabs	Whether the action applies to sub-tabs as well.
Label	Custom label for the tab.
Icon Name	SLDS icon name to display on the tab.
Icon Alt	Accessibility text for the icon.
Highlight State	Apply a visual highlight to the tab.
Highlight Pulse	Add a pulsing animation to the highlight.