Extend Operator

Overview

The Extend operator lets you combine 2 objects into one. You'll often use the Extend in combination with Group Input operators. The Group Input operator lets you create objects from scratch right in the Data Workflow. But, the Group Input operator can only create an object from up to 6 fields. To create larger objects, with more than 6 fields, you can use the Extend operator to combine the input from 2 Group Input operators.

Let's say you want to collect a lot of information from an end-user. When you create objects from scratch, there's a limit to the number of fields you can include. Because of this, you'll have to store data in 2 objects. You can combine your objects into one using the Extend operator.

You’ll find the Extend operator under the Object group at the left of the Data Workflow canvas.

Similar Data Workflow Operators

The Extend operator is similar to the Append operator. Here are the operators compared:

  • Extend operator: Combines 2 objects into a single object. Often used with Group Input operators to create objects with more than 6 fields.

  • Append operator: Combines strings or arrays together. When appending strings, acts as a concatenation. When appending arrays, joins both arrays into one.

What You'll Learn

In this article, you'll learn:

About the Info Window

Here's what the Extend 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.

Adding an Extend Operator

We'll create an application to show you how the Extend operator works. You'll start by creating several components to get your end-user's information. Then, you'll transfer the end-user's data into objects using your Group Input operators. As we covered earlier, there's a limit to the amount of data you can store in an object using the Group Input. So, you'll need to create 2 objects to capture all of the end-user's data. You'll combine the 2 objects using the Extend operator.

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

Here's how a completed use case will look in the Express View

What You'll Need

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

  • 4 Text Field components

  • 1 Date Input component

  • 1 Phone Number component

  • 1 Email component

  • 1 Hidden component

  • 1 Data Workflow component

  • 1 Button component

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

  • 2 Group Input operators

  • 3 Console operators

  • 1 Extend operator

  • 1 Output operator

Configure the Text Field Components

First, you'll add 4 Text Field components. You'll use these Text Fields to collect your end-user's information.

1. Drag and drop 4 Text Field components onto your canvas, placing them one after the other.
2. Enter the Property ID, and Label Text details as follows:
Property ID Label Text
firstName First Name
middleInitial Middle Initial

lastName

Last Name

occupation

Occupation

3. Save each component as you add it.

Configure the Date Input Component

Next, you'll add a Date Input component. You'll use this component to collect the end-user's date of birth.

1. Drag and drop a Date Input component onto your canvas. Place your Date Input below the lastName Text Field.
2. Enter dateOfBirth in the Property ID field.
3. Enter Date of Birth in the Label Text field.
4. Enter -10 years in the Display (+/-) years from the current date field.
5. Set the Disable Calendar View toggle to ON.
6. In the Validation panel, Date Restrictions section, select Past Only from the Restrict To: drop-down.

7. Click Save.

Configure the Phone Number Component

1. Drag and drop a Phone Number component onto your canvas. Place your Phone Number component below the Date Input.
2. Enter phoneNumber in the Property ID field.
3. Enter Phone Number in the Label Text field.
4. Click Save.

Configure the Email Component

1. Drag and drop an Email component onto your canvas below the Phone Number.
2. Enter email in the Property ID field.
3. Enter Email Address in the Label Text field.
4. Click Save.

Configure the Hidden Component

Then you'll add a Hidden component. Your Data Workflow will use this component to store its output.

1. Drag and drop a Hidden component onto your canvas, placing it below the Occupation Text Field.
2. Enter userData in the Canvas Label Text and Property ID fields.
3. Click Save.

Configure the Data Workflow Component

Now you'll add your Data Workflow component. This component will create objects from your end-user's input data. Then, it'll combine these objects into one.

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

Configure the First Group Input Operator

Next, you'll add a Group Input operator. You'll use Group Input operators to create objects from your end-user's input data.

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

Setting

Value

Category

Input

Component

firstName

Component 1

middleInitial

Component 2

lastName

Component 3

dateOfBirth

Component 4

phoneContact

Component 5

email

Required

Yes

NOTE  You'll want every Component field in your first Group Input's Info window assigned. If any fields are left empty, the operator won't work.

Configure the First Console Operator

Then you'll add a Console operator. This Console operator shows the progress of the Group Input 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

Group Input 1

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

Configure the Second Group Input Operator

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

Setting

Value

Category

Input

Component

occupation

Component 1

 

Component 2

 

Component 3

 

Component 4

 

Component 5

 

Required

Yes

Configure the Second Console Operator

You'll want to add another Console operator. Use this to show the progress of your second Group Input.

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

Group Input 2

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

Configure the Extend Operator

You'll add an Extend operator next. You'll use this operator to combine the 2 Group Inputs into a single object.

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

Setting

Value

Category

Extend

Label

Combine Data

3. Connect the output port (right) of the firstName Group Input operator to the upper input port (left) of the Extend operator.
4. Connect the output port (right) of the occupation Group Input operator to the lower input port (left) of the Extend operator.

Configure the Third Console Operator

Then you'll add a final Console. This Console operator shows you the progress of your Extend 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

Extend Group Inputs

3. Connect the output port (right) of the Extend operator to the input port (left) of the Extend Group Inputs Console 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

userData

Action

value

3. Connect the output port (right) of the Clean Keys operator to the input port (left) of the Output operator.
4. Click Save.

Configure the Button Component

Finally, to trigger the Data Workflow, you'll add a Button component. End-users will use this Button to submit their information.

1. Drag and drop a Button component onto your canvas. Place this component above your Data Workflow.
2. Enter btnCreateObject in the Property ID field.
3. Enter Submit Information in the Label Text field.
4. Select Event as the Button Action Type.
5. Enter dwfExtend in the Trigger on Click field.

6. Click Save.
7. Save your module.

Great work! Now that you're done, you can preview the module in Express View. Start by filling in your information for all fields on your application. You'll want to make sure you fill in all the fields, or the Extend operator won't work.

Then, open up your DevTools Console and select the Submit Information Button. In the Console, you'll see updates from your 3 Console operators. The Group Input 1 and Group Input 2 Consoles show your inputs as separate objects. In the Extend Group Inputs Console, you'll see the 2 inputs combined as a single object.

Changing an Extend 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 an Extend 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 an Extend 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/60c923f79dac8302d2f16bfe/edit.