--- title: "Calculator Component" slug: "calculator-component" updated: 2025-12-04T19:33:48Z published: 2025-12-04T19:33:48Z canonical: "docs.unqork.io/calculator-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. # Calculator Component UDesignerClassic Designer 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: 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](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-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](/v1/docs/general-component-settings) article. ### Display Panel #### Field Text | Setting | Description | | --- | --- | | **Canvas Label Text** | A component’s Label Text indicates the purpose of the corresponding field or component. For non-input components, the 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. | [![A static image displaying the UDesigner Calculator Component's Display Field Text settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) ### 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](/v1/docs/button-component) or [Initializer](/v1/docs/initializer-component) component to trigger a [Plug-In](/v1/docs/plug-in-component) 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](/v1/docs/calculator-component#Inputs) and [Outputs](/v1/docs/calculator-component#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. | #### [![A static image displaying the UDesigner Calculator component's Triggers settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Actions_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Actions.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Inputs [![A static image displaying the UDesigner Calculator's Inputs table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Actions_Inputs_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Actions%20Inputs.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) | 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. > [!NOTE] > When using a Watch Trigger Type, enter all inputs the component must watch for in the Property ID column. - > [!TIP] > You can use to reference values nested under a Property ID in the submission data. - 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 [![A static image displaying the UDesigner Calculator's Outputs table.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Actions_Outputs_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Actions%20Outputs.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) | 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 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. > [!NOTE] > To learn more about Calculator formulas, see our [Supported Formulas](/v1/docs/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 A toggle switch indicating an on/off state for a user interface element. (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 A toggle switch in the 'on' position, indicating an active setting or feature. (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.

 [![A static image displaying the Udesigner Calculator's Advanced Settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) ## 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](/v1/docs/number-component) 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 **N****umber** components onto your canvas. 2. In the Property ID and Label Text fields, enter the following: | Property ID | Label Text | | --- | --- | | **small** | Small | | **medium** | Medium | | **large** | Large | | **total** | Total | 3. 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. 1. Drag and drop a **Calculator** component onto your canvas, placing it below the four **N****umber** components. 2. In the Property ID field, enter **calcTotal**. 3. In the Canvas Label Text field, enter `calcTotal`. 4. Set the **Trigger Type** to **Watch**. Watch means that the Calculator continually looks for values entered in the input components. 5. To the right of **Inputs & Outputs**, click Edit. 6. Complete the **Inputs** table as follows: | **Source** | **Alias** | **Required** | | --- | --- | --- | | small | S | ☐ (**unchecked**) | | medium | M | ☐ (**unchecked**) | | large | L | ☐ (**unchecked**) | 7. In the **Outputs** table, enter the following: | **Source** | **Formula** | | --- | --- | | total | =SUM(S,M,L) | > [!TIP] > To discover more formulas, view our [Supported Formulas](/v1/docs/supported-formulas) page. [![A static image displaying the calcTotal Calculator component's Inputs and Outputs values.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Calculator_Comp_Example_InputsOutputs_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20Calculator%20Comp%20Example%20InputsOutputs.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) 8. Click **Save Component**. 9. **Save** your module. Preview your module in Express View, and test it out: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Use_Case_Gif.mp4?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) 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: 1. 1.Enter your input components, and assign them simple aliases. 2. 2.Create a formula using your defined aliases. 3. 3.Set an output component to hold the result of your calculation. You can find the Calculator component in the [Data & Events Processing](/v1/docs/data-event-processing-components) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Gif.mp4?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) ## 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](/v1/docs/general-component-settings) article. ### Display Panel [![A static image dispaying the Calculator component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_02_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2002.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) #### Field Text | Setting | Description | | --- | --- | | **Canvas Label Text** | A component’s Label Text indicates the purpose of the corresponding field or component. For non-input components, the 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. | ### Actions Panel [![A static image dispaying the Calculator component's Actions settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_03_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2003.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) #### Triggers | Setting | Description | | --- | --- | | **Trigger Type** | This setting provides the following options: - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(8).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) **Manual**: The component fires when triggered by another component. For example, when using a [Button](/v1/docs/button-component) or [Initializer](/v1/docs/initializer-component) component to trigger a [Plug-In](/v1/docs/plug-in-component) component. By default, this Trigger Type is selected. - ![Inline image displaying a selected radio button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(8).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) **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 | 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. > [!NOTE] > When using a Watch Trigger Type, enter all inputs the component must watch for in the Property ID column. > [!TIP] > You can use to reference values nested under a Property ID in the submission data. - 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 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. > [!NOTE] > To learn more about Calculator formulas, see our [Calculator Formulas](/v1/docs/supportedformulas) article. | | **Post Trigger** | The Property ID of the component that triggers after all the outputs are set. | ### Validation Panel [![A static image dispaying the Calculator component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_04_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2004.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) #### Unit Testing The Unit Testing tool lets you confirm your Calculator works as expected. Enter the data you want to test in the Input table, and the results of the test display in the Output table. This is a good way to catch logic errors early. To get started, click Create Test to create a new test. [![A static image of the Decisions Component's Unit Testing settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Decisions_Component_UnitTest_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Decisions%20Component%20UnitTest.jpg?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) | **Setting** | Description | | --- | --- | | **![Up Arrow](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_up_grey_icon(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)** **Close/****![Down Arrow icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/chevron_down_grey_icon(7).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)** **Open Unit Testing** | Collapses or opens the Unit Testing panel. | | **Refresh Fields** | Updates all Input fields to reflect changes on the canvas. | | **Run All Tests** | Runs all added tests with the Input values entered. | | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(33).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) | Additional Unit Testing settings. | | **![Duplicate Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/duplicate_icon(3).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Duplicate** | Makes a copy of an existing test. | | **![Trashcan icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/delete_red_icon(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Delete Test** | Removes an existing test. | | **Run Test** | Runs the test with the Input values entered. | | **Input Table** | Use this table to enter the information you want to test. If you have multiple inputs and want to skip testing certain inputs, leave the **Value** column blank. | | **Input** | Automatically populates all components listed in the Calculator component’s Inputs table. | | **Label** | Automatically populates the label of the connected Input component. | | **Value** | Enter example data in this column that you want to test. > [!NOTE] > If you enter a JSON value with a syntax error (such as a missing bracket), the cell turns yellow, indicating an error scenario. | | **JSON** | Select this checkbox when you enter a Value that's written in JSON. This can be an object, array, number, or Boolean (true/false) value. | | **Output Table** | This table displays the results of your test. | | **Output** | Automatically populates all components listed in the Calculator component's Outputs table. | | **Label** | Automatically populates with the label of your connected Output component. | | **Expected** | Enter the outcome you expect from the test you run. You can use this to compare the expected result with the actual result. > [!NOTE] > This column is optional. If you leave it blank, the cell turns red when the unit test runs. | | **Actual** | The result from the test you ran. | | **JSON** | Select this checkbox when your result must display in JSON. This can be an array, string, or object. | ### Advanced Panel [![A static image dispaying the Calculator component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_05_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2005.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) | Setting | Description | | --- | --- | | **Set Execution** | Select if and what is executed when this component triggers. | | **Disable Execution** | If Disable Execution is set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) **(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 ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) **(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](/v1/docs/number-component) 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 **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/number_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Number** components onto your canvas. 2. In the Property ID and Label Text fields, enter the following: | Property ID | Label Text | | --- | --- | | **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 **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(2).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Calculator** component onto your canvas, placing it below your **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/number_teal_component(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) Number** components. 2. In the Property ID and Canvas Label Text fields, enter calcTotal. 3. Set the **Trigger Type** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Settings_Radio_Button_Icon_Selected.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) **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) | [![A static image displaying the Calculator component's Trigger Type setting, Inputs and Outputs tables.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_06_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2006.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) 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 Inputs table, enter sample numeric values. 3. Click **Run Test**. The sum of your sample values shows in the **Actual** column of the **Output Table**. [![A static image displaying the Calculator component's Test Unit tables.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_08_thumb_0_0.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator%2008.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) 4. Click **Save & Close**. 5. **Save** your module. Preview your module in Express View, and test it out: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Calculator_Use_Case_Gif.mp4?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A44Z&se=2026-11-07T18%3A57%3A44Z&sr=c&sp=r&sig=eoQ7fISEOx1FerarxnnLTLDFgqDZU0AI%2FpJYlZ%2BuxJw%3D) ## Resources - [Modify the Calculator component using the toolbar settings](/v1/docs/component-toolbar-settings). - [Supported Formulas](/v1/docs/supportedformulas). - [Combine Decisions and Calculator components to make complex logic-based configurations](/v1/docs/combining-calculators-and-decisions). - [Configure Calculator components using Moment.js](/v1/docs/how-to-use-momentjs-in-a-calculator-component). - [Learn about Data & Event Processing components](/v1/docs/data-event-processing-components). 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. A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. 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 . 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. JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. Enter inputs components and actions you want the component to perform.