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.

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 s tep 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. Configuring a Get Records Collection

Instead of setting up a separate "Get Records" step in your flow, you can create the data retrieval directly within the Avonni Data Table. This simplifies things! If you'd like to learn more about this option, called "Query Data Source", resources are available.

Let's ensure your flow has the data to populate the Data Table.

What we're doing: Creating a collection to hold your Opportunity records.

Steps:

Add 'Get Records': Drag a "Get Records" element into your flow.
Name it: Give the collection a clear label (e.g., "GetOpportunities").
Choose Object: Select "Opportunity" as the object you want to collect.
Set Conditions (simple): Choose "None - Get all Task Records" for now.
Fetch all records: Select "All Records" for the full set of Opportunities.
Click "Done".

Now, your flow has a collection of Opportunity data ready to use

3. Add a screen element

This is the first step toward building the visual part of your flow!

Why Add a Screen Element?

It's your canvas: This is where you'll add components to display information and gather user input.

Creating Your First Screen

Add the element: Drag a "Screen" element into your flow workspace.
Name it: Name the screen clearly (e.g., "Screen 1").
Hide Header and Footer: Uncheck "Show Header" and "Show Footer" for a simpler look.

That's it! You now have a basic screen to start building upon

4. Add the Avonni Data Table

Let's get your Data Table onto the screen!

How to add the component:

Find it: Look for the Avonni Data Table component in the "Custom" section of your Flow Builder's components list.
Drag it in: Drag the Data Table component onto your screen.
Name it: Give your Data Table an API Name (e.g., "OpportunitiesTable"). This helps you reference it later.
Open Settings: Click "Open Component Builder" to customize your table.

That's it! You're now ready to configure your Data Table

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

Creating a Query

The Avonni Data Table includes an integrated Query data source. This lets you create your query from any Salesforce objects without leaving the Avonni Data Table configuration.

Benefits of using the Query Data Source:

Handle big data easily: Work with large amounts of information without performance slowdowns.
Create dynamic experiences: Your components can instantly update and react to changes in data, making your app feel more responsive and engaging for users.
Refresh data seamlessly: Use the Refresh Query Interaction to keep information up to the minute. No more manual refreshes are needed.

Query configuration

6. Adding Columns

Create Columns: Now, you'll see a list of fields on the left. Drag the following fields into your Data Table to create columns:

Name
Account ID
Stage
Next Step
Close Date
Probability
Amount

That's it! Your Data Table will now display these columns.

7. Adding Row Actions

Improve user experience: Users can take action quickly without leaving the table.
Streamline workflow: Makes interactions with data faster and more efficient.

Why Add Row Actions?

Now that you've set up your data table, add row actions. These allow users to perform tasks directly within the table, like editing, updating, or taking other actions on a specific row.

Implementing Row Actions

Add an Action Column: In your Data Table settings, click 'Add Column'.
Choose 'Action' Data Type: Select "Action" as the type, and leave the source field blank.
Create Your Actions: Add actions like "Edit", "Update Next Step", etc. (Describe briefly what each action should do).
Add as Needed: Create all the row actions your users will require.
Adjust Alignment (optional): Change how the action menus appear in your table if needed.
Save Changes: Click "Save" to apply your new row actions.

Tips:

Keep actions concise: Use short, clear names for your actions.
Consider icons: Icons can make actions more visually recognizable.

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

8. Configure Data Type for columns

Let's make your data table more visually appealing! You can customize how different types of data are displayed within each column.

Why Customize Data Types?

Clarity: Instantly tell numbers, dates, links, and other data types apart.
Better understanding: Use icons, colors, or progress bars to make complex data easier to grasp.
Engaging experience: A well-formatted table is more visually pleasing and helps users focus.

The Avonni Data Table supports over 30 data types, so you have many options to make your data pop.

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.

9. Add a Search Engine

Make it easy for users to find what they need within your data table! Here's how to add a search function:

Implementing Search:

Choose a column: Decide which column you want people to be able to search within.
Open Column Properties: Click on that column to access its settings.
Enable Search: Find the "Allow Search" option and turn it on.

That's it! Users will now see a search bar when interacting with that column, letting them quickly filter the data.

You can make a field searchable in the Data Table even if you don't display that field. Learn more.

10. Filter Data

Help users focus on what matters by adding data filters to your Avonni Data Table.

Why is Data Filtering Important?

Find specific info quickly: Especially useful with large amounts of data.
Better decision-making: Focus on the data most relevant to the task.

Setting Up Data Filtering

Choose columns: Decide which columns make sense for filtering (ex: dates, categories, status, etc.)
Open Column Properties: Click on the column you want to make filterable.
Enable Filtering: Find the "Allow Filtering" option and turn it on.

Users can now filter the data in your table, letting them zero in on the needed information.

11. Adding a Header

Give your Data Table a clear introduction and extra functionality with a custom header.

Why Customize the Header?

Open Header Settings: Find the "Header Section" in your Data Table's settings.
Add a Title: Give your table a descriptive title.
Choose an Icon (optional): Pick an icon that reinforces the purpose of the table.
Add Action Buttons (optional): Include buttons for common actions, if needed

Creating Your Header

Context: A title helps users understand the data at a glance.
Visual appeal: An icon makes the table more visually interesting.
Actions: Header buttons offer shortcuts to common tasks (like refreshing data or creating a new record).

12. Activate our flow and add it to a page

Now it's time to make your flow usable within Salesforce!

Why do this?

Make it live: Activating your flow allows users to interact with it.
Provide access: Adding it to a page lets users find your flow where they need it.

Steps:

Exit Avonni Component Builder: Click "Done" twice (once for the component, once for the Edit Screen).
Activate Flow: Click "Save As" and then "Activate".
Go to your page: Navigate to the Salesforce page where you want the flow to appear.
Open App Builder: Click "Edit Page" from the setup menu.
Add the Flow Component: Drag the Flow Component onto your page.
Choose your flow: Select the flow you just created.
Save: Click "Save" to finalize your changes.