# 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

{% @arcade/embed flowId="0VIMvNYm8prQBUgBxN4b" url="<https://app.arcade.software/share/0VIMvNYm8prQBUgBxN4b>" %}

***

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

{% hint style="info" %}
**Interactions can be combined**. You can define multiple interactions for the same type of action. Actions will run in the order specified. &#x20;
{% endhint %}

{% @arcade/embed flowId="8wmCka09TWZ9BoGlS6uV" url="<https://app.arcade.software/share/8wmCka09TWZ9BoGlS6uV>" %}

***

## **List of Interactions**

### **Navigation & User Feedback**

* [**Flow Navigation**](/flow/component-builder/interactions-panel/flow-navigation.md)**:** Control the flow of your screens, seamlessly guiding users between screens based on their interactions.
* [**Show Toast**](/flow/component-builder/interactions-panel/show-toast.md)**:** Deliver informative, timely feedback to users with non-intrusive toast messages that confirm actions, provide information, or issue warnings.
* [**Navigate**](/flow/component-builder/interactions-panel/navigate.md)**:** Create seamless transitions by linking to various pages within your Salesforce org or external websites.

### **Data Interaction**

* [**Download**](/flow/component-builder/interactions-panel/download.md)**:** Users can directly download files associated with records from Data Tables, eliminating the need for separate file repositories.
* [**Export To**](/flow/component-builder/interactions-panel/export-to.md)**:** Empower users to export data from Data Tables into Excel or CSV formats for further analysis or sharing.
* [**Update Records**](/flow/component-builder/interactions-panel/update-records.md)**:** Automatically save changes made, streamlining data updates.
* [**Copy Records**](/flow/component-builder/interactions-panel/copy-records.md)**:** 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**](/flow/component-builder/interactions-panel/open-alert-modal.md)**:** Display important messages that demand user acknowledgment, ensuring critical information is not overlooked.
* [**Open Confirm**](/flow/component-builder/interactions-panel/open-confirm.md)**:** Prevent accidental actions by requiring user confirmation before executing operations.
* [**Open Flow Dialog**](/flow/component-builder/interactions-panel/open-flow-dialog.md)**:** Simplify complex processes by launching predefined Salesforce flows within your screen flow.
* [**Open Flow Panel**](/flow/component-builder/interactions-panel/open-flow-panel.md)**:** Slide in a panel to display another flow.
* [**Fire Confetti**](/flow/component-builder/interactions-panel/fire-confetti.md)**:** Celebrate user achievements or milestones with a fun and engaging confetti animation.

### **Data Refresh**

* [**Refresh Query**](/flow/component-builder/interactions-panel/refresh-query.md)**:** Instantly update data displayed in Avonni components after a flow is launched, ensuring real-time accuracy without manual refreshes.
* [**Refresh All Queries**](/flow/component-builder/interactions-panel/refresh-all-queries.md)**:** Instantly update all data pulled from a query data source in your flow.

### **Quick Actions**

* [**Open Quick Action**](/flow/component-builder/interactions-panel/open-quick-action.md)**:** 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.&#x20;

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/component-builder/interactions-panel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.