> ## Documentation Index
> Fetch the complete documentation index at: https://www.domo.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Create a KPI Component in App Studio
export const BetaNote = ({generic = false}) =>
Note:{" "}
{generic ? "" : "This feature is in beta. "}
Beta Program participants can enable features{" "}
here. To join the
Beta Program, fill out{" "}
this form. For beta
questions or feedback, email{" "}
beta.admin@domo.com.
;
## Intro
This article explains how to add a KPI component from a template and configure a metric with an aggregation, date range, filter, and formatting.
To group and aggregate data in other app components, see [Group and Aggregate Data in App Components](/docs/s/article/Group-and-Aggregate-Data-in-App-Components).
***
## Required Grants
To access app components, the following grants must be enabled for your role:
* **Edit App (App Studio) —** Allows you to edit App Studio pages within App Studio.
* **Edit Cards —** Allows you to edit Cards in Domo.
Learn more about [grants](/docs/s/article/360043438973).
## Add a KPI Component
A KPI component displays one or more headline metrics—such as Total Revenue or Average Deal Size—computed directly from a DataSet column. You add a KPI component from a template, then power and configure each of its Number widgets.
1. In the App Studio app editor, select **Components** in the left pane.
2. Select the **KPI** template.
3. Select one of the three KPI templates.
4. Select the power icon and choose a DataSet to power the component.
Each template comes with Number widgets already in place, ready to point at your columns.
The three templates arrange their metrics differently:
| Template | Layout | Use when |
| -------- | -------------------------------------- | ------------------------------------------------------------------------------- |
| KPI 1 | Square grid of up to four peer metrics | You want several peer-level metrics and no single number should dominate. |
| KPI 2 | Hero metric left, grid right | You want one headline metric to lead, followed by a supporting breakdown. |
| KPI 3 | Grid left, hero metric right | You want the breakdown to build up to a total shown as the payoff on the right. |
## Configure a KPI Metric
Each metric is a Number widget that you configure in the right pane—column, aggregation, filter, and formatting. Configure each widget independently.
1. Select a Number widget in the widgets pane.
The widget's options open in the right pane.
2. Select the **Column** that powers the metric, then choose the aggregation in the popover.
3. Select an **Aggregation**:
| Aggregation | Applies to | Notes |
| -------------- | ----------------------- | ---------------------------- |
| Sum | Numeric columns | Default for numeric measures |
| Average | Numeric columns | |
| Count | Any column | Counts non-null values |
| Min | Numeric or date columns | |
| Max | Numeric or date columns | |
| Distinct Count | Any column | Counts unique values |
4. (Optional) Filter the metric:
* By date: select a date range, such as this week or this year.
* By column: add a column filter, such as Region *is* North.
5. Format the value. Set the display type (Currency, Number, or Percent), decimal places, thousands separator, and abbreviation (for example, 1.23K or 8.10B).
6. (Optional) To reuse a metric, duplicate its widget from the right pane, then change the setting you want, such as the filter value.
7. Save your app component.
**Note:** Each widget's filter is independent, so the same measure can appear several ways in one component from a single DataSet—for example, one widget per region.
## FAQ
No. A KPI component aggregates a column at query time, so you can display a total, average, or count without building a Beast Mode calculation or a separate aggregated DataSet.
Yes. Aggregations are computed only over the rows a viewer is permitted to see, so Personalized Data Permissions (PDP) policies apply. Two viewers with different PDP scopes can see different totals from the same metric definition. Learn how to apply a PDP policy to a DataSet in [Personalized Data Permissions (PDP)](/docs/s/article/360042934614).
The metric displays a defined empty state rather than an error. Adjust the aggregation, filter, or date range to return data.
Yes. Apply a rule to the value with conditional formatting. See [Apply Conditional Formatting and Conditional Rendering in App Components](/docs/s/article/Apply-Conditional-Formatting-and-Conditional-Rendering-in-App-Components).