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
CustomerTypevariable, the displayed message dynamically changes based on the variable's value. For instance, ifCustomerTypeequals 'Premium', the component might display "Thank you for being a premium member!", automatically adjusting as theCustomerTypevariable 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:
Select the Avonni Component: Drag and drop your desired Avonni Component (e.g., Blockquote, Barcode) onto the Flow Builder canvas.
Access Property Editor: Click on the component to open its property editor.
Identify Configurable Properties: Look for properties like Title, Content, or Value in the component settings.
Choose 'Mapped Value' Option: For each property, you'll find an option to enter a static value or select 'Mapped Value.'
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.
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
valueattribute that stores the user's selection(s). You can use thisvaluein other parts of your flow for further actions or decisions. Depending on the component configuration, thevalueattribute 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.
Last updated
