> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-metric.md).

# AX - Metric

## Overview

**AX - Metric** is a Lightning App Builder component that displays calculated values from your Salesforce records—such as totals, averages, counts, and other aggregations—on record, app, and home pages.

Use it to show essential numbers at a glance, such as total revenue, average deal size, open case counts, or any custom calculation from your data. Configure the metric label, icon, formatting, and data source right in App Builder without formulas or code.

Perfect for executive dashboards, performance scorecards, at-a-glance summaries on record pages, or anywhere users need to see key numbers without running reports.

### Getting Started

Use this simple tutorial to learn the basics of the Metric component and start building your use cases.

{% @arcade/embed url="<https://app.arcade.software/share/WZ2PHuO7PuFip3N1Gr9Q>" flowId="WZ2PHuO7PuFip3N1Gr9Q" %}

### Key features

* **Aggregation Functions:** Supports SUM, AVG, COUNT, COUNT\_DISTINCT, MAX, and MIN.
* **Visual Formatting:** Customize with icons, prefixes, suffixes, and tooltips.
* **Flexible Display:** Show the metric as a standalone value or inside a styled card.
* **Dynamic Bindings:** Use `{{Record.FieldApiName}}` in the Filter or Description to keep the metric context-aware.

### Use Cases

* **Opportunity Page:** Show average deal size or total quote value with an owner avatar.
* **Account Page:** Display open case count or maximum past purchase value.
* **Campaign Page:** Present total leads or highest engagement rate with bold indicators.
* **Sales Dashboard:** Summarize pipeline value or deals per rep with team avatars.
* **Service Management Overview:** Show max resolution time or average CSAT score.
* **Marketing Overview:** Display campaign ROI or lead count with visual cues.

***

## Configuration

Add the Metric component to a Lightning page in App Builder and configure it via the Properties Panel.

### Properties

