Diff Operator

Overview

The Diff operator gives you an easy way to find the differences between 2 sets of data. The operator works using the deep-diff npm package, which determines the structural differences between objects. You'll input each of your data sets or JSON objects to the operator. Then, the operator looks at each source of data and outputs a list of the differences it finds. Those differences are represented using a single letter. Each letter represents a type of difference. Here's a breakdown of each:

• N: A key or value has been added.

• D: A key or value has been deleted.

• E: A key or value has been edited.

• A: A change occurred within an array index. This means an entire row has been added or deleted.

You'll see the upper input port referred to as the lhs (left-hand side) when using this operator. Data inputs using this port serve as the starting point for your Diff operator. And you'll see the lower input port referred to as the rhs (right-hand side) when using this operator. So, if you see an N in the operator's output, that means there is a new value in the data connected to the rhs. It's a new value because it wasn't in the data connected to the lhs.

Before we look at an example, let's see what this looks like in the DevTools Console:

The above example is a Diff operator output comparing 2 data sets of order information. Here, you'll see the kind listed as E, which means an entry has been edited. Below that, you'll see lhs: "declined". Remember, the Diff operator refers to the upper input port as lhs (left-hand side). So, this shows the original value. Next, you'll see a path. This shows the key (or column) where this value falls. So, we know the changed value is in the order status column. And below that, you'll see rhs: "returned". Because the Diff operator refers to the lower input port as rhs (right-hand side), this shows what the value is in the updated data set.

NOTE  The path in this output shows where the change occurred. In this case, it's the order status column of a data set. You'll also notice the number 2 here. That shows the index where the change happened. This only shows when working with data from a data table. If you're working with JSON objects, you won't see the index here.

For kind type N, you'll only see a value on the rhs. And for kind type D, you'll only see a value on the lhs. And for kind types of A, you'll see the index number where the change occurred. Here's what this looks like in the DevTools Console:

You'll use the Diff operator whenever you want to see what's changed between data sets. This is particularly useful if your data sets are quite similar. The Diff operator can find the differences for you so you don't have to spend time looking for them yourself.

NOTE  Ensure your Diff operator inputs have differences. If your inputs have no differences, your Data Workflow returns a circular reference error.

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

What You'll Learn

In this article, you'll learn:

• About the Diff operator's settings.

• How to add and configure a Diff operator.

• How to modify a Diff operator's settings.

• How to copy a Diff operator.

• How to remove a Diff operator.

About the Info Window

Here's what the Diff 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	The name applied to the operator. This label displays within the workflow. Labels should be user-friendly and well associated with the role of the operator.

Adding a Diff Operator

To see this operator in action, let's look at an example. You'll configure 2 data tables holding customer order information. Then, you'll use a Data Workflow with a Diff operator to spot the differences.

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

And here's how the completed use case looks in Express View, along with a sneak peek at that DevTools Console:

What You'll Need

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

• 2 Data Table components

• 1 Button component

• 1 Data Workflow component

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

• 2 Input operators

• 3 Console operators

• 1 Diff operator

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

Configure the First Data Table Component

First, let's add a set of data to serve as your starting point. You'll use a Data Table for that.

1.

Drag and drop a Data Table component onto your canvas.

2.

Enter dtOriginalData in the Label and Property Name fields.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Second Data Table Component

Next, let's add an updated version of your original data. You'll notice that this data set is quite similar to your first data set. This reflects how, in your use case, slight changes might have been made to your data at one point or another. Later, you'll use a Data Workflow with a Diff operator to spot the differences.

1.

Drag and drop another Data Table component onto your canvas. Place this Data Table below your first Data Table.

2.

Enter dtUpdatedData in the Label and Property Name fields.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Data Workflow Component

Now let's add your Data Workflow. Here, you'll use 2 Input operators to bring in both of your data sets. Then, you'll connect those operators to a Diff operator. The Diff operator then compares the 2 data sets and finds the differences. You'll also use 3 Console operators to see your data at each step.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow below your Data Tables.

2.

Enter dwfDiff in the Canvas Label Text and Property Name fields.

Configure the First Input Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

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:

3.

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

Configure the Diff Operator

1.

Drag and drop a Diff operator onto your Data Workflow canvas.

2.

Configure the Diff operator's Info window as follows:

3.

Connect the output port (right) of the Input operator to the upper input port (left) of the Diff operator.

Configure the Second Input Operator

1.

Drag and drop another Input operator onto your Data Workflow canvas.

2.

Configure the Input operator's Info window as follows:

3.

Connect the output port (right) of the dtUpdatedData Input operator to the lower input port (left) of the Diff 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:

3.

Connect the output port (right) of the dtUpdatedData Input operator to the input port (left) of the Original Data Console operator.

Configure the Third Console Operator

1.

Drag and drop a third Console operator onto your Data Workflow canvas.

2.

Configure the Console operator's Info window as follows:

3.

Connect the output port (right) of the Diff operator to the input port (left) of the Diff Output Console operator.

4.

Click Save.

Configure the Button Component

Finally, let's add a Button to kick off the whole operation.

1.

Drag and drop a Button component onto your canvas. Place your Button between your Data Tables and your Data Workflow.

2.

Enter btnDiffDwf in the Property ID field.

3.

Enter Find Difference in the Label Text field.

4.

Select Event as the Action Type.

5.

Enter dwfDiff in the Trigger on Click field.

6.

Click Save.

7.

Save your module.

Now it's time to check your work. Preview your module in Express View and open the DevTools Console. Now, click your Find Difference button. You'll see all 3 of your Consoles. Your Updated Data and Original Data Consoles are fairly self-explanatory. Each of these shows data as it exists in your data tables. But your Diff Output Console is where you'll see the work your Diff operator has done. Here, you'll see each element that has changed between your data tables. Remember that a kind of E means an entry was edited. (You'll see 3 of these, one for each time an order status was edited.) And a kind of N means an entry was added. (You'll also see 3 of these, one for each piece of data added.)

Changing a Diff 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 Diff 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.

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

5.

Click Save.

6.

Save your module.

Lab

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