Quickstart Guide

What Will You Learn?

Master the Fundamentals: Learn how to use Avonni Components to solve real-world Salesforce challenges.
Unlock the Avonni Data Table: Understand the core concepts behind our most popular component, the Avonni Data Table.
Elevate Your Salesforce Projects: Avonni Components unlock developer-level customization for your Salesforce flows and UIs, allowing you to create robust solutions without writing a single line of code.

Tutorial quick access

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 equipped to:

Display data clearly: Present information in an organized, easy-to-digest format.
Find information fast: Implement search and filtering to pinpoint data quickly.
Navigate seamlessly: Handle large datasets with smooth pagination.
Take action: Enable row-level options to streamline user interactions.
Handle any data type: Confidently work with numbers, text, dates, etc.

Guided Steps

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

1. Create a Screen Flow

If you're familiar with screen flows, you can go directly to step 4.

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

The Avonni Data Table includes a Query Data Source feature. This can be a helpful alternative to the Get Records Collection, especially when managing hundreds or thousands of records.

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

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.

Creating Your First Screen

Insert a Screen Element: Add a new element to your Flow Builder. This is where the visual aspect of your flow begins to take shape.
Label Your Screen: Give it a name for easy identification. Let’s call it 'Screen 1'.
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.
Configure the Footer: In the 'Configure Footer' section, uncheck "Show Footer." This step creates a streamlined interface without additional navigation elements.
Finalize the Screen Setup: Confirm these settings to complete the setup of your first screen element.

4. Add the Avonni Data Table

You can add the Avonni Data Table component with your screen element.

Integrating the Data Table Component

Locate the Avonni Data Table: In your Flow Builder, find the Avonni Data Table component under the custom section of the components list.
Drag and Drop: Drag the Avonni Data Table component onto your screen flow canvas.
Set API Name: Assign an API Name to your component, such as 'OpportunitiesTable.' This name helps identify and reference the components within your flow.
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 Avonni 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 your Salesforce Data

Now that the Avonni Data Table component is in place, the next step is to connect it to your Salesforce Data and configure columns.

Scroll down to the Data Source Section
Select Variable (or Query if you want to handle your data query directly from the component)
Select the Source Collection we created in Step 2

Configuring the Avonni Data Table

Data Source Connection: In the Data Table settings, scroll to the 'Data Source Section'.
Choose Variable Option: Here, select 'Variable' to define the type of data source you're connecting to.
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.
Creating Columns: Now, let’s define what data will be displayed. The fields panel should now appear on the left side of your screen.
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

6. Adding 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.

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

Create a new column: Within the Data Table settings, locate the 'Add Column' button in the Data Mappings Section and click on it.
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.
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.
Add More Actions as Needed: Repeat the process to include additional row actions that suit your flow's requirements.
Customize Menu Alignment: Adjust the alignment of these action menus in your data table to ensure they are easily accessible and visually appealing.
Save Your Configurations: Once you’re satisfied with the setup of your row actions, save your changes to apply them to the data table.

Row Actions connect user selections to specific Avonni Interactions, allowing users to edit data, launch new flows, or navigate to a page.

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 visually differentiate and highlight specific data points. 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.

Dive Deeper: Customize the badge color using a formula.

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: