KPI Component
Overview
The KPI component is a Centauri v1.0 component that lets Creators display KPIs (key performance indicators) to measure and present a key metric in an application. For example, you can display the number of submissions or a net sales dollar value on your dashboard.
You can find the KPI component under the Charts & Graphs group to the left of the Module Builder.
About the Configuration Window
To learn more about general component settings, view our General Component Settings article.
Display Panel
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}. |
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.
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 component.
1. | In the Module Builder, drag and drop a ![]() |
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 |
4. | Click Save Component. |
Configure the Hidden Component
This Hidden component stores the number of submissions. Your KPI component references this data to display to the end-user.
1. | Drag and drop a Hidden component onto the canvas, placing it below your dtUserSubmissionData ![]() |
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 Data Workflow component onto the canvas, placing it between the dtUserSubmissionData ![]() |
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 ![]() |
Configure the Input Operator
1. | Drag and drop an Input operator onto your Data 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 Size operator onto your Data 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 Input operator to the input port (left) of the Submission Size Size operator. |
Configure the Output Operator
1. | Drag and drop an Output operator onto the Data 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 Size operator to the input port (left) of the kpiData Output operator. |
4. | Click Save Component. |
Here's how the completed Data Workflow canvas looks:
Configure the KPI Component
Lastly, use a KPI component to display the total number of submissions.
1. | Drag and drop a ![]() |
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 Data Table component.
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.