Quickstart Guide
Last updated
Last updated
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.
Elevate Your Salesforce Projects: Create robust Salesforce solutions without writing code.
This guide isn't just about building a simple table. It's about unlocking the power of the Avonni Components package to create amazing things in Salesforce!
By the end of this guide, you'll be a true Avonni Data Table pro. You'll be able to:
Present data beautifully: No more boring tables! You'll learn to display information in a clear, organized way that's easy for everyone to understand.
Find information instantly: Need to locate a specific record? No problem! You'll master search and filtering tools to pinpoint data in the blink of an eye.
Work with massive datasets: Got tons of data? No sweat! You'll discover how to handle large amounts of information without slowing down.
Empower your users: Give them the ability to take action right from the table, making their work faster and easier.
Display any kind of data: Numbers, text, dates, you name it! You'll learn to handle all sorts of data types like a pro.
But it's not just about tables...
This guide gives you a taste of what the entire Avonni Components package can do. Think of it as your gateway to a whole world of possibilities!
Before diving into this tutorial, please install the Avonni Components package from the AppExchange.
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
.
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
Let's get your Data Table onto the screen!
How to add the Avonni Data Table
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).
Now that the Avonni Data Table component is in place, the next step is to connect it to your Salesforce Data and configure columns.
Here's how:
Find the Data Source Section: Scroll down within the Avonni Data Table settings until you see "Data Source." This is where you'll tell the table where to get its information.
Choose how to get your data:
Using a Query: This is like giving the table a detailed shopping list. You write a "query" (a special request) to tell Salesforce exactly what information you want. This is an excellent option if you need to be very specific about the data you bring in.
Using a Variable: This is like having a helpful assistant who already gathered some information for you. A "variable" is a container holding data you prepared earlier in your flow.
Now that you've told your Data Table where to find information (using a query or a variable), it's time to pick the specific data you want to display.
Think of it like this: you've arrived at the grocery store with your shopping list (or your assistant who already has the items). Now you need to actually put the items (your data) into your cart. 🛒
Here's how:
If you're using a Query:
Write your Query: In the "Query Editor," write a query to specify the exact data you want from your Salesforce objects. This is like carefully selecting each item from your shopping list.
If you're using a Variable:
Select your Variable: Choose the variable that holds the data you want to display in your table. This is like taking the items your assistant already gathered and putting them in your cart.
That's it! Once you've chosen your data, you can move on to the next step and start setting up the columns in your Data Table
This is where you'll write your query. It's like using a special notepad to write down the items you want from the "Opportunity" aisle.
Create Columns: Now, you'll see a list of fields on the left. Drag the following fields into your Data Table to create your columns:
Name
Account ID
Stage
Next Step
Close Date
Probability
Amount
That's it! Your Data Table will now display these columns.
You've built your Data Table and filled it with information. Let's make it even more useful by adding "row actions."
Think of row actions as handy shortcuts right inside your table. They let your users edit a record, update information, or even kick off a whole new process without leaving the table!
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.
Row Actions connect user selections to specific Avonni Interactions, allowing users to edit data, launch new flows, or navigate to a page.
You've added those handy row action buttons to your Data Table. Now, it's time to give them superpowers!
The Avonni Interactions are like the secret sauce that makes your row actions actually do something.
Here's how to set them up:
Go to the "Interactions" tab: In your Data Table settings, click on the "Interactions" tab. This is where the magic happens!
Add a "Row Action Interaction": Click the "Add" button and choose "Row Action Interaction." This tells Avonni you want to connect a row action to a specific function.
Choose your target: Select the name of the row action you created in Step 6. For example, if you created an "Update Next Step" action, you'd choose that here.
Pick your interaction: Now, choose what you want that row action to do. Avonni has a bunch of pre-built options, like:
Open Flow Dialog: This lets you open a pop-up window (a "modal") that can launch another flow. This is perfect for your "Update Next Step" action, as you can have it open a flow that lets the user update the next step for that specific record.
Navigate to Page: This takes the user to a different page in Salesforce.
And many more! Explore the options to see what fits your needs.
Configure the interaction: You might need to provide some extra details depending on your chosen interaction. For example, if you choose "Open Flow Dialog," you must select the flow you want to launch in a modal box.
By connecting your row actions to Avonni Interactions, you're turning your Data Table into a dynamic tool that lets users do amazing things with just a click
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.
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.
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.
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.
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).
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.
That's it! Your flow is now a part of your Salesforce page.
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.
While Avonni Data Table is designed to be user-friendly, you might encounter some hiccups. Here's a guide to troubleshoot common issues:
Problem: The Avonni Component Builder takes a long time to load or doesn't load at all.
Possible Causes:
First-time use: The component might take longer to load initially.
Expired Salesforce Session cache: Your cache might need refreshing if it's been over 48 hours.
Network connectivity: A slow or unstable internet connection can hinder loading.
Sandbox environment: Sandboxes are like practice versions of Salesforce. They sometimes run a little slower than the "real" Salesforce (called a production org).
Solutions:
Be patient: Allow some time for the component to load, especially on first use.
Refresh your Salesforce session: Log out and log back in to refresh your cache.
Check your internet connection: Ensure a stable and fast connection.
Problem: The Data Table doesn't display or show incorrect data.
Possible Causes:
Incorrect data source: The selected data source (variable or query) might be wrong or empty.
Incorrect field mapping: The columns might not be mapped to the correct fields in your data source.
Data retrieval issues: The "Get Records" element or the SOQL query might be incompatible.
Filter or search issues: Filters or search criteria might be too restrictive, resulting in no data being displayed.
Solutions:
Verify data source: Double-check that the correct data source contains data (especially if you set filters)
Review field mapping: Ensure columns are correctly mapped to the corresponding fields.
Test data retrieval: Check the "Get Records" element or SOQL query separately to ensure it's retrieving the expected data.
Adjust filters and search: Broaden or clear filters and search criteria to see if data appears.
Problem: Row actions don't work as expected or don't appear at all.
Possible Causes:
Incorrect action configuration: The actions might not be correctly linked to an Avonni Interaction.
Missing permissions: Users might lack the necessary permissions to perform the actions.
Solutions:
Review action configuration: Ensure actions are correctly linked to the intended row actions. You can learn more here.
Check user permissions: Verify that users have the required permissions for the actions.
Check for error messages: Pay attention to any error messages displayed in Flow Builder.
Use the browser's developer console: Inspect the HTML and JavaScript code using your browser's developer console to identify potential issues.
Clear your browser cache: Clearing your browser cache can sometimes resolve display or loading problems.
Test in a different environment: If possible, test the Data Table in a sandbox or development environment to isolate issues.
Start from scratch (sometimes!): Try creating a new screen flow with a simple Data Table and no fancy features. This can help you determine if the problem is with one of the Avonni components themselves or with the overall design of your flow.
Contact Avonni support: If you can't resolve the issue, contact Avonni's support team for assistance.
Following these troubleshooting tips, you can quickly identify and resolve common issues with your Avonni Data Table, ensuring a smooth and efficient user experience.