Calculator Component

 

Estimated Reading Time:  4 minutes

Overview

The Text Field component is part of the core range of input components. Next to Buttons, text input components like Text Field and Text Area, are some of the most-frequently used inputs.

The Text Field component allows for alphanumeric responses (both letters and numbers). But keep in mind that Unqork also has a dedicated Number component. So, use a Text Field when responses might use only letters or combinations of letters and numbers. A Number component is better when collecting something like your end-user's age. And, if you can narrow down your end-user's options, you might use a Dropdown, Radio Buttons, or Date Input component.

You can find the component under the Primary Fields group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a Text Field 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

A static image displaying the UDesigner Calculator Component's Display Field Text settings.

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.
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 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  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. field, enter calcTotal.
3. 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.
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:

Property ID

Formula

total

=SUM(S,M,L)

TIP  To discover more formulas, view our Supported Formulas page.

A static image displaying the calcTotal Calculator component's Inputs and Outputs values.

8. Click Save Component.
9. 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