Learn the Basics


Welcome to the "Learn the Basics" page, your essential guide to unlocking the full potential of Avonni Components within Salesforce Flows. These components are engineered to empower you with developer-level capabilities but with the simplicity and efficiency of a no-code solution.

Understanding Mapped Values in Avonni Components

Welcome to the foundational guide on utilizing Mapped Values with Avonni Components in Salesforce Flows. This guide aims to demystify the concept of Mapped Values and show you how to use them to enhance your Salesforce screen effectively.

What are Mapped Values?

Mapped Values are a key feature in the Avonni Components package. This feature enables dynamic linking between the properties of Avonni components and the variables within your flow.


  • Dynamic Linking with Flow Variables: Mapped Values allow you to connect any available flow variables in your screen flow as dynamic attributes to Avonni components. This creates components that automatically adjust their content or behavior based on the flow's current data or user interactions.

Practical Example:

  • Use Case: Suppose you build a customer service screen flow using Avonni Components.

  • Variable in Flow: Within this flow, there's a variable named CustomerType.

  • Component Application: You use an Avonni text component to display specific messages.

  • Using Mapped Values: By mapping the text component’s content to the CustomerType variable, the displayed message dynamically changes based on the variable's value. For instance, if CustomerType equals 'Premium', the component might display "Thank you for being a premium member!", automatically adjusting as the CustomerType variable changes.

This functionality makes the Avonni Components highly adaptive and user-centric within screen flows, greatly enhancing the interactivity and relevance of your flow components to each user's experience.

How to Configure Mapped Values

Configuring Mapped Values in Avonni Components involves a few straightforward steps:

  1. Select the Avonni Component: Drag and drop your desired Avonni Component (e.g., Blockquote, Barcode) onto the Flow Builder canvas.

  2. Access Property Editor: Click on the component to open its property editor.

  3. Identify Configurable Properties: Look for properties like Title, Content, or Value in the component settings.

  4. Choose 'Mapped Value' Option: For each property, you'll find an option to enter a static value or select 'Mapped Value.'

  5. Select Flow Variable: If you choose 'Mapped Value,' a dropdown menu listing available flow variables will appear. Select the variable that should dynamically define the property’s value.

  6. Save Your Configuration: Save your configurations once you've mapped the desired variables to component properties.

Interactions Panel

The Interactions Panel is your control center for crafting user-driven experiences. It enables you to define how components react to user actions, like clicks or data entries, making your flows not just static pages but interactive journeys.

Interactions Pane

Style Customization

With Style Customization, you can tailor the look and feel of each component to align with your brand or specific design needs. This level of customization adds a professional touch to your flows, enhancing user engagement and satisfaction.

Style Pane

Last updated