Convert Value Operator: Convert a Number to an Integer

Overview

You'll use the Convert Value operator to change a single data type into another. Data types include strings, integers, and numbers. In this article, you'll learn how to convert individual number values into integers. The easiest way to do this is to set up a Number component that lets you enter and submit a number in Express View.

Before you begin, there's a couple of things to consider when converting numbers to integers:

  • If you enter a number with a decimal, the operator will remove it and everything to its right. For instance, if you convert 12.345, the output will be 12.

  • Numbers with commas appear as text to the Number component, and it won't accept them. An example would be 1,000,000.

Here's how your module will look in the Module Builder:

Here's how the completed use case will look in Express View, including a peek at the DevTools Console:

What You'll Learn

In this article, you'll learn how to use the Convert Value operator to convert a number to an integer.

What You'll Need

To set up this use case, you’ll need:

  • 1 Number component

  • 1 Hidden component

  • 1 Data Workflow component

  • 1 Button component

To set up your Data Workflow, you'll need:

  • 1 Input operator

  • 1 Convert Value operator

  • 1 Output operator

  • 2 Console operators

These instructions assume you have a new module open, saved, and with a title.

Configuration

Configure the Number Component

First, you'll set up a Number component so your end-user can enter a number to convert to an integer.

1. In the Module Builder, drag and drop a Number component onto your canvas.
2. Enter numberInput in the Property ID field.
3. Enter Number Input in the Label Text field.
4. Enter Enter a Number in the Helper Text field.
5. Click Save.

Configure the Hidden Component

Next, you'll configure a Hidden component to hold your Data Workflow's output.

1. Drag and a Hidden component onto your canvas, placing it below your Number component.
2. Enter integerOutput as the Property ID and Canvas Label Text fields.
3. Click Save.

Configure the Data Workflow Component

Now, it's time to set up your Data Workflow. First, you'll input your Number component into a Convert Value operator. Then you'll cast any number entered in the Number field to an integer. This new integer then outputs to your Hidden component. To watch your Data Workflow's progress, you'll also configure 2 Console operators.

1. Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow below your Hidden component.
2. Enter dwfConvertValueInteger in the Canvas Label Text and Property Name fields.

Configure the Input Operator

1. Drag and drop an Input operator onto your Data Workflow canvas.
2. Configure the Input operator's Info window as follows:
Setting Value

Category

Input

Component

numberInput

Required

No

Source

Default

Configure the Convert Value Operator

1. Drag and drop a Convert Value operator onto your Data Workflow canvas.
2. Configure the Convert Value operator's Info window as follows:
Setting Value

Category

Convert To Value

Label

Convert to Integer

Cast To

Integer

3. Connect the output port (right) of the Input operator to the input port (left) of the Convert Value operator.

Configure the Output Operator

1. Drag and drop an Output operator onto your Data Workflow canvas.
2. Configure the Output operator's Info window as follows:
Setting Value

Category

Output

Component

integerOutput

Action

value

3. Connect the output port (right) of the Convert Value operator to the input port (left) of the Output operator.

Configure the First Console Operator

1. Drag and drop a Console operator onto your Data Workflow canvas.
2. Configure the Console operator's Info window as follows:
Setting Value

Category

Console

Label

Number Input

3. Connect the output port (right) of the Input operator to the input port (left) of the Number Input Console operator.

Configure the Second Console Operator

1. Drag and drop another Console operator onto your Data Workflow canvas.
2. Configure the Console operator's Info window as follows:
Setting Value

Category

Console

Label

Integer Output

3. Connect the output port (right) of the Convert Value operator to the input port (left) of the Integer Output Console operator.

Configure the Button Component

Now, let's add a Button component to trigger your Data Workflow.

1. Drag and drop a Button component onto your canvas, placing it below your Data Workflow.
2. Enter btnConvertToInteger in the Property ID field.
3. Enter Convert Number to Integer in the Label field.
4. Select Event as the Action Type.
5. Enter dwfConvertValueInteger in the Trigger on Click field.

6. Click Save.
7. Save your module.

Now you can test out your Data Workflow. Preview your module in Express View. Enter a number like 250.25 into the Number field and click your button. The Number Input Console shows your number as you entered it. After passing through the operator, the Integer Output Console shows the converted integer. You'll see that the operator removed the decimal point and everything to the right of it, leaving 250.

Lab

You can view this complete use case here: https://training.unqork.io/#/form/6063525e7fd9a1023dfd57f1/edit.