Quickstart Guide


Welcome to Avonni Components, your gateway to transforming Salesforce Flow Builder with over 60 advanced UI components. This game-changer package is designed to upgrade your interface designs within Salesforce significantly.

What Will You Learn?

By the end of this guide, not only will you gain a comprehensive understanding of how to apply Avonni Components to tackle real-world building challenges within Salesforce, but you'll also master the basics of the Avonni Data Table - our most popular component. Learning the Data Table is important, as it opens the door to understanding how 80% of the Avonni Components in this package operate. You'll see firsthand how these components can revolutionize your projects, enhancing their efficiency, engagement, and alignment with your specific requirements.
Get ready to transform your Salesforce interface with knowledge that extends well beyond the basics.
To enhance performance and user experience, activating the 'Enable Lightning runtime for flows' option in the Process Automation Settings is important. This setting ensures that your flows run in the Lightning runtime environment, which offers a faster and more efficient operation.

Discover the Final Outcome - What You'll Achieve in This Guide

By the end of this guide, you'll be adept at harnessing the power of the Avonni Data Table Component, the most complete Data Table available for your Salesforce arsenal. Here's what you'll accomplish:
  • Efficient Data Display: You'll learn how to effectively present data in a table format, making information easy to read and understand.
  • Dynamic Data Interaction: Discover how to search within your data, enabling quick access to the information you need. You'll also become proficient in applying filters to narrow down results, tailoring the data display to specific requirements.
  • Navigation Made Simple: We'll guide you through handling multiple results pages, ensuring smooth navigation even with large datasets.
  • Row-Level Actions: Gain the skills to execute actions on individual rows, a feature that brings interactivity and functionality to each data entry.
  • Working with Diverse Data: Become familiar with managing various data types, enhancing your ability to handle many scenarios in Salesforce.
This guide is your stepping stone to becoming proficient with the Avonni Data Table Component, empowering you to create more interactive, efficient, and user-friendly data presentations in Salesforce.


Before diving into this tutorial, please install the Avonni Components package from the AppExchange.

1. Create a Screen Flow

Screen Flows are the backbone of dynamic user experiences in Salesforce. By creating a Screen Flow, you're preparing to integrate Avonni Components, which will enhance the functionality and aesthetics of your Salesforce UI. This is the first step toward transforming standard Salesforce flows into more engaging, visually appealing, and efficient interfaces.
  • Go to your Salesforce setup page.
  • Type "Flows" in the search bar, click Flows under "Process Automation."
  • Click on the "New Flow" button to create a flow
  • Select "Screen Flow" and click Create.

2. Create a Get Records collection

Introduction to Get Records Collection

Now that you've initiated your Screen Flow, it's time to take the next crucial step in our guide: creating a Get Records collection. This step is fundamental in gathering the data you need to display in your flow.

Why Create a Get Records Collection?

The Get Records collection is the pipeline through which your flow accesses and displays data from Salesforce. In this case, we will focus on the Opportunity object. By setting up this collection, you ensure your Avonni Data Table Component has access to the necessary data to display, filter, and interact with. It's all about fetching the correct data to create meaningful and functional interfaces.
  • Add a Get Records element to fetch Opportunities records
  • Enter a collection Label > GetOpportunities
  • Select the Opportunity Object
  • Select "None - Get all Task Records" in the condition requirements field
  • Select "All Records" regarding the number of records to display
  • Click "Done."
The Avonni Data Table includes an integrated Query Data Source feature. This can be a helpful alternative to the Get Records Collection, especially when managing hundreds or thousands of records.

3. Add our first screen element

Having successfully created your Get Records collection, it's time to progress to adding the first screen element. This step is about starting to shape the user interface of your flow.

Why Add a Screen Element?

Screen elements are the building blocks of your user interface in Salesforce Flows. They are where you'll eventually integrate Avonni Components to create engaging, interactive screens. By customizing these elements, you control what the users see and how they interact with your flow. The configuration of headers and footers, for instance, plays a crucial role in defining the layout and navigation of your interface.
Creating Your First Screen
  1. 1.
    Insert a Screen Element: In your Flow Builder, add a new screen element. This is where the visual aspect of your flow begins to take shape.
  2. 2.
    Label Your Screen: Give it a name for easy identification. Let’s call it 'Screen 1'.
  3. 3.
    Configure the Header: Click on the 'Configure Header' section. Uncheck "Show Header" to simplify your screen's appearance and focus the user's attention on the main content.
  4. 4.
    Configure the Footer: In the 'Configure Footer' section, uncheck "Show Footer." This step is about creating a streamlined interface without additional navigation elements.
  5. 5.
    Finalize the Screen Setup: Confirm these settings to complete the setup of your first screen element.

4. Add the Avonni Data Table component

With your screen element in place, we now dive into one of the most exciting parts of this guide: adding the Avonni Data Table component. This step is where the true power of Avonni Components begins to shine in your flow.
Why Use the Avonni Data Table Component?
The Avonni Data Table component is a cornerstone of interactive and dynamic data presentation in Salesforce. It allows you to display, sort, and manage data in a visually appealing and user-friendly table format. By integrating this component, you transform raw data from the Get Records collection into an informative and interactive display, enhancing the user experience significantly.
Integrating the Data Table Component
  1. 1.
    Locate the Avonni Data Table: In your Flow Builder, find the Avonni Data Table component under the custom section of the components list.
  2. 2.
    Drag and Drop: Drag the Avonni Data Table component onto your screen flow canvas. This action starts the process of embedding the component into your flow.
  3. 3.
    Set API Name: Assign an API Name to your component, for example, 'OpportunitiesTable'. This name helps in identifying and referencing the component within your flow.
  4. 4.
    Access Component Settings: Click on the 'Open Component Builder' button. This opens the door to various settings and customizations for the Avonni Data Table component.
It's normal for the Component Builder to take a bit longer to load when you're using them for the first time or if your Salesforce Session cache has expired (usually after 48 hours).

5. Connect the Data Source and create your columns

Now that the Avonni Data Table component is in place, the next crucial step is to connect it to your data source and set up the columns. This step transforms the Data Table from a mere framework to a functional component filled with meaningful data.

Why Connect a Data Source and Create Columns?

Connecting the Data Table to a data source breathes life into your component, filling it with the data you want to display. Creating columns is essential to determine how this data is organized and presented. This step is crucial for ensuring that your data table is informative, intuitive, and easy to navigate for users.
  • Scroll down to the Data Source Section
  • Select Variable
  • Select the Source Collection we created in Step 2

Setting Up the Data Table

  1. 1.
    Data Source Connection: In the Data Table settings, scroll to the 'Data Source Section'.
  2. 2.
    Choose Variable Option: Here, select 'Variable' to define the type of data source you're connecting to.
  3. 3.
    Select Source Collection: Choose the collection you created in Step 2 as your data source. This links your Data Table to the data fetched from the Salesforce database.
  4. 4.
    Creating Columns: Now, let’s define what data will be displayed. The fields panel should now appear on the left side of your screen.
  5. 5.
    Drag Fields as Columns: You can drag and drop fields into your Data Table from this panel. Create columns for:
    • Name
    • Account ID
    • Stage
    • Next Step
    • Close Date
    • Probability
    • Amount
These columns will structure how data is displayed in your table, making it accessible and understandable.
By the end of this step, your Avonni Data Table will be connected to a live data source and structured in a way that makes the most sense for your specific Salesforce use case.

6. Introduction to Row Actions

Having connected your data and structured your columns, we now move to a pivotal feature of the Avonni Data Table: creating row actions. This step is about enhancing the interactivity and functionality of your data table.
Why Add Row Actions?
Row actions in a data table are essential for user interaction. They allow users to perform specific tasks directly from the data table, such as editing or updating records. This functionality improves the user experience and streamlines workflow by providing quick access to everyday tasks.
Implementing Row Actions
  1. 1.
    Initiate Row Action Creation: Within the Data Table settings, locate the 'Add Column' button in the Data Mappings Section and click on it.
  2. 2.
    Set Action as Data Type: Choose 'Action' as the Data Type. Ensure that the source field remains empty, as this is for action buttons, not data fields.
  3. 3.
    Define Your Row Actions: Create your Row Action items in the Type attribute section. For instance, you might add actions like:
    • 'Edit' – to modify the selected record.
    • 'Update Next Step' – to change the next step text by launching another flow.
  4. 4.
    Add More Actions as Needed: Repeat the process to include additional row actions that suit your flow's requirements.
  5. 5.
    Customize Menu Alignment: Adjust the alignment of these action menus in your data table to ensure they are easily accessible and visually appealing.
  6. 6.
    Save Your Configurations: Once you’re satisfied with the setup of your row actions, save your changes to apply them to the data table.
By implementing these row actions, you're significantly boosting the interactive capabilities of your Data Table. This step is about empowering users with the tools they need right at their fingertips, making your data table not just a display but a dynamic interface within your Salesforce flow.

7. Configure Data Type for columns

Next in our guide is configuring the data types for columns in your Avonni Data Table. This step takes your data presentation to the next level, using various visual elements to represent different data types.

Why Customize Data Types?

The Avonni Data Table supports over 30 data types, allowing you to differentiate and highlight specific data points visually. Customizing how each data type is displayed enhances your data table's readability and aesthetic appeal. This customization can transform a simple text display into a more informative and visually engaging interface.

Setting Up Enhanced Data Displays

Display Stage as a Badge:
  • Navigate to the Stage column's properties by clicking the arrow next to it.
  • Under Type Attributes, select 'Badge'.
  • Choose a variant for the badge’s appearance as needed. This will display the 'Stage' field as text and a distinct badge, making it stand out visually.