| Label              | Type    | Default | Required | Description                                                                                                                                                                                                                                       |
| ------------------ | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Object Api Name    | String  | —       | Yes      | API name of the Salesforce object used to retrieve records for metric calculation. Examples: Opportunity, Case, Campaign.                                                                                                                         |
| Filter             | String  | —       |          | SOQL WHERE clause used to filter which records are included in the metric calculation. Example: StageName = 'Closed Won' or Status = 'Open'.                                                                                                      |
| Field Api Name     | String  | —       | Yes      | Field API name containing the numeric value to be aggregated and displayed. Examples: Amount, ExpectedRevenue, Score\_\_c.                                                                                                                        |
| Aggregate Function | String  | —       |          | The type of aggregation applied to the field. Valid values: SUM, AVG, COUNT, COUNT\_DISTINCT, MAX, MIN. Example: SUM for total pipeline value or AVG for average resolution time. Options: `AVG`, `COUNT`, `COUNT_DISTINCT`, `MAX`, `MIN`, `SUM`. |
| Label              | String  | —       |          | Text displayed above or beside the metric value, describing what the metric represents. Example: “Average Deal Size” or “Open Case Count.”                                                                                                        |
| Description        | String  | —       |          | Additional text displayed with the metric to provide more context. Example: “Last 90 days” or “Based on closed deals.”                                                                                                                            |
| Icon Name          | String  | —       |          | The Lightning Design System name of the icon (e.g.,…                                                                                                                                                                                              |
| Prefix             | String  | —       |          | Text displayed before the metric value. Commonly used for currency symbols (e.g., $) or abbreviations (e.g., “No. of”).                                                                                                                           |
| Suffix             | String  | —       |          | Text displayed after the metric value. Useful for units (e.g., “hrs”, “%”, “days”).                                                                                                                                                               |
| Tooltip            | String  | —       |          | Text displayed on hover to provide additional context or explanation for the metric.                                                                                                                                                              |
| Display as Card    | Boolean | `true`  |          | If true, renders the metric inside a styled card container for visual prominence in dashboards or record pages.                                                                                                                                   |

## Use Case Examples

### Example 1: Rollup Open Opportunity Amount

{% @arcade/embed url="<https://app.arcade.software/share/DdUqqmmfGo8iNjd1vv5X>" flowId="DdUqqmmfGo8iNjd1vv5X" %}

**Scenario**: Display a key performance indicator showing the total value of all active opportunities for an account, providing sales teams with immediate visibility into pipeline value.

**Steps**

{% stepper %}
{% step %}

#### **Navigate to Lightning App Builder**

Edit your Account record page
{% endstep %}

{% step %}

#### **Drag the AX - Metric component onto your page layout**

{% endstep %}

{% step %}

#### **Configure Data Source**

* Set **Object Api Name** to `Opportunity`
* Set **Filter** to `AccountId = '{{Record.Id}}' AND IsClosed = false` (rolls up only open opportunities related to the current account)
  {% endstep %}

{% step %}

#### **Configure Metric Calculation**

* Set **Field Api Name** to `Amount` (the value to roll up)
* Set **Aggregate Function** to `SUM` (adds up the amount across all matching opportunities)
  {% endstep %}

{% step %}

#### **Configure Display Formatting**

* Set **Label** to `Open Pipeline` (descriptive title for the metric)
* Set **Description** to `Total open opportunity amount for {{Record.Name}}`
* Set **Prefix** to `$` (formats the value as currency)
* Set the **Icon Name** to `standard:opportunity`
  {% endstep %}

{% step %}

#### **Set Visual Presentation**

Check **Display as Card** for professional container styling
{% endstep %}

{% step %}

#### **Save & review**

{% endstep %}
{% endstepper %}

**Result**: A prominently displayed card showing the total value of all active opportunities, giving sales teams instant visibility into their pipeline performance

### Example 2: Count Open Cases on the Account page

{% @arcade/embed url="<https://app.arcade.software/share/9rQ9wyifY6J4unAYBqZQ>" flowId="9rQ9wyifY6J4unAYBqZQ" %}

**Scenario:** Display a service KPI to drive customer satisfaction providing teams with a clear view of case activity for a client.

**Steps**

{% stepper %}
{% step %}

#### **Navigate to Lightning App Builder**

Edit your Account record page
{% endstep %}

{% step %}

#### **Drag the AX - Metric component onto your page layout**

{% endstep %}

{% step %}

#### **Configure Data Source**

* Set **Object Api Name** to `Case`
* Set **Filter** to `AccountId = '{{Record.Id}}' AND Status != 'Closed'` (excludes closed cases from the calculation and only show records related to the current account)
  {% endstep %}

{% step %}

#### **Configure Metric Calculation**

* Set **Field Api Name** to `Id` (using the Id field to aggregate will help us count records)
* Set **Aggregate Function** to `COUNT` (count individual case records)
  {% endstep %}

{% step %}

#### **Configure Display Formatting**

* Set **Label** to `Open Cases` (descriptive title for the metric)
* Set **Description** to `Number of Open Cases for {{Record.Name}}`
* Set the **Icon Name** to `standard:case`
  {% endstep %}

{% step %}

#### **Set Visual Presentation**

Check **Display as Card** for professional container styling
{% endstep %}

{% step %}

#### **Save & review**

{% endstep %}
{% endstepper %}

***

## Key Considerations

* **Data Source:** Use `Filter` to limit records; ensure `Field Api Name` matches a type supported by the chosen `Aggregate Function`.
* **Formatting:** Add `Prefix` or `Suffix` for clarity (e.g., currency symbols).
* **Performance:** Keep `Filter` selective — the aggregation runs across all matching records.
* **Accessibility:** Test contrast with icons; use tooltips for context.
* **Limitations:** Respects sharing/FLS rules; no real-time updates.

***

## Troubleshooting Common Issues

* **No Value Displayed:** Check `Field Api Name` and `Filter` syntax; verify field permissions.
* **Wrong Calculation:** Ensure `Aggregate Function` matches the field type (e.g., Number for SUM).
* **Card Not Showing:** Confirm `Display as Card` is `true`.
* **If Issues Persist:** Contact our support team at <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-metric.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.