YouTube ChannelBook A DemoContact SupportSubscribe for Updates

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

Accessing Mapped Values in Action

Capturing User Input

How to retrieve what the user selected

Once a user interacts with a component—such as clicking a card in a Visual Picker or selecting a row in a Datatable—you need to capture that action so you can use it later in your Flow.

We store these selections in specific attributes based on their type.

How to show the selected item from the Avonni Visual Picker as text

Data Output Types

Different components store data differently based on whether the user picks one item or multiple items.

Selection Type
Attribute Name
What it looks like
Use this for...

Single Selection

value

Banking

Decisions or updating a single text field

Multi-Selection

value

Banking;Energy;Tech

Saving to a Multi-Select Picklist field

Multi-Selection

valueCollection

[Banking, Energy, Tech]

Looping through items in your Flow logic

Logic Examples

Use these expressions in your Flow (e.g., inside a Decision element or Update Record element):

  • Check a specific selection: {!Component_API_Name.value} Equals "Banking"

  • Check if a list contains an item: {!Component_API_Name.value} Contains "Banking"

  • Loop through selected items: Use a Loop element and select: {!Component_API_Name.valueCollection}

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.

Leanr More About The Interaction Panel

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.

Learn More About The Style Panel

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:

Last updated

Was this helpful?