Convert Value Operator

Overview

The Convert Value operator lets you take a specific key from a data set and convert the value it holds to a number, integer, or string. But, before we jump in, let's review these 3 data types:

Number: This data type is only for numbers. To be clear, we wouldn't classify the word ten as a number, but we would classify the number 10 as a number. This data type also allows for the use of decimals to differentiate it from the next data type. When converting to a Number data type, any original values with non-numerical characters will show as NaN (Not a Number) in your final data. To avoid lost data, ensure that your original data does not hold non-numerical characters.

Integer: This data type is also for numbers, but it does not allow for decimals. So, when converting to an integer, a number will only include that which falls before the decimal. When converting to an Integer data type, any original values with non-numerical characters will show as 0 in your final data. To avoid lost data, ensure that your original data does not hold non-numerical characters.

String: You'll sometimes see strings referred to as text. But this doesn't mean strings can only contain letters. Data stored as a string can include numbers, letters, symbols, and spaces. Strings can be as short as a few letters or contain entire paragraphs.

The Unqork Designer Platform handles each data type a little differently. And sometimes you'll need to convert the data collected from one data type to another.

You'll find the Convert Value operator under the Value/String group to the left of your canvas.

Similar Data Workflow Operators

The Convert Value operator is similar to the Convert Field operator. Here are the operators compared:

  • Convert Value operator: Converts a single value passed to it. This is best if you're only working with a single key/value pair of data.

  • Convert Field operator: Converts all values in a specified key of a data set. This is best if you're working with large amounts of data that need conversion.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Convert Value operator looks like, along with its Info window:

And here's a breakdown of each setting in the Info window:

Setting Description

Category

Grayed out and non-adjustable setting indicating the operation type.

Label

Sets the label for your operator. The label you enter here shows beneath your operator on your Data Workflow canvas.

This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows.

Cast To

The final data type you want after the operator performs its conversion. Here, you'll find a drop-down with the following options:

  • Number

  • Integer

  • String

Adding a Convert Value Operator

In this example, you'll learn how to convert a string into a number using the Convert Value operator. You'll use a Text Field component ensure that any value you enter will store as a string. you'll enter a value in this field in Express View and trigger Data Workflow with a button. On button-click, the Convert Value operator will change your string into a number.

Here's how the completed use case will look in the Module Builder:

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

What You'll Need

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

  • 1 Text Field 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

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

Configure the Text Field Component

First, you'll set up a Text Field so your end-user can enter a string to convert. Remember, anything stored in a Text Field component is automatically a string.

1. In the Module Builder, drag and drop a Text Field component onto your canvas.
2. Enter stringInput in the Property ID field.
3. Enter String 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 Text Field.
2. Enter numberOutput 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 Text Field into a Convert Value operator. Then you'll cast any string entered into the Text Field as a number and output it into your Hidden component. To help you watch your Data Workflow's progress, you'll 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 dwfConvertValueNumber 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

stringInput

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 String to Number

Cast To

Number
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

numberOutput

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

String Input
3. Connect the output port (right) of the Input operator to the input port (left) of the String 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

Number Output
3. Connect the output port (right) of the Convert Value operator to the input port (left) of the Number 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 btnConvertToNumber in the Property ID field.
3. Enter Convert String to Number in the Label field.
4. Select Event as the Action Type.
5. Enter dwfConvertValueNumber 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, and open up the DevTools Console. Enter a number (with and without a decimal point) or text into your Text Field and click your button. Each submission will give you a stringInput and numberOutput Console output. Enter a number like 500 into the field and click the button. Then, run your angular command. When you expand your data, you'll see "500.50" as your input and 500.5 as your output. Quotation marks around your input show that it's a string. No quotation marks around your output means the conversion was a success.

Changing a Convert Value Operator's Settings

You can revisit and make changes to this operator.

1. Click the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator to open its Info Window.
4. Make changes to the operator's settings as needed.
5. Click Save.
6. Save your module.

Copying a Convert Value Operator

You can make a copy of your operator using familiar keyboard settings. You can copy and paste an exact copy of your operator, matching all settings.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to duplicate.
4. On your keyboard, press Command + C (Mac OS) or Ctrl + C (Windows/Linux) to copy the operator.

TIP  You can copy more than one operator at a time. Hold Command or Ctrl on your keyboard and click all the operators you want to copy. Follow the rest of the steps as usual.

5. On your keyboard, press Command + V (Mac OS) or Ctrl + V (Windows/Linux) to paste the copied operator(s) to the Data Workflow canvas.
6. Click Save.
7. Save your module.

TIP  Did you know you can copy an operator and paste it into a different Data Workflow? You'll use the same steps outlined above.

Removing a Convert Value Operator

Lastly, you can delete this operator from your Data Workflow canvas. You can also use these same steps to delete a connection between two operators.

1. Hover over the Data Workflow component.

A 5-button toolbar displays above the component on hover-over.

2. Click the (Settings) button to open the Data Workflow canvas.
3. Click the operator you want to delete.
4. On your keyboard, press Delete.

NOTE  Once you delete this operator, make sure to connect your remaining operators. If your Data Workflow path doesn't end with an Output or Console operator, your Data Workflow won't work. So, once you delete an operator, make sure to update any remaining paths to end at an Output or Console operator.

5. Click Save.
6. Save your module.

Lab

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