Calculator Component

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. But a Calculator component can do far more than simple addition. Here are some other examples of its uses:

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:

Enter your input components, and assign them simple aliases.

Create a formula using your defined aliases.

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

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. For the Calculator component, it's best practice to use the same value for Canvas Label Text as your Property ID:calcXxx.

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.

For the Calculator component, it's best practice to use the same value for Canvas Label Text as your Property ID:calcXxx.

Actions Panel

Triggers

Setting	Description
Trigger Type	This setting provides the following options: Manual: The component fires when triggered by another component. For example, when using a Button or Initializer component to trigger a Plug-In component. By default, this Trigger Type is selected. Watch: The component fires when there's any action taken on the input listed in the Inputs table. Actions include entering a new value, editing, or overwriting a saved value. If there are multiple inputs, use the Required setting to specify what inputs must be present before firing.
Inputs & Outputs	Displays the current Inputs and Outputs for this component. Click Edit to access the Inputs & Outputs tables.
Post Trigger	The Property ID of the component that triggers after all the outputs are set.

Setting

Description

Trigger Type

This setting provides the following options:

Manual: The component fires when triggered by another component. For example, when using a Button or Initializer component to trigger a Plug-In component.

By default, this Trigger Type is selected.

Watch: The component fires when there's any action taken on the input listed in the Inputs table. Actions include entering a new value, editing, or overwriting a saved value. If there are multiple inputs, use the Required setting to specify what inputs must be present before firing.

Inputs & Outputs

Displays the current Inputs and Outputs for this component.

Click Edit to access the Inputs & Outputs tables.

Post Trigger

The Property ID of the component that triggers after all the outputs are set.

Inputs

Setting	Description
Property ID	The Source column is where you enter inputs for your logic component to reference. Examples of supported inputs include: The Property ID of another component in the module. Examples include a component that acts as a trigger, an input for a Micro Decision, or a referenced formula. When using a Watch Trigger Type, enter all inputs the component must watch for in the Property ID column. You can use dot notation In Unqork, Dot Notation accesses the properties of an object. The object's name comes before the period, and the property comes after. For example, to reference just the City from an Address Search component, you would enter "address.city". to reference values nested under a Property ID in the submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.. Values that are not the Property ID of a component in the module, but are still present in the submission object. For example, the currentUser object contains information about the end-user. Native values generated by the Unqork Designer Platform. For example, buttonClick. This Unqork value is created following button-click events.
Alias	To simplify the configuration, give each component an alias. An easy approach is to assign each component a different letter of the alphabet. For example, A, B, C.
Required	This setting sets the input as mandatory. That way, your calculation cannot take place without this input.

Setting

Description

Property ID

The Source column is where you enter inputs for your logic component to reference. Examples of supported inputs include:

The Property ID of another component in the module. Examples include a component that acts as a trigger, an input for a Micro Decision, or a referenced formula.

When using a Watch Trigger Type, enter all inputs the component must watch for in the Property ID column.

You can use dot notation In Unqork, Dot Notation accesses the properties of an object. The object's name comes before the period, and the property comes after. For example, to reference just the City from an Address Search component, you would enter "address.city". to reference values nested under a Property ID in the submission data Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections..

Values that are not the Property ID of a component in the module, but are still present in the submission object. For example, the currentUser object contains information about the end-user.
Native values generated by the Unqork Designer Platform. For example, buttonClick. This Unqork value is created following button-click events.

Alias

To simplify the configuration, give each component an alias. An easy approach is to assign each component a different letter of the alphabet. For example, A, B, C.

Required

This setting sets the input as mandatory. That way, your calculation cannot take place without this input.

Outputs

Setting	Description
Property ID	For your logic component to recognize an output, you must enter the destination component's Property ID(s). The Property ID entered must match the Property ID of the component that acts as the output. Remember, use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. without spaces or punctuation. This is most commonly a Text Field, Number, or Hidden component.
Formula	Enter your calculation using an input component's alias instead of its Property ID. For example, summing two components with aliases A and B looks like the following: =(A+B). The Formula field works with most Excel formulas. To learn more about Calculator formulas, see our Supported Formulas article.

Setting

Description

Property ID

For your logic component to recognize an output, you must enter the destination component's Property ID(s).

The Property ID entered must match the Property ID of the component that acts as the output. Remember, use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. without spaces or punctuation.

This is most commonly a Text Field, Number, or Hidden component.

Formula

Enter your calculation using an input component's alias instead of its Property ID. For example, summing two components with aliases A and B looks like the following: =(A+B). The Formula field works with most Excel formulas.

To learn more about Calculator formulas, see our Supported Formulas article.

Advanced Panel

Setting	Description
Set Execution	Select if and what is executed when this component triggers.
Disable Execution	If Disable Execution is set to (ON), the logic tied to this component does not execute. Use this to keep the component's settings, but disable the operations it performs. By default, this setting is set to (OFF).
Set Debounce	The number of milliseconds that pass before the form loads this component. For larger modules, increasing the debounce value prevents the Decisions component from triggering before all components load in.

Setting

Description

Set Execution

Select if and what is executed when this component triggers.

Disable Execution

If Disable Execution is set to (ON), the logic tied to this component does not execute. Use this to keep the component's settings, but disable the operations it performs.

By default, this setting is set to (OFF).

Set Debounce

The number of milliseconds that pass before the form loads this component. For larger modules, increasing the debounce value prevents the Decisions component from triggering before all components load in.

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.

In the Module Builder, drag and drop four

Number components onto your canvas.

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 the following:

Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.	Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.
small	Small
medium	Medium
large	Large
total	Total

Click Save Component for each component as you complete 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.

Drag and drop a

Calculator component onto your canvas, placing it below the four

Number components.

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

In the 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 . field, enter calcTotal.

Set the Trigger Type to

Watch. Watch means that the Calculator continually looks for values entered in the input components.

To the right of Inputs & Outputs, click Edit.

Complete the Inputs table as follows:

Source	Alias	Required
small	S	☐ (unchecked)
medium	M	☐ (unchecked)
large	L	☐ (unchecked)

In the Outputs table, enter the following:

Source	Formula
total	=SUM(S,M,L)

To discover more formulas, view our Supported Formulas page.

Click Save Component.

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., and test it out:

Resources

Overview

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:

Enter your input components, and assign them simple aliases.

Create a formula using your defined aliases.

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

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.