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