How to: Dynamically Add and Reference Values Using the Create Field Operator

In this how-to guide, you’ll explore a couple of expressions you can use in the Create Field operator. The first expression adds key/value pairs with a dynamically-populated value using the component’s argument port. You'll set up a Number component where you can enter a sample annual income. Then, the Create Field operator adds that value to a table.

With the second expression, you'll learn to reference and add values based on other fields. The Create Field operator accepts calculations as part of the key/value expression. So, you can add a monthly income value by dividing the annual income value by 12.

Configuration

In this how-to guide, you'll learn to use the Create Field operator to dynamically add key/value pairs based on your end-user's input. And, add key/value pairs using calculations that reference other fields.

Configure the Data Table Component

First, configure a Data Table component to add your key/value pairs.

1. In the Module Builder, drag and drop a Data Table component onto your canvas.

2. In the Property ID and Label Text fields, enter dtTable.

3. In the data table, enter the following:

   name	age
   Veronika	37

   

4. Click Save Component.

Configure the Number Component

Next, add a Number component so an end-user can enter a sample annual income.

1. Drag and drop a Number component onto your canvas, placing it below the dtTable Data Table component.

2. In the Property ID field, enter income.

3. In the Label Text field, enter Annual Pre-Tax Income (USD).

4. Click Save Component.

Configure the Data Workflow Component

Next, you’ll set up your Data Workflow and configure the Create Field operator. You'll add two key/value pairs to the single row (object) in your table (array).

1. Drag and drop a Data Workflow component onto your canvas, placing it below the income Number component.

2. In the Property ID and Label Text fields, enter dwfCreateField.

Configure the Input Operators

Begin by connecting your Data Table and Number component to your Data Workflow. You'll make this connection using two Input operators.

1. Drag and drop two Input operators onto your Data Workflow canvas.

2. Configure the first Input operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	dtTable
   Required	Yes
   Source	Default

3. Configure the second Input operator's Info window as follows:

   Setting	Value
   Category	Input
   Component	income
   Required	Yes
   Source	Default

Configure the Create Field Operator

Next, set up the Create Field operator to add two key/value pairs to the row (object) in your table (array). Notice that the Field 1 expression includes the term _arg. This value is an alias for the value passing through the operator's argument port. Using _arg lets you dynamically add value, instead of directly defining it.

The Field 2 expression adds the incomeMonthly key. The expression you'll use is incomeMonthly=incomeAnnual/12.

These are two useful expressions for adding values without explicitly defining them.

1. Drag and drop a Create Field operator onto your Data Workflow canvas.

2. Configure the operator's Info window as follows:

   Setting	Value
   Category	Create Field
   Label	_arg
   Do Not Sanitize Formula	(checked)
   Preserve Argument Type	(unchecked)
   Field 1	incomeAnnual=_arg
   Field 2	incomeMonthly=incomeAnnual/12

3. Connect the output port (right) of the dtTable Input operator to the input port (left) of the Create Field operator.

4. Connect the output port (right) of the income Input operator to the argument port (top) of the Create Field operator.

Configure the Console Operators

Now, to configure two Console operators so you can view the data before and after your Create Field operator.

Notice that the Create Field operator only outputs to a Console operator. When creating applications, you might also want to use a dedicated Output operator. Then, you can connect that Output operator to a Hidden component. That way, you can store the final table and reference it elsewhere in your application.

1. Drag and drop two Console operators onto your Data Workflow canvas.

2. Configure the first Console operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	Before Create Field

3. Configure the second Console operator's Info window as follows:

   Setting	Value
   Category	Console
   Label	After Create Field

4. Connect the output port (right) of the dtTable Input operator to the input port (left) of this first Console operator.

5. Connect the output port (right) of the Create Field operator to the input port (left) of this second Console operator.

   

6. Click Save Component.

Configure the Button Component

Lastly, 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. In the Property ID field, enter btnRunDWF.

3. In the Label Text field, enter Run Create Field.

4. From the Action Type drop-down, select Event.

5. From the On Click drop-down, select dwfCreateField.

   

6. Click Save Component.

7. Save your module.

Here's how the completed example looks in the Module Builder:

Preview your module in Express View and open the DevTools Console. Enter a value in the Annual Pre-Tax Income (USD) field, then click the Run Create Field button to see the results.