10 min Quickstart Guide

Overview
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.Set up and fill your table with data.
2.Customize how your table looks.
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.
Tutorial quick access
​How to connect your Data Source​
​How to configure Data Type​
​How to add row actions​
​How to add a Search Engine​
​How to filter Data​
​How to add Pagination​
​How to add the Flow on a Salesforce page​
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.
Steps
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.Name
2.Amount
3.Stage
4.Probability
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
Display the Name field as a link to your record
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
How to add Row Actions

Last modified 13d ago