Learn the Basics

Overview

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.

Functionality:

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

Accessing Selected Values from Specific Components

• Visual Picker, Vertical Visual Picker, Combobox: These components usually have a value attribute that stores the user's selection(s). You can use this value in other parts of your flow for further actions or decisions. Depending on the component configuration, the value attribute can provide the selected data in different formats:

  • value: This gives you a simple text representation of the selection(s). For multiple selections, the values are typically separated by semicolons, like: Banking;Biotechnology;Chemicals.

  • valueCollection: This gives you a list (array) of the selected values, like: [Banking, Biotechnology, Chemicals]. This is helpful if you need to work with the individual selections separately in your flow.

  • valueCollectionSerialized: This gives you a text representation of the list of selected values, formatted like: ["Banking","Biotechnology","Chemicals"]. This format is useful if you need to store or send the selected data in a specific way.

• Other Components: Check the documentation for each specific component to see how to access its selected value or other user interaction data

Besides connecting values to component properties, you can directly access what the user selects in certain components.

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.

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.