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!
This Quickstart 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.
If you're familiar with screen flows, you can go directly to step 3.
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 you've added the Avonni Data Table component, it's time to connect it to your Salesforce data.
1. Choose your data source:
Query: Write a query to tell Salesforce exactly what data you want to display (e.g., a detailed shopping list).
Variable: Use a variable that already holds the data you need (like a helpful assistant). In Flow Builder, variables are like containers that hold information. You might have created a variable earlier in your flow to store data from a "Get Records" element, or from another source.
2. Select your data:
Query: In the "Query Editor," write your query to specify the data you want from Salesforce.
Variable: Choose the variable that contains the data you want to show. To do this, you'll select the variable from a dropdown list in the Data Table settings.
If you've chosen the "Query" data source, this is where you'll build your query. Think of it like creating a detailed shopping list for the specific pieces of information you need from your Salesforce objects.
How to build your query:
Choose the object: Start by selecting the Salesforce object you want to get data from (e.g., Opportunities, Accounts, Contacts). This is like choosing which aisle in the grocery store you want to shop from.
Add filters (optional): You can also add filters to your query to narrow down the results. This is like adding specific details to your shopping list, such as "only organic apples" or "1 gallon of milk." For example, you might filter your Opportunity query to only show opportunities with a "Close Date" in the current month.
Order the results (optional): You can specify how you want the results ordered in your Data Table. This is like organizing your shopping list by aisle or category. For example, you might order your Opportunity query by "Amount" in descending order to show the largest opportunities first.
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 helpful 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 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, but they don't do anything yet. Let's give them some superpowers!
Avonni Interactions are like the engine that makes your row actions work. Here's how to set them up.
Go to the "Interactions" tab in your Data Table settings.
Add a "Row Action Interaction" by clicking the "Add" button.
Choose your target: Select the name of the row action you created earlier (like "Update Next Step").
Pick your interaction: Choose what you want the button to do. Some options include:
Open Flow Dialog: This opens a pop-up window with another flow inside, perfect for letting the user update information.
Navigate to Page: This takes the user to a different page in Salesforce.
Configure the interaction: If you chose "Open Flow Dialog," you might need to provide some extra details, like which flow to open.
By connecting your row actions to Avonni Interactions, you're turning your Data Table into a dynamic table 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 more accessible 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.
Read our performance guide page to learn more.
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 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 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.
Update to the latest version: We're constantly improving the Avonni Components package and fixing bugs. Make sure you have the newest version installed from the AppExchange. This can often resolve issues that have already been addressed in updates.
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.
