Variable

The "Variable" Data Source enables your Avonni components to display Salesforce data by leveraging the different types of Flow variables available in your Screen Flow. This means the data shown in the component can change based on actions and logic within the Flow.

---

How It Works

Gathering and Preparing Data in Your Flow

Before displaying data in an Avonni component, you must collect, modify, or create that data within your Flow. You do this using Flow elements such as:

• Get Records: Retrieves data from Salesforce records (e.g., a list of Accounts, Contacts related to an Opportunity).

• Create Records: Creates new Salesforce records.

• Update Records: Modifies existing Salesforce records.

• Transform (Advanced): Reshapes and combines data from multiple sources, creating a custom collection.

Adding and Configuring the Avonni Component

You add an Avonni component to your Screen element (e.g., a List, Data Table, or another component that supports variable data sources). You select "Variable" as the data source for the component's properties.

Choosing the Right Flow Variable

Once you've selected "Variable" as the data source, specify which Flow variable contains the data you want to display.

• Variable Selection: The component's properties will now show a field where you can choose the appropriate Flow variable. Select the record collection variable (or other variable type) you prepared.

Field Mapping (Crucial)

This critical step connects the data in your Flow variable to the visual elements of the Avonni component. Field mapping tells the component which data fields to display and where to display them.

• Component Properties: Each Avonni component has properties that control its appearance and content. For example, a List component might have properties for "Title," "Description," and "Avatar." A Data Table has properties for each column.

• Variable Fields: Your Flow variable (e.g., your record collection) contains fields corresponding to the fields of the Salesforce object (e.g., Name, Industry, Id for an Account record).

• The Mapping Process: In the Avonni component's properties, you'll find settings for each visual element (title, description, column, etc.). For each of these, you'll select the corresponding field from your Flow variable. This creates the link between the data and its display. For example, you might map the Name field from your record collection to a List item's "Title" property.

---

Types of Flow Variables You Can Use

Avonni components can use the following types of Flow variables as data sources:

Record Collection Variables (Most Common)

These variables hold a collection of Salesforce records (like a list of Accounts, Opportunities, etc.). You typically create these using a "Get Records" element. They are ideal for displaying lists, tables, or any component showing multiple items.

Record Variables (Less Common for Data Source, but Possible)

These variables hold a single Salesforce record. While less common as a direct data source for things like lists, they can help display details of a single record in specific components (e.g., displaying details of a selected Account). You can get them as result of Get Records or Create Record element for example.

Collection Variables from Transform Element (Advanced)

Flow's "Transform" element lets you manipulate and restructure data before it's displayed in an Avonni component. Combining data, calculating values, and creating custom data structures makes1 it ideal for complex scenarios. The Transform element outputs a custom collection variable, which can then be used as the data source for your component.

To use a Transform element as a Variable Data Source in your Avonni component:

1. In your Avonni component's properties, select "Variable" as the Data Source.

2. In the variable selection field (e.g., "Items (Variable)"), choose "Custom".

3. In the custom variable input field that appears, enter the exact name of your Transform element. This directly connects the Transform element's output to the Avonni component. You are referencing the Transform element itself, not a separate variable created by it.

This direct connection allows the Avonni component to display the transformed data created by your Transform element. Remember that the Transform element's output must be a collection for most components like Lists and Data Tables.