# AX - Metric

## Overview

**AX - Metric** is an Experience Cloud component that displays calculated values from Salesforce records—like totals, averages, counts, and other aggregations—on Experience Sites pages.

Use it to show portal users key metrics at a glance, such as their total orders, average case resolution time, open ticket count, or any custom calculation derived important numbers at a glance, such as their total orders, average case resolution time, open ticket count, or any custom calculation from their data. Configure the metric label, icon, formatting, and data source in Experience Builder without code.

Perfect for portal dashboards, account summaries, performance scorecards, or anywhere portal users need to see key numbers about their records 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 flowId="SXruKm5NX2h4AYOxH2EQ" url="<https://app.arcade.software/share/SXruKm5NX2h4AYOxH2EQ>" %}

***

## **Configuration Options**

### **Label**

Provide a descriptive label for your metric (e.g., "Total Sales," "Active Users"). This serves as a title, giving context to the displayed value.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fdkdljav9L5OJ4AV8JpZf%2F2024-06-29_07-58-05-22.png?alt=media&#x26;token=d2a5f093-46bb-4de9-b71f-2809b0d92477" alt="" width="563"><figcaption></figcaption></figure>

### **Description**

Offer additional context or insights related to the metric. This can be a brief explanation, a trend description, or supporting information to enhance understanding.

### **Value**

Enter the metric's primary numerical value. You have two options:

#### **Manual Input**

Directly enter the value if it's readily available.

#### **Query**

Leverage the power of Salesforce Object Query Language to dynamically fetch the value from your Salesforce data. For example, you can calculate the total number of accounts created this year using a query on the Account object.

<figure><img src="https://2929066058-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FOnkkESHduipa4glofK06%2F2024-06-29_07-58-05.png?alt=media&#x26;token=1a89bdd9-6334-4d10-91a9-290555bf167f" alt=""><figcaption><p>Example: Counting New Accounts Created This Year</p></figcaption></figure>

### **Secondary Value**

Display an additional metric for comparison or further context. This can be the value from a previous period, a target value, or any relevant secondary data point.

### **Prefix & Suffix**

Add symbols or abbreviations to provide context. For example, use "$" for currency, "#" for quantities, or "K" for thousands.

### **Tooltip**

Offer more details on hover. Briefly explain the metric or provide additional insights.

### **Avatar**

Visually represent the metric with an image, initials, or icon. This makes the metric more recognizable and engaging.

### **Primary & Secondary Metric Formatting**

Fine-tune how your metric values are displayed:

* **Format Style:** Decimal, currency, percentage - choose the best format for your data.
* **Value Sign:** Auto, positive, negative - control how signs are displayed.
* **Digits:** Specify the minimum and maximum number of integer and decimal digits.
* **Significant Digits:** Round to a specific number of digits for readability.
* **Show Trend Color:** Use color to instantly indicate positive (green) or negative (red) trends

With its flexibility and range of options, the Avonni Metric component empowers you to present complex data in a simplified and impactful way, making it a valuable asset for any Experience Cloud site seeking to provide actionable insights to its users.

***

## Use Case Examples

### Example 1: Account Won Opportunity Amount

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

Put total closed-won revenue front and center on every account page, giving partner users an immediate view of the relationship's value without leaving the record.

***

#### **What You'll Achieve**

* **Rolled-up revenue visibility:** Display a real-time sum of all closed-won opportunity amounts tied to the account, giving partners instant insight into customer value.

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

Drag the AX – Metric component into Experience Builder on your Account detail page.
{% endstep %}

{% step %}

#### **Configure the data source**

* Click into the Value field and set up a query using the following settings:
  * Object API Name: `Opportunity`
  * Field: `Amount`
  * Aggregate Function: `SUM`
    {% endstep %}

{% step %}

#### **Apply filters**

Scope the query to the current account and winning deals only:

* Account ID: `{!Item.Id}`
* Stage: `Closed Won`
  {% endstep %}

{% step %}

#### **Customize the display**

* Set the Label to `Won Amount`
* Set the Avatar Icon to `standard:opportunity`
  {% endstep %}

{% step %}

#### **Preview your component**

* Use the Experience Builder preview to confirm the metric renders correctly before publishing.
  {% endstep %}
  {% endstepper %}

***

#### **Links**

{% content-ref url="ax-profile-card" %}
[ax-profile-card](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-profile-card)
{% endcontent-ref %}

{% content-ref url="ax-record-detail" %}
[ax-record-detail](https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-record-detail)
{% endcontent-ref %}

***

### Example 2: Account Open Cases

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

Give partner users a live count of unresolved cases directly on the account page, so they can quickly gauge support load and prioritize their outreach accordingly.

***

#### **What You'll Achieve**

* **Open case count at a glance:** Surface the total number of active cases linked to an account, helping partners stay informed on customer health without navigating to a separate list.

***

#### **How to Set It Up**

{% stepper %}
{% step %}

#### **Add the component to your page**

Drag the AX – Metric component into Experience Builder on your Account detail page.
{% endstep %}

{% step %}

#### **Configure the data source**

* Click into the Value field and set up a query using the following settings:
  * Object API Name: `Case`
  * Field: `Id`
  * Aggregate Function: `COUNT`
    {% endstep %}

{% step %}

#### **Apply filters**

* Scope the query to the current account and open cases only:
  * Account ID: `{!Item.Id}`
  * Closed: `false`
    {% endstep %}

{% step %}

#### **Customize the display**

* Set the Label to `Open Cases`
  {% endstep %}

{% step %}

#### **Preview your component**

* Use the Experience Builder preview to confirm the count renders correctly before publishing.
  {% endstep %}
  {% endstepper %}