KPI Component

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Panel

Field Text

A static image displaying the Kpi component's Display settings.

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

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.

Setting

Description

Inputs

Enter the Property ID where you stored your value. Your KPI widget displays the value you enter into the Inputs table.

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.

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

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.
To preview different style sheets: 

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 Style 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 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.. 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 Dropdown Component IconData Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. 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.

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 Dropdown Component IconData Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 Dropdown Component IconData Table and kpiData Hidden components.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dwfKpi.
3. In theCanvas Label Text 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 ., enter dwfKpi.
4. Navigate to the Actions settings
5. Set the Trigger Type to Inline image displaying a selected radio button. Watch.

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:

A static image displaying the Data Workflow's configuration and the Watch Trigger Type selected.

Configure the KPI Component

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

1. Drag and drop a KPI Icon KPI component onto the canvas, placing it below the kpiData Hidden component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 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. to view the total number of submissions. The value is nine because you added nine rows of values to the dtUserSubmissionData Dropdown Component IconData Table component.

A static image displaying the completed configuration in Express View.

About the Configuration Window

To learn more about general component settings, view our General Component Settings article.

Display Panel

A static image displaying the KPI component's Display settings.

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

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.

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.

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.

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

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.

To preview different style sheets: 

1. Preview your module in Express View 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..
2. If the previous bar does not display, in the top-right corner of the page, select Show.
3. From the Preview Style 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 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.. 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 Dropdown Component IconData Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter dtUserSubmission Data.
3. To the left of the component's configuration window, click Data.
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.

5. Click Save & Close.

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 Dropdown Component IconData Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text 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 . 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 Data Workflow component onto the canvas, placing it between the dtUserSubmissionData Dropdown Component IconData Table and kpiData Hidden 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 Input operator onto your Data 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 Size operator onto your Data 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 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:

Setting

Value

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.

Here's how the completed Data Workflow canvas looks:

A static image displaying the Data Workflow's configuration and the Watch Trigger Type selected.

Configure the KPI Component

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

1. Drag and drop a KPI Icon KPI component onto the canvas, placing it below the kpiData Hidden component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter kpiSubmissions.
3. In the KPI Title field, enter Total Submissions.
4. To the left of the component's configuration window, click the Data 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.

6. To the left of the component's configuration window, click the Advanced Icon 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 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. to view the total number of submissions. The value is nine because you added nine rows of values to the dtUserSubmissionData Dropdown Component IconData Table component.

A static image displaying the completed configuration in Express View.

 

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.