---
title: "KPI Component"
slug: "kpi-component"
updated: 2025-12-04T19:38:01Z
published: 2025-12-04T19:38:01Z
canonical: "docs.unqork.io/kpi-component"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# KPI Component

UDesignerClassic Designer

The **KPI component** is a component that lets Creators display KPIs (key performance indicators) to measure and present a key metric in an [application](/v1/docs/introduction-to-unqork-applications). For example, you can display the number of [submissions](/v1/docs/submission-data) or a net sales dollar value on your dashboard.

You can find the KPI component under the [Charts & Graphs](/v1/docs/charts-graphs) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

### Field Text

[![A static image displaying the Kpi component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(18).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(20).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

| Setting | Description |
| --- | --- |
| **Label** | The Label conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Formatting

| Setting | Description |
| --- | --- |
| **KPI Title** | The title that displays above the KPI widget in Express View. |
| **KPI Format** | Adds a prefix or suffix to your KPI widget. To set the KPI format, enter {Prefix}X{Suffix}. |

## Data Panel

### Inputs

[![A static image displaying the Kpi component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0(13).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(16).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

| Setting | Description |
| --- | --- |
| **Inputs** | Enter the Property ID where you stored your value. Your KPI widget displays the value you enter into the Inputs table. > [!WARNING] > The KPI widget can only display the value of a single key/value pair. |

## Advanced Panel

### Additional Styling

[![A static image displaying the Kpi component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(17).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(19).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

| **Setting** | **Description** |
| --- | --- |
| KPI Box Height (in px) | Enter a value (in pixels) to set the box height of your KPI widget. |
| KPI Icon | Add an icon for your KPI widget by entering the icon class string. For example, to use Font Awesome US dollar icon, enter `fa fa-usd.` > Discover font-awesome for your application by visiting [https://fontawesome.com/](https://fontawesome.com/). |
| KPI Background Color | Use this drop-down to set a background color for your KPI widget. Your local style sheet determines the color options available in your KPI Background Color Options menu. 1. Preview your module in Express View. 2. If the previous bar does not display, in the top-right corner of the page, select **Show**. 3. From the **Preview Styl**e drop-down, select your style sheet. |
| KPI Text Color | Select the text color you want to display in your KPI widget. |

## Adding a KPI Component

For this example, create an application that displays the total customer submissions to the end-user. Use a Data Workflow component to sum the number of submissions in a submission data set. Then, display that number on your application using a KPI widget.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Data Table Component

Begin by adding the example submission data to a [Data Table](/v1/docs/data-table-component) component.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID field, enter **dtUserSubmissionData**.
3. In the data table, enter the following:

|  | A | B |
| --- | --- | --- |
| **1** | **name** | **status** |
| **2** | Robert | Denied |
| **3** | Ebony | Approved |
| **4** | Kaylin | Denied |
| **5** | Rachelle | Approved |
| **6** | Trevor | Pending |
| **7** | Kenya | Approved |
| **8** | Madison | Denied |
| **9** | Keshawn | Pending |
| **10** | Emie | Approved |

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dtUserSubmissionData_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dtUserSubmissionData.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)
4. Click **Save Component**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the number of submissions. Your KPI component references this data to display to the end-user.

1. Drag and drop a **H****idden** component onto the canvas, placing it below your **dtUserSubmissionData** **Data Table** component.
2. In the Property ID and Label Text fields, enter `kpiData`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Use a Data Workflow component to output the number of submissions from the Data Table component. Once your Data Workflow factors the number of submissions, it stores it in your Hidden component.

1. Drag and drop a **D****ata Workflow** component onto the canvas, placing it between the **dtUserSubmissionData** **Data Table** and **kpiData** **H****idden** components.
2. In the Property ID field, enter **dwfKpi**.
3. In theCanvas Label Text, enter `dwfKpi`.
4. Navigate to the **Actions** settings
5. Set the **Trigger Type** to ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(12).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D) **Watch**.

#### Configure the Input Operator

1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Input |
| Component | dtUserSubmissionData |
| Required | Yes |
| Source | Default |

#### Configure the Size Operator

1. Drag and drop a **S****ize** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Size |
| Label | Submission Size |
| Preserve Argument Type | ☐ (**unchecked**) |
3. Connect the output port (right) of the **dtUserSubmissionData** **I****nput** operator to the input port (left) of the **Submission Size** **S****ize** operator.

#### Configure the Output Operator

1. Drag and drop an **O****utput** operator onto the **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Info |
| --- |
| Category | Output |
| Component | kpiData |
| Action | value |
3. Connect the output port (right) of the **Submission Size** **S****ize** operator to the input port (left) of the **kpiData** **O****utput** operator.
4. Click **Save Component**.

Here's how the completed Data Workflow canvas looks:

[![A static image displaying the Data Workflow's configuration and the Watch Trigger Type selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfKpi_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfKpi.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

### Configure the KPI Component

Lastly, use a KPI component to display the total number of submissions.

1. Drag and drop a **KPI** component onto the canvas, placing it below the **kpiData** **H****idden** component.
2. In the Property ID and Label Text fields, enter `kpiSubmissions`.
3. In the **KPI Title** field, enter `Total Submissions`.
4. Navigate to the **Data** settings.
5. From the **Inputs** drop-down, enter or select kpiData.
6. Navigate to the **Advanced** settings.
7. In the **KPI Box Height** field, enter `200`.
8. Click **Save Component**.
9. **Save** your module.

**Preview** your module in Express View to view the total number of submissions. The value is nine because you added nine rows of values to the **dtUserSubmissionData** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(10).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)Data Table** component.

[![A static image displaying the completed configuration in Express View.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_Express_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20Express.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

The **KPI component** is a component that lets Creators display KPIs (key performance indicators) to measure and present a key metric in an [application](/v1/docs/introduction-to-unqork-applications). For example, you can display the number of [submissions](/v1/docs/submission-data) or a net sales dollar value on your dashboard.

You can find the KPI component under the [Charts & Graphs](/v1/docs/welcome-to-the-charts-amp-graphs-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder).

## About the Configuration Window

> To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article.

## Display Panel

[![A static image displaying the KPI component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

### Field Text

| Setting | Description |
| --- | --- |
| **Label** | The Label conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. |

### Formatting

| Setting | Description |
| --- | --- |
| **KPI Title** | The title that displays above the KPI widget in Express View. |
| **KPI Format** | Adds a prefix or suffix to your KPI widget. To set the KPI format, enter **{Prefix}X{Suffix}**. |

## Data Panel

[![A static image displaying the KPI component's Data settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

### Inputs

| Setting | Description |
| --- | --- |
| **Inputs** | Enter the Property ID where you stored your value. Your KPI widget displays the value you enter into the Inputs table. > [!WARNING] > The KPI widget can only display the value of a single key/value pair. |

## Advanced Panel

[![A static image displaying the KPI component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

### Additional Styling

| **Setting** | **Description** |
| --- | --- |
| KPI Box Height (in px) | Enter a value (in pixels) to set the box height of your KPI widget. |
| KPI Icon | Add an icon for your KPI widget by entering the icon class string. For example, to use Font Awesome US dollar icon, enter `fa fa-usd.` > Discover font-awesome for your application by visiting [https://fontawesome.com/](https://fontawesome.com/). |
| KPI Background Color | Use this drop-down to set a background color for your KPI widget. Your local style sheet determines the color options available in your KPI Background Color Options menu. 1. Preview your module in Express View. 2. If the previous bar does not display, in the top-right corner of the page, select **Show**. 3. From the **Preview Styl**e drop-down, select your style sheet. |
| KPI Text Color | Select the text color you want to display in your KPI widget. |

## Adding a KPI Component

For this example, create an application that displays the total customer submissions to the end-user. Use a Data Workflow component to sum the number of submissions in a submission data set. Then, display that number on your application using a KPI widget.

> [!NOTE]
> These instructions assume that you have an open module saved with a title.

### Configure the Data Table Component

Begin by adding the example submission data to a [Data Table](/v1/docs/data-table-component) component.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the Property ID and Canvas Label Text fields, enter **dtUserSubmission Data**.
3. To the left of the component's configuration window, click **D****ata**.
4. In the data table, enter the following:

|  | A | B |
| --- | --- | --- |
| 1 | name | status |
| 2 | Robert | Denied |
| 3 | Ebony | Approved |
| 4 | Kaylin | Denied |
| 5 | Rachelle | Approved |
| 6 | Trevor | Pending |
| 7 | Kenya | Approved |
| 8 | Madison | Denied |
| 9 | Keshawn | Pending |
| 10 | Emie | Approved |

[![A static image displaying the completed configuration of the Data Table component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_DT_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20DT.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)
5. Click **Save & Close**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component stores the number of submissions. Your KPI component references this data to display to the end-user.

1. Drag and drop a **H****idden** component onto the canvas, placing it below your **dtUserSubmissionData** **Data Table** component.
2. In the Property ID and Canvas Label Text fields, enter **kpiData**.
3. Click **Save & Close**.

### Configure the Data Workflow Component

Use a Data Workflow component to output the number of submissions from the Data Table component. Once your Data Workflow factors the number of submissions, it stores it in your Hidden component.

1. Drag and drop a **D****ata Workflow** component onto the canvas, placing it between the **dtUserSubmissionData** **Data Table** and **kpiData** **H****idden** components.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfKpi`.
3. From the **Trigger Type** drop-down, select **Watch**.

#### Configure the Input Operator

1. Drag and drop an **I****nput** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtUserSubmissionData |
| Required | Yes |
| Source | Default |

#### Configure the Size Operator

1. Drag and drop a **S****ize** operator onto your **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Size |
| Label | Submission Size |
3. Connect the output port (right) of the **dtUserSubmissionData** **I****nput** operator to the input port (left) of the **Submission Size** **S****ize** operator.

#### Configure the Output Operator

1. Drag and drop an **O****utput** operator onto the **D****ata Workflow** canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | kpiData |
| Action | value |
3. Connect the output port (right) of the **Submission Size** **S****ize** operator to the input port (left) of the **kpiData** **O****utput** operator.
4. Click Save.

Here's how the completed Data Workflow canvas looks:

[![A static image displaying the Data Workflow's configuration and the Watch Trigger Type selected.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfKpiClassic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dwfKpiClassic.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

### Configure the KPI Component

Lastly, use a KPI component to display the total number of submissions.

1. Drag and drop a **KPI** component onto the canvas, placing it below the **kpiData** **H****idden** component.
2. In the Property ID and Label Text fields, enter `kpiSubmissions`.
3. In the **KPI Title** field, enter `Total Submissions`.
4. To the left of the component's configuration window, click the **D****ata** tab.
5. From the **Inputs** drop-down, select or enter kpiData.

[![A static image of the configured Property ID, Label, KPI Title, and the selected kpiData Input.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_DataConfig_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20DataConfig.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)
6. To the left of the component's configuration window, click the **![Advanced Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_teal_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D) Advanced** tab.
7. In the **KPI Box Height** field, enter `200`.
8. Click **Save & Close**.
9. **Save** your module.

**Preview** your module in Express View to view the total number of submissions. The value is nine because you added nine rows of values to the **dtUserSubmissionData** **![Dropdown Component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_table_teal_component(10).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)Data Table** component.

[![A static image displaying the completed configuration in Express View.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI_Express_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/KPI%20Express.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

## Structure of a KPI Component's Data

The KPI data uses an input Property ID to display a value of a single key/value pair.

[![A static image displaying the completed configuration in Express View and the data structure in Console view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dataStructure(2).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A11Z&se=2026-11-09T04%3A51%3A11Z&sr=c&sp=r&sig=3xb5kUE2L5iwOAoFSQ5KkFdQ172GD4R2pr5K6CXKgig%3D)

## Resources

- [Modify the KPI component using the toolbar settings](/v1/docs/component-toolbar-settings).
- [Data Table Component](/v1/docs/data-table-component).
- [Data Workflow Component](/v1/docs/data-workflow-component).
- [Get help in the Community Hub](https://community.unqork.com/search?q=kpi).

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

A quanitifiable measure of performance of a specific objective for a specified time.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .