---
title: "How to: Convert a Number to an Integer"
slug: "convert-value-operator-convert-a-number-to-an-integer"
updated: 2025-12-23T15:45:01Z
published: 2025-12-23T15:45:01Z
canonical: "docs.unqork.io/convert-value-operator-convert-a-number-to-an-integer"
---

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

# How to: Convert a Number to an Integer

UDesignerClassic Designer

The **Convert Value operator** is used 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.

Before you begin, there are a couple of considerations to make when converting numbers to integers:

- If you enter a number with a decimal, the Convert Value operator removes it and every number to the right of it. For example, if you convert `12.345`, the output is `12`.
- Numbers with commas display as text to the Number component, and it won't accept them. An example would be `1,000,000`.

## Configuration

In this how-to guide, you'll set up a [Number](/v1/docs/number-component) component so an end-user can enter a number to be converted. Then, you’ll set up a [Data Workflow](/v1/docs/data-workflow-component) component with a [Convert Value](/v1/docs/convert-value-operator) operator to manipulate the value.

### Configure the Number Component

First, you'll set up a [Number](/v1/docs/number-component) 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. In the **Property ID** field, enter `numberInput`.
3. In the **Label Text** field, enter `Number Input`.
4. In the **Helper Text** field, enter `Enter a Number`.
5. Click **Save Component**.

### Configure the Hidden Component

Next, you'll configure a [Hidden](/v1/docs/hidden-component) component to store your Data Workflow's output.

1. Drag and a **Hidden** component onto your canvas, placing it below your `numberInput` **Number** component.
2. In the **Property ID** and **Label Text** fields, enter `integerOutput`.
3. Click **Save Component**.

### Configure the Data Workflow Component

Now, it's time to set up your [Data Workflow](/v1/docs/data-workflow-component). First, you'll bring your [Number](/v1/docs/number-component) component data into the Data Workflow using an [Input](/v1/docs/input-operator) operator. Then, you’ll pass that data to the [Convert Value](/v1/docs/convert-value-operator) operator and cast any number entered in the **Number** field to an integer. Then, output the new integer to your [Hidden](/v1/docs/hidden-component) component. You'll also configure two [Console](/v1/docs/console-operator) operators to view the progress in the DevTools Console.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your Hidden component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfConvertValueInteger`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the 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 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 `numberInput` **Input** operator to the input port (left) of the `Convert to Integer` **Convert Value** operator.

#### Configure the Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | integerOutput |
| Action | value |
3. Connect the output port (right) of the `Convert to Integer` **Convert Value** operator to the input port (left) of the `integerOutput` **Output** operator.

#### Configure the First Console Operator

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Number Input |
3. Connect the output port (right) of the `numberInput` **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 operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Integer Output |
3. Connect the output port (right) of the `Convert to Integer` **Convert Value** operator to the input port (left) of the `Integer Output` **Console** operator.

![Workflow diagram illustrating data conversion from input to integer output.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(563).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)
4. Click **Save Component**.

### Configure the Button Component

Lastly, let's add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below your `dwfConvertValueInteger` Data Workflow.
2. In the **Property ID** field, enter `btnConvertToInteger` .
3. In the **Label** **Text** field, enter `Convert Number to Integer` .
4. Set the **Action Type** drop-down**,** select `Event`**.**
5. Under **Triggers, i**n the **On Click** drop-down, select `dwfConvertValueInteger`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(552).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)
6. Click **Save**.
7. **Save** your module.

Here's how your completed module looks in the Module Builder:

![Input field for number conversion with output display and conversion button.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(553).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

Preview your module in Express View and open the DevTools Console. Enter a number, like `250.25`, into the **Number** field. Click the **Convert Number to Integer** button. The `Number Input` **Console** displays your number as you entered it. After passing through the Convert Value operator, the `Integer Output` **Console** displays the converted integer. You'll see that the operator removed the decimal point and the numbers to the right of it, leaving `250`.

![User interface showing number input and conversion to integer output in a console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Convert_Value_09(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

The **Convert Value operator** is used 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.

Before you begin, there are a couple of considerations to make when converting numbers to integers:

- If you enter a number with a decimal, the Convert Value operator removes it and every number to the right of it. For example, if you convert `12.345`, the output is `12`.
- Numbers with commas display as text to the Number component, and it won't accept them. An example would be `1,000,000`.

## Configuration

In this how-to guide, you'll set up a [Number](/v1/docs/number-component) component so an end-user can enter a number to be converted. Then, you’ll set up a [Data Workflow](/v1/docs/data-workflow-component) component with a [Convert Value](/v1/docs/convert-value-operator) operator to manipulate the value.

### Configure the Number Component

First, you'll set up a [Number](/v1/docs/number-component) 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. In the **Property ID** field, enter `numberInput`.
3. In the **Label Text** field, enter `Number Input`.
4. In the **Helper Text** field, enter `Enter a Number`.
5. Click **Save**.

### Configure the Hidden Component

Next, you'll configure a [Hidden](/v1/docs/hidden-component) component to store your Data Workflow's output.

1. Drag and a **Hidden** component onto your canvas, placing it below your `numberInput` **Number** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `integerOutput`.
3. Click **Save**.

### Configure the Data Workflow Component

Now, it's time to set up your [Data Workflow](/v1/docs/data-workflow-component). First, you'll bring your [Number](/v1/docs/number-component) component data into the Data Workflow using an [Input](/v1/docs/input-operator) operator. Then, you’ll pass that data to the [Convert Value](/v1/docs/convert-value-operator) operator and cast any number entered in the **Number** field to an integer. Then, output the new integer to your [Hidden](/v1/docs/hidden-component) component. You'll also configure two [Console](/v1/docs/console-operator) operators to view the progress in the DevTools Console.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below your Hidden component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfConvertValueInteger`.

#### Configure the Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the 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 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 `numberInput` **Input** operator to the input port (left) of the `Convert to Integer` **Convert Value** operator.

#### Configure the Output Operator

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

| Setting | Value |
| --- | --- |
| Category | Output |
| Component | integerOutput |
| Action | value |
3. Connect the output port (right) of the `Convert to Integer` **Convert Value** operator to the input port (left) of the `integerOutput` **Output** operator.

#### Configure the First Console Operator

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

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Number Input |
3. Connect the output port (right) of the `numberInput` **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 operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Integer Output |
3. Connect the output port (right) of the `Convert to Integer` **Convert Value** operator to the input port (left) of the `Integer Output` **Console** operator.

![Workflow diagram illustrating data conversion from input to integer output.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Convert_Value_11.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)
4. Click **Save**.

### Configure the Button Component

Lastly, let's add a [Button](/v1/docs/how-to-guide-button-component) component to trigger your Data Workflow.

1. Drag and drop a **Button** component onto your canvas, placing it below your Data Workflow component.
2. In the **Property ID** field, enter `btnConvertToInteger`.
3. In the **Label** **Text** field, enter `Convert Number to Integer`.
4. Set **Action Type** as **Event.**
5. From the **On Click** drop-down, select **dwfConvertValueInteger**.

![Button configuration settings for converting numbers to integers in a workflow.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(550).png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)
6. Click **Save**.
7. **Save** your module.

Here's how your completed module looks in the Module Builder:

![Module editor displaying number input and conversion button for integer values.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Convert_Value_08.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

Preview your module in Express View and open the DevTools Console. Enter a number, like `250.25`, into the **Number** field. Click the **Convert Number to Integer** button. The `Number Input` **Console** displays your number as you entered it. After passing through the Convert Value operator, the `Integer Output` **Console** displays the converted integer. You'll see that the operator removed the decimal point and the numbers to the right of it, leaving `250`.

![User interface showing number input and conversion to integer output in a console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/DWF_Convert_Value_09(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A05Z&se=2026-11-08T19%3A05%3A05Z&sr=c&sp=r&sig=Re59mnTxhFgHC3mhMflNXrHMNjYXw5AhHGo3Wm1BgiA%3D)

Data types are a classification of data that determines how it is stored and interpreted.

Data types are a classification of data that determines how it is stored and interpreted.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The DevTools Console helps you securely store, build, test, and deploy your software.

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.