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

General

Setting

Description

Property ID

A Property ID is the unique field ID used by Unqork to track and link components in your module.

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

(ON)/ (OFF)

The component is active and visible 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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View. While active, other components and processes can reference your component.

Setting the toggle to Toggle Off icon (OFF) makes your component inactive. Other components and processes cannot reference your component while it's inactive.

By default, the Active toggle is set to Toggle On Icon (ON).

Notes

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Display Icon Display

Select this tab to manage your component's display settings.

Actions Icon Actions

Select this tab to manage your component's actions settings.

Validation Icon Validation

Select this tab to manage your component's validation settings.

Advanced Icon Advanced

Select this tab to manage your component's advanced settings.

Permissions Icon Permissions

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component.

Field Tag Icon Field Tags

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Shortcuts Icon Shortcuts

Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:

  • Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

  • Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

  • Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

  • Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

  • Enter (Return): When tabbing to a Tooltip Icon (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

  • Drop-down menus: When you Tab to a settings drop-down, use the keyboard's Up-Arrow Icon (up)/ Down-Arrow icon (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Documentation IconDocumentation

Select this tab to access the component documentation in Unqork's In-Product Help.

Cancel

Click this button to undo any unsaved configuration changes and return to the canvas.

Save & Close

Click this button to save all settings as configured and return to the canvas.

Display Panel

A static image dispaying the Calculator component's Display settings.
(click to expand image)

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.

Actions Panel

A static image dispaying the Calculator component's Actions settings.
(click to expand image)

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 component Icon Button or Radio Button component icon Initializer component to trigger a Plugin Component Icon Plug-In component.

By default, the Manual Trigger Type is selected.

  • Watch: The component fires when there's any action taken on the input component(s) 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 Property ID column is where you enter inputs that your logic component references. Examples of supported inputs include:

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

  • Values that aren't 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, which Unqork creates 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

Checking this option sets the input as mandatory. This means that your calculation can't take place without this particular input. Where Required stays unchecked, the input becomes optional in the calculation.

Outputs

Setting

Description

Property ID

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

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

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

Formula

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

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

Post Trigger

The Property ID of the component that will trigger after all the outputs listed in the Outputs table are set.

Validation Panel

A static image dispaying the Calculator component's Validation settings.
(click to expand image)

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.

Setting

Description

Up Arrow Close/Down Arrow icon  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.

···

Additional Unit Testing settings.

Duplicate Icon Duplicate

Makes a copy of an existing test.

Trashcan icon 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 JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.. 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.
(click to expand image)

Setting

Description

Set Execution

Select if and what is executed when this component triggers.

Disable Execution

If Disable Execution is set to Toggle On Icon (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 Toggle Off icon (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.

1. In the Module Builder, drag and drop four  Number components 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 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:
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 the four  Number 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. 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 calcTotal.
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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View, and test it out:

Resources