LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Installation & License Management
    • Quick Start Guide
    • Learning the Basics
    • Reactive Data Components
  • Experience Components
    • 🖼️View All Components
    • Accordion
    • Accordion Section
    • Alert
    • Audio
    • Avatar
    • Avatar Group
    • Banner
    • Bar Code
    • Blockquote
    • Button
    • Button Dialog
    • Button Group
    • Button Menu
    • Calendar
    • Card
    • Chip Container
    • Container
    • Data Table
    • Feed
    • Gallery
    • Icon
    • Illustration
    • Image
    • Kanban
    • Language Selector
    • Layout
    • List
    • Map
    • Media Object
    • Metric
    • Navigation
    • Profile Card
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Publisher
    • Record Detail
    • Separator
    • Tabs
    • Text Block
    • Timeline
    • Video
  • Properties Panel
    • Appearance
    • Interactions
      • Show Toast
      • Navigate
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
  • Tutorials
    • General
      • Expressions for Aura Sites
      • Expressions for LWR Sites
    • Components
      • Banner
        • With Illustration and Buttons
        • With Content centered
      • Card
        • Creating a MapCard Showcase
      • Data Table
        • Configuring the Data Table to display current related record information
        • Displaying Salesforce CMS Files in a Data Table
      • Image
        • Utilizing Avonni Image Component for Before-and-After Image Comparisons
      • Layout
        • Configuring the Layout to be responsive
      • Map
        • Set up the map to show record details information
      • Profile Card
        • Set up the Profile Card to display current user information
      • Tabs
    • Interactions
      • Configure the Open Flow Dialog to open a flow by clicking a button
    • Reactive Components
      • Interactive Map
      • Linked Data Tables
      • Guide to Implementing
    • Use Cases
      • Building a record detail page header
      • Creating a MapCard Showcase
      • Creating a Grid Layout
      • Utilizing Avonni Image Component for Before-and-After Image Comparisons
  • HELP
    • How do I contact support?
    • How do I report bugs?
    • Release Notes
    • Security
Powered by GitBook
On this page
  • Overview
  • Configuration Options
  • Label
  • Description
  • Value
  • Secondary Value
  • Prefix & Suffix
  • Tooltip
  • Avatar
  • Primary & Secondary Metric Formatting

Was this helpful?

  1. Experience Components

Metric

Last updated 11 months ago

Was this helpful?

LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service

Overview

The Avonni Metric component is your gateway to showcasing key performance indicators (KPIs), statistical summaries, or any numerical data you deem essential directly within your Experience Cloud sites. With its intuitive configuration options, this component empowers you to present critical information clearly, concisely, and visually engagingly.

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.

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.

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.

Example: Counting New Accounts Created This Year