# Learn the Basics

Welcome! This guide will help you bridge the gap between standard Salesforce Screen Flows and the advanced capabilities of Avonni Flow Screen Components.

If you are used to standard Salesforce components, the logic here is very similar, but with much more power under the hood.

***

## How it Works: The High-Level Workflow

Before diving into the technical settings, here is the general process for using any Avonni component in your Flow:

1. **Drag & Drop**: Locate the Avonni component (e.g., a [**Visual Picker**](https://docs.avonnicomponents.com/flow/flow-components/visual-picker) or [**Calendar**](https://docs.avonnicomponents.com/flow/flow-components/calendar)) on the Flow screen element, then drag it onto the canvas.
2. **Open the Component Builder**: unlike standard components, you don't configure everything in the Salesforce side panel. Click the component to open the dedicated [**Component Builder**](https://docs.avonnicomponents.com/flow/component-builder) on the right.
3. **Configure & Map**: This is where you set your data sources, labels, and logic.
4. **Style**: Use the design settings to match your brand.

***

## Connecting Data (Mapping)

***Connect your Flow variables to Avonni***** Flow Screen Components*****.***

In standard Salesforce components, you often manually type in values. With Avonni, we use Data Mapping to create a two-way bridge between your Flow variables and the component.

**Why is this important?** Mapping allows your component to change in real-time based on what is happening in the Flow, and enables the Flow to react to what the user does in the component.

* **Inputs** (Displaying Data): You map a Flow variable (like `{!CustomerName}`) to a component field. When the screen loads, the component automatically shows that customer's name.
* **Outputs** (Updating Data): When a user types or selects an item, the component automatically updates the mapped variable.
* **Quick Example**: If you map a Text Block's content to a variable called `{!WelcomeMessage}`, you can change the message in your Flow logic ("Good Morning" vs "Good Evening") without ever changing the screen itself.

### How to Map a Value

1. Open the Component Builder.
2. Find the attribute you want to make dynamic (e.g., `Label`, `Value`, `Date`).
3. Click the Connector Icon (letters symbol) next to the input field.
4. Select the Salesforce variable you want to link.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FDXkICfeqcCSkel9ZkJzJ%2F2023-11-26_14-12-41%20(1).gif?alt=media&#x26;token=f398159f-8c54-4dad-8e82-a17fb592ddff" alt=""><figcaption><p>Accessing Mapped Values in Action</p></figcaption></figure>

***

## Capturing User Input (Output Variables)

***How to retrieve what the user selected, typed, or clicked.***

When a user interacts with an Avonni component — selecting a card, typing text, clicking a button, reordering items — the component stores the result in **output variables**. These are the values you reference in your flow after the screen to make decisions, update records, or route the user.

### How to Access Output Variables in Flow Builder

After saving your screen, go back to Flow Builder. Any element that comes after your screen can reference the component's output variables:

1. Select the element where you need the value (e.g., a Decision, Assignment, or Update Records).
2. In the resource picker, navigate to **Screen Components** → **\[Your Component]**.
3. You'll see the list of available output variables for that component.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FdF9cxacrzpHJlhKMdgfp%2F2024-09-28_13-23-34%20(1).gif?alt=media&#x26;token=d6b233de-f85c-4531-ae30-823383641cc0" alt=""><figcaption><p>How to show the selected item from the Avonni Visual Picker as text</p></figcaption></figure>

{% hint style="info" %}

#### Information

You don't need to configure anything for output variables to work. They're available automatically after the screen — just reference them in your flow logic
{% endhint %}

### Types of Output Variables

Different components expose different types of output variables depending on what the user does. Here are the main patterns you'll encounter across Avonni components:

#### **Values (Text, Number, Date)**

The most common output. The user types or selects something, and the component returns it.

| Output variable                | Type                   | Example                         | Components                                                                        |
| ------------------------------ | ---------------------- | ------------------------------- | --------------------------------------------------------------------------------- |
| **Value**                      | Text, Integer, or Date | `"Banking"`, `4`, `2024-03-15`  | Input Text, Rating, Slider, Color Picker, Combobox, Icon Picker, Input Counter... |
| **Value Collection**           | Text\[] or Integer\[]  | `["Banking", "Energy", "Tech"]` | Visual Picker (multi), Combobox (multi), Slider (range), Dual Listbox...          |
| **Value Serialized**           | Text (JSON)            | `'["Banking","Energy"]'`        | Dual Listbox, Combobox...                                                         |
| **Value Semi Colon Separated** | Text                   | `"Banking;Energy;Tech"`         | Input Choice Set, Dual Listbox — matches Salesforce multi-select picklist format  |

**When to use which:**

* Need a single value for a Decision or field update? → **Value**
* Need to loop through multiple selections? → **Value Collection**
* Saving to a multi-select picklist field? → **Value Semi Colon Separated**
* Passing to an Apex action? → **Value Serialized**

#### **Records (SObject)**

Some components return full Salesforce records — not just text values. This is common with components that display record data (lists, tables, kanban boards).

| Output variable                                      | Type                           | Example use                                 | Components                             |
| ---------------------------------------------------- | ------------------------------ | ------------------------------------------- | -------------------------------------- |
| **Clicked Item** / **Selected Item**                 | Record (SObject)               | Access any field on the selected record     | List, Kanban, Timeline, Welcome Mat... |
| **Selected Items** / **Edited Records**              | Record Collection (SObject\[]) | Loop through all selected or edited records | Data Table, Kanban, List...            |
| **Edited Record**                                    | Record (SObject)               | Get the record with user's edits applied    | Record Detail                          |
| **Items Serialized** / **Edited Records Serialized** | Text (JSON)                    | Pass to Apex for batch processing           | Data Table, Kanban, Chip Container...  |

{% hint style="success" %} **Pro tip:** When a component returns a Record (SObject), you can access any field on it downstream in your flow — like `{!MyList.clickedItem.Name}` or `{!MyList.clickedItem.Id}`. No extra query needed. {% endhint %}

#### **Click Identifiers**

Components with buttons, actions, or menus expose the name or value of what the user clicked. Use these in Decision elements to branch your flow.

| Output variable                | Type    | Example value | Components                        |
| ------------------------------ | ------- | ------------- | --------------------------------- |
| **Clicked Button Name**        | Text    | `"Escalate"`  | Button Group                      |
| **Clicked Action Name**        | Text    | `"Edit"`      | List, Kanban, Timeline, Avatar... |
| **Clicked Header Action Name** | Text    | `"Add New"`   | List, Timeline, Kanban...         |
| **Is Clicked**                 | Boolean | `true`        | Visual Picker Link                |

#### **State & Metadata**

Some components expose metadata about their current state — useful for conditional logic.

| Output variable                                     | Type    | Example use                           | Components                     |
| --------------------------------------------------- | ------- | ------------------------------------- | ------------------------------ |
| **Number of Items**                                 | Integer | Show a message when the list is empty | List, Timeline, Chip Container |
| **Button Save Clicked** / **Button Cancel Clicked** | Boolean | Branch based on save vs. cancel       | Record Detail                  |
| **Primary Button Clicked**                          | Boolean | Branch based on which CTA was clicked | Welcome Mat                    |

### Quick Reference: Using Output Variables in Your Flow

Here are common patterns for using output variables after a screen:

**In a Decision element** — branch based on a selection:

> `{!MyVisualPicker.value}` Equals `"Premium"`

**In an Update Records element** — save the user's input:

> Set the Account's `Industry` field to `{!MyCombobox.value}`

**In a Loop element** — iterate through multiple selections:

> Loop through `{!MyDualListbox.valueCollection}`

**In an Assignment element** — store a clicked record for later use:

> Assign `{!MyList.clickedItem}` to a record variable

{% hint style="info" %}

#### **Where to find each component's output variables**

Every component page in this documentation includes an **Output Variables** section that lists exactly which variables are available and what they return. Browse the **Component Library** to find your component
{% endhint %}

***

## Adding Interactivity

***Trigger actions without leaving the screen.***

Use the **Interactions Panel** to make your Flow behave like an app rather than a form. Instead of just "Next" and "Previous," you can define specific triggers.

* **Triggers**: User clicks a button, selects a card, or hovers over an icon.
* **Actions**: Navigate to a specific window, open a URL, show a toast message, or update a variable instantly.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FGJFUVIz1iGfjaAW5xCFK%2F2023-11-26_14-15-05.png?alt=media&#x26;token=160129d4-960f-49b6-98b7-1cbf4c64def7" alt=""><figcaption></figcaption></figure>

<a href="../component-builder/interactions-panel" class="button primary">Leanr More About The Interaction Panel</a>

***

## Styling & Branding

***Customize look and feel.***

The Avonni Flow Screen Components offer granular control over UI design to match your corporate branding. You can customize:

* Color Palettes: Match hex codes to your brand.
* Typography: Adjust font sizes, weights, and alignments.
* Spacing: Control padding and margins for a polished layout.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F5lDW2om6vJ01mSyxB2Qo%2F2023-11-26_14-17-04.png?alt=media&#x26;token=ac0ff739-92bf-47f5-8999-8194f0f1a5c0" alt=""><figcaption></figcaption></figure>

<a href="../component-builder/style-panel" class="button primary">Learn More About The Style Panel</a>

***

## Ready to Build?

You now understand the core mechanics of Avonni Components! While there are many features to explore, these four concepts—Workflow, Mapping, Inputs, and Styling—are the foundation for everything you will build.

Where to go next:

* [**Browse the Flow Screen Components Library**](https://docs.avonnicomponents.com/flow/flow-components/explore-all-flow-screen-components): Check out what’s possible.
* **Try a Tutorial**: Build your first interactive screen with our step-by-step.
* **Get Help**: Stuck on a specific setting? Visit our Help Center or [join the community](https://trailhead.salesforce.com/trailblazer-community/groups/0F9KX000000iFxO0AU?tab=discussion\&sort=LAST_MODIFIED_DATE_DESC).