10 min Quickstart Guide


This guide helps you create a screen flow with our Data Table component. We'll show you step-by-step how to do several things:
  1. 1.
    Set up and fill your table with data.
  2. 2.
    Customize how your table looks.
  3. 3.
    Manage how users can sort and search the table.
For this tutorial, we'll fill the table with 'Opportunity records' as sample data. By the end, you'll know how to display and manage data tables in your Flow screens effectively.

Final Result

After completing this tutorial, you'll know how to use Avonni Data Table Components for several tasks. You'll learn how to display tables of data, search through that data, apply filters, and navigate through multiple pages of results. You'll also learn how to perform actions on individual rows and work with various data types.


Before diving into this tutorial, please install the Avonni Flow Screen Components Library package.
The steps to build a Data Table using the Avonni Data Table component are as follows:

1. Create a Screen Flow

  • Go to your Salesforce setup page
  • Type "Flows" in the search bar and click on 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

The very first step starts with creating our Get Records collection to fetch all records of the Opportunity object:
  • 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"

3. Add our first screen element

Now let's add our first screen element as we just created the Get Records collection:
  • Add a screen element
  • Enter a Label: Screen 1
  • Click on the Configure Header section and uncheck "Show Header"
  • Click on the Configure Footer section and uncheck "Show Footer"

4. Add the Datatable component

  • Drag the Datatable component from the components list to your screen flow (the Datatable Component is located under the custom section)
  • Enter an API Name—for example, OpportunitiesTable.
  • Click on the Open Component Builder button to access all the settings for the Datatable component

5. Connect the Data Source and create your columns

  • Scroll down to the Data Source Section
  • Select Variable
  • Select the Source Collection we create in Step 2

Create the columns

  • The fields panel is now displayed on the left side. We can now drag fields as columns on our Data Table.
    1. 1.
    2. 2.
    3. 3.
    4. 4.

Create row actions

  • Click on the Add Column button located in the Data Mappings Section.
  • Select Action as a Data Type (the source field needs to be empty)
  • In the Type attribute section, create your Row Action item
  • Repeat the step above to create other row action items
  • Adjust the menu alignment if needed
  • Save your changes
View this detailed tutorial about how to create interactions on row actions

6. Configure Data Type for columns

The Avonni Data Table comes with more than 30 different data types. You can illustrate your data differently.

Display the Stage field using a Badge

In this example, we will display the Stage using a badge instead of text.
  • Click on the arrow next to the Stage column to access column properties.
  • Select Type Attributes
  • Select Badge
  • Select a variant (appearance of the badge - if needed)

Display the Probability field using a Progress Bar

  • Click on the arrow next to the Probability column to access column properties.
  • Select Type Attributes
  • Select Progress Bar
  • Toggle Show Value if needed
  • Click on the Name column in the Data Mappings section on the Properties Panel.
  • Scroll down and check the"Linkify" toggle

7. Add a Search Engine

To add a search engine to your Datatable, click "Allow Search" from the column properties you'd like to search.

8. Filter Data

Data can be filtered. Click on "Allow Filtering" from the column properties you'd like to filter.

9. Adding Pagination

Pagination can be added from the Datatable Properties Panel located on the Right Side.
  • Toggle "Show Pagination"
  • Enter the number of items per page
  • Add Icons or Labels if needed.

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

Here are the steps to save and add our flow on Salesforce using App Builder.
  • Click on the "Done" button to close Avonni Component Builder
  • Click on the "Done" button again to close the Edit Screen window
  • Click on the "Save as" and "Activate" buttons to save and activate our flow.
  • Go to the Salesforce Page you'd like to add our newly created flow
  • Click on "Edit Page" from the setup menu to access App Builder
  • Drag the Flow Component
  • From the Right Panel, select the flow we just created below
  • Save the Page
  • And voila!
You can easily integrate the flows you've created using Avonni Components into Salesforce. 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.

To learn more