> 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/experience-cloud/experience-components/ax-metric.md). # 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 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. {% hint style="info" %} **See it in a real project** [Account Highlight Panel](https://docs.avonnicomponents.com/projects/use-cases/record-pages/account-highlight-panel): A custom highlights panel with metrics, badges and a gauge. {% endhint %} ## Getting Started Use this simple tutorial to learn the basics of the Metric component and start building your use cases. {% @arcade/embed url="" flowId="SXruKm5NX2h4AYOxH2EQ" %} ## Configuration ### **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.
### **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.

Example: Counting New Accounts Created This Year

The value can also be made clickable, so users can act on the number they see — configure it under [Interactions](#interactions). ### **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. The secondary value has its own **Secondary Prefix** and **Secondary Suffix**. ### **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. * **Image:** The image to display. Accepts `.apng`, `.avif`, `.gif`, `.jpg`, `.jpeg`, `.png`, `.svg`, and `.webp` files. * **Fallback Icon Name:** The Lightning Design System icon used as a fallback when the image fails to load. * **Initials:** Letters to display instead of an image. If the record name contains two words, like a first and last name, use the first capitalized letter of each. * **Position:** Where the avatar sits relative to the value — Left (default), Right, Bottom, or Top. * **Alternative Text:** Text describing the avatar, displayed as hover text on the image and read by assistive technology. * **Size:** X-Small, Small, Medium (default), Large, X-Large, or Xx-Large. * **Variant:** Circle or Square (default). ### **Primary & Secondary Metric Formatting** Fine-tune how your metric values are displayed. Each of these settings appears on both the **Primary Metric** and **Secondary Metric** editors, so the two values can be formatted independently: * **Format Style:** Decimal (default), Percent, Percent Fixed, or Currency - choose the best format for your data. * **Currency Code:** The ISO 4217 code of the currency to display, such as `USD` for the US dollar. Only applies when **Format Style** is set to `Currency`. * **Currency Display As:** Display the currency as its Symbol (default), Code, or Name. Only applies when **Format Style** is set to `Currency`. * **Value Sign:** Negative (default) or positive - control which sign is displayed in front of the value. * **Digits:** Specify the minimum number of integer digits, plus the minimum and maximum number of fraction digits. * **Significant Digits:** Set a minimum and maximum number of significant digits to round to for readability. * **Show Trend Color:** Use color to instantly indicate positive (green) or negative (red) trends * **Trend Icon:** Add a Dynamic, Arrow, or Caret icon indicating the trend direction of the value. Only applies when **Show Trend Color** is enabled. * **Trend Breakpoint Value:** The number at which the value is considered neutral. Works together with **Show Trend Color** and **Trend Icon**, and only applies when **Show Trend Color** is enabled. The **Secondary Metric** editor adds one setting of its own: * **Position:** Where the secondary value sits relative to the primary value — Bottom, Left, Right (default), or Top. 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. ## Interactions The **On Click** setting makes a metric value clickable and defines what happens when a user clicks it. Set it in the **Primary Metric** and **Secondary Metric** sections of the Metric properties panel in Experience Builder. Each value is configured independently, and a value with no **On Click** interaction stays plain, non-clickable text. Here are the available interactions for the Metric component: * [Show Toast](/experience-cloud/properties-panel/interactions/show-toast.md) * [Navigate](/experience-cloud/properties-panel/interactions/navigate.md) * [Open Alert Modal](/experience-cloud/properties-panel/interactions/open-alert-modal.md) * [Open Confirm](/experience-cloud/properties-panel/interactions/open-confirm.md) * [Open Flow Dialog](/experience-cloud/properties-panel/interactions/open-flow-dialog.md) * [Download](/experience-cloud/properties-panel/interactions/download.md) ### Primary Metric Click Fires when a user clicks the primary metric value. Use this to navigate to a detail page, open a flow, or drive any logic tied to the primary value. ### Secondary Metric Click Fires when a user clicks the secondary metric value. Use this to trigger a separate action for the secondary value — for example, sending users to a different report than the primary value does. ## Styling {% tabs %} {% tab title="Alignment" %} Set the **Alignment** and **Secondary Alignment** of the metric content. {% endtab %} {% tab title="Label" %} * **Color / Font Size / Font Style / Font Weight / Line Clamp:** Style the label text. {% endtab %} {% tab title="Description" %} * **Color / Font Size / Font Style / Font Weight / Line Clamp:** Style the description text. {% endtab %} {% tab title="Value" %} * **Color / Font Size / Font Style / Font Weight / Line Height:** Style the primary value. {% endtab %} {% tab title="Prefix & Suffix" %} * **Color / Font Size / Font Style / Font Weight:** Style the primary prefix and suffix. {% endtab %} {% tab title="Secondary Value" %} * **Color / Font Size / Font Style / Font Weight:** Style the secondary value, prefix, and suffix. {% endtab %} {% tab title="Trend" %} * **Negative / Neutral / Positive Color:** Set the trend colors for the primary value. * **Secondary Trend:** Set the color, background color, and radius for negative, neutral, and positive secondary trends. {% endtab %} {% tab title="Avatar" %} * **Icon Background / Foreground Color, Border, Initials, Vertical Alignment:** Style the metric avatar. {% endtab %} {% endtabs %} ## Use Cases ### Example 1: Account Won Opportunity Amount {% @arcade/embed url="" flowId="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="/pages/TlmCN42YtRjgk8LssNhe" %} [AX - Profile Card](/experience-cloud/experience-components/ax-profile-card.md) {% endcontent-ref %} {% content-ref url="/pages/tZIFwakLsMzdOlpBGQ4X" %} [AX - Record Detail](/experience-cloud/experience-components/ax-record-detail.md) {% endcontent-ref %} *** ### Example 2: Account Open Cases {% @arcade/embed url="" flowId="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 %} --- # 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/experience-cloud/experience-components/ax-metric.md?ask=&goal= ``` `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.