For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

spinner

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

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.

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.

Styling

Set the Alignment and Secondary Alignment of the metric content.

  • Color / Font Size / Font Style / Font Weight / Line Clamp: Style the label text.

  • Color / Font Size / Font Style / Font Weight / Line Clamp: Style the description text.

  • Color / Font Size / Font Style / Font Weight / Line Height: Style the primary value.

  • Color / Font Size / Font Style / Font Weight: Style the primary prefix and suffix.

  • Color / Font Size / Font Style / Font Weight: Style the secondary value, prefix, and suffix.

  • 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.

  • Icon Background / Foreground Color, Border, Initials, Vertical Alignment: Style the metric avatar.

Use Cases

Example 1: Account Won Opportunity Amount

spinner

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

1

Add the component to your page

Drag the AX – Metric component into Experience Builder on your Account detail page.

2

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

3

Apply filters

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

  • Account ID: {!Item.Id}

  • Stage: Closed Won

4

Customize the display

  • Set the Label to Won Amount

  • Set the Avatar Icon to standard:opportunity

5

Preview your component

  • Use the Experience Builder preview to confirm the metric renders correctly before publishing.


AX - Profile CardAX - Record Detail

Example 2: Account Open Cases

spinner

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

1

Add the component to your page

Drag the AX – Metric component into Experience Builder on your Account detail page.

2

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

3

Apply filters

  • Scope the query to the current account and open cases only:

    • Account ID: {!Item.Id}

    • Closed: false

4

Customize the display

  • Set the Label to Open Cases

5

Preview your component

  • Use the Experience Builder preview to confirm the count renders correctly before publishing.

Mis à jour

Ce contenu vous a-t-il été utile ?