The Avonni Metric displays numerical values with labels to provide context for key metrics and performance indicators .
Last updated
Was this helpful?
The Avonni Metric component allows you to display key performance indicators (KPIs) and other essential metrics visually engaging and informatively. To build your metric, you'll need to connect it to a data source and configure how that data is displayed.
The Avonni Metric component is all about showcasing important numbers and data clearly and visually appealingly. To get started, you must provide the actual values you want to display.
Value: This is the star of the show – the main number you want to highlight. It could be anything from a sales total to the number of open cases or website visits. Make sure this value accurately represents the key metric you're tracking.
Secondary Value: Think of this as a supporting role. It's a great way to add context to your main value. You could use it to show a comparison (like last year's sales), a related metric (like profit margin), or a target value.
Description: Sometimes numbers need a little explanation. Use the description field to add a short, informative text clarifying the values. For example, you could explain what time period the data covers or what units the numbers are in.
Now that you know what you want to display, it's time to tell the Metric component where to get the data. Avonni offers flexible options to connect to various sources:
The Query Data Source in the Metric component displays values calculated directly from your Salesforce data.
Here's how it works:
Define Your Query: Write a query that targets a specific Salesforce object (like the Opportunity object) and selects the field you want to work with (like the Amount field).
Apply an Aggregate Function: Choose an aggregate function (e.g., sum, average, count) to perform a calculation on the selected field. In the example, the 'sum' function would calculate the total value of all opportunities.
Want to make your metrics more than just static displays? Avonni lets you add interactive elements to your metrics:
Select the Metric: Choose whether you want to add an interaction to the primary or secondary value (or both!).
Configure the Interaction: You decide what happens when a user clicks or interacts with the metric. You can choose from various actions, such as navigating to another page, opening a flow, or triggering other dynamic behaviors.
Make your metrics visually appealing and on-brand with Avonni's styling options:
Label: Customize the font, size, color, and alignment of the label text.
Description: Style the description text to complement the overall design.
Value: Control the appearance of the primary and secondary values, including their font, size, color, and any prefixes or suffixes you want to add.
Trend: If you display trends (like percentage increase or decrease), you can customize the colors used to represent positive and negative trends.
Manual
Enter data directly into the component configuration. This is suitable for small, static datasetsta.
Variable
Use a variable as your data source. This is useful for data that changes based on user interactions or other component logic.
Query
Fetch data directly from Salesforce using a query. This is the most common option for displaying Salesforce records.