Display Probability with a Progress Bar:
  • Access the Probability column properties similarly.
  • In Type Attributes, choose 'Progress Bar'.
  • Enable 'Show Value' if you want the numerical probability value to be displayed alongside the progress bar. This visual representation of probability can make the data more intuitive and quickly understandable.
Linkify the Opportunity Name Field:
  • Click on the Name column in the Data Mappings section on the Properties Panel.
  • To turn the Name field into a hyperlink, scroll down and toggle on 'Linkify'. This feature transforms the name into a clickable link, providing direct access to the corresponding record.

8. Add a Search Engine

An essential feature of any comprehensive data table is a search function. In this guide step, we'll focus on integrating a search engine into your Avonni Data Table. This functionality enhances the usability of your table by enabling quick and efficient data retrieval.
Why Add a Search Engine?
A search engine within your data table allows users to effortlessly locate specific information without scrolling through potentially large volumes of data. This feature is precious in improving the user experience, saving time, and making your data table more efficient and user-friendly.
Implementing the Search Functionality
  • Enabling Search: To add a search engine to your Data Table, select the column you want to make searchable.
  • Access Column Properties: Click on the relevant column to open its properties.
  • Activate Search Capability: Look for the option labeled "Allow Search" and enable it. This action will make the chosen column searchable, allowing users to input search queries and quickly find the relevant data within that column.
You can make a field searchable in the Data Table even if you choose not to display that field. Learn more.

9. Filter Data

As we progress further in our guide, the next step involves enabling data filtering in your Avonni Data Table. This feature is key to managing large datasets by allowing users to streamline the data they view based on specific criteria.
Why is Data Filtering Important?
Data filtering is a crucial functionality for enhancing the usability of data tables, especially when dealing with extensive datasets. It empowers users to view only the data relevant to their needs, reducing the clutter and focusing on pertinent information. This capability not only improves the user experience but also increases efficiency in data handling.
Setting Up Data Filtering
  • Choose Columns to Filter: Decide which columns in your data table would benefit from filtering. This could be based on their data type and how users will likely interact with it.
  • Access Column Properties: Click on the column you wish to make filterable to open its properties.
  • Enable Filtering Feature: Find and click on the "Allow Filtering" option within the column properties. Activating this feature will allow users to filter that column, narrowing down the data based on their input.

10. Adding a Header

This step is about enhancing your Avonni Data Table with a customized header. This element is crucial for providing context and additional functionality to your data table.

Why Customize the Header?

A well-designed header does more than label your data table; it sets the tone and context for the data presented. By customizing the header, you can include a title for clarity, select an icon for visual appeal, and add action buttons for increased functionality. This customization ensures your data table is functional and aesthetically aligned with your interface design.

Creating Your Data Table Header

  • Open the Header Section: In your Data Table settings, expand the 'Header Section'. This is where you will customize the appearance and functionality of your data table's header.
  • Insert a Title: Add a title to your header. This title should describe the data presented in the table, providing clear context to the users.
  • Select an Icon: Choose an appropriate icon to accompany your header title. This visual element adds a design touch and can help users quickly identify the table’s purpose.
  • Add Action Buttons: If necessary, include action buttons in the header. These buttons can provide shortcuts to common tasks or actions related to the data in your table.

11. Activate our flow and add it on Salesforce using App Builder

Having meticulously crafted your data table with Avonni Components, the final step in our journey is to activate the flow and integrate it into your Salesforce environment using the App Builder. This step is crucial in bringing your work to life and making it accessible within Salesforce.

Why Activate and Add the Flow?

Activating and adding the flow to Salesforce makes your creation operational and usable in a real-world context. It's taking your designed flow from the development stage to a functional component within your Salesforce interface, where users can interact with it.

Steps to Activate and Implement Your Flow

  • Close Component Builder: Click the "Done" button to exit the Avonni Component Builder.
  • Exit Edit Screen: Click the "Done" button again to close the Edit Screen window.
  • Save and Activate: Now, click "Save as" and "Activate" to save your changes and activate your flow.
  • Navigate to Desired Salesforce Page: Go to the specific Salesforce page where you want to add your newly created flow.
  • Enter App Builder: Click on "Edit Page" from the setup menu to open the App Builder.
  • Drag the Flow Component: In App Builder, from the right panel, drag the Flow Component to your desired location on the page.
  • Select Your Flow: Choose the flow you've just created from the list of available flows.
  • Save and Finish: Save your page settings to finalize the addition of your flow.
And voilà! You've successfully activated and added your custom flow to Salesforce. It's now live and ready for use, showcasing the dynamic and interactive data table you’ve created with Avonni Components.
You can easily integrate the flows you've created into Salesforce using Avonni Components.
These can be added wherever you can insert a flow, such as:
  • Home Page
  • Record Page
  • App Page
  • Quick Action
  • Digital Experience websites using the Digital Experience Cloud Builder.

Dive Deeper

Last modified 2mo ago