Calculator Component
Estimated Reading Time: 7 minutes
Overview
The Calculator component is a logic tool used with two or more components to carry out a calculation. A simple use of a Calculator is to add numbers from two different fields.
- Concatenating (or joining) two or more values.
- Performing advanced calculations involving several components.
- Calculating duration.
- Pushing data from one component to another.
As you can see, the Calculator component is a versatile tool in your Unqork arsenal. To configure your Calculator component:
1. | Enter your input components, and assign them simple aliases. |
2. | Create a formula using your defined aliases. |
3. | Set an output component to hold the result of your calculation. |
You can find the Calculator component in the Data & Events Processing group to the left of the Module Builder.
What You'll Learn
After completing this article, you’ll know when to use a Calculator component, how to configure its settings, and how to use it in an Unqork application.
About the Configuration Window
TIP To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.
Display Panel
Field Text
Setting |
Description |
---|---|
Canvas Label Text |
A component’s 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 Module Builder. 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. NOTE For the Calculator component, it's best practice to use the same value for Canvas Label Text as your Property ID:calcXxx. |
Adding a Calculator Component
For this example, let's look at an inventory count for a high-end outfitter. To create this application, you'll use four Number fields for inventory counts. Then, you'll add a Calculator to calculate the total.
In this configuration, you need the following components:
-
4 Number components
-
1 Calculator component
Configure the Number Components
Think of your Number components as buckets for the number of small, medium, and large clothing items you have in inventory. These components act as inputs for your Calculator component. Then you need a final Number component to hold the calculated total.
1. | In the Module Builder, drag and drop four Number components onto your canvas. |
small |
Small |
medium |
Medium |
large |
Large |
total |
Total |
3. | Click Save & Close for each component as you add it. |
Configure the Calculator Component
Now that you have a spot for each inventory count, use a Calculator component to add them together. Set each Number component as an input, then enter the logic behind your sum calculation.
1. | Drag and drop a Calculator component onto your canvas, placing it below your Number components. |
3. | Set the Trigger Type to Watch. Watch means that the Calculator continually looks for values entered in the input components. |
4. | Complete the Inputs table as follows: |
Property ID |
Alias |
Required |
---|---|---|
small |
S |
No (clear) |
medium |
M |
No |
large |
L |
No |
5. | In the Outputs table, enter the following: |
Property ID |
Formula |
---|---|
total |
=SUM(S,M,L) |
Your Calculator configuration is complete. Next, use the Unit Testing tool to ensure it works as expected.
1. | Click Create Test. |
2. | In the Value column of the Input Table Enter inputs components and actions you want the component to perform., enter sample numeric values. |
3. | Click Run Test. The sum of your sample values shows in the Actual column of the Output Table. |
4. | Click Save & Close. |
5. | Save your module. |
Preview your module in Express View Express View is how your end-user views you 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., and test it out:
Resources