Sort Operator

Overview

The Sort operator lets you sort table-based data in ascending or descending order. You can use the Sort operator a few different ways:

  • Predefine the sort order in the operator's Info window. Then, manually select which key (column) to sort by in Express View.

  • Predefine the key (column) to sort by in the operator's Info window. Then, manually select the sort order in Express View.

  • Predefine both the sort order and the key (column) to sort by in the operator's Info window.

No matter which approach you choose, the ability to sort table-based data is a useful one. The Sort operator opens up more ways to review, organize, compare, and analyze your data.

You'll find the Sort operator under the Table group at the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

About the Info Window

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

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

Setting

Description

Label

Sets the label for your operator and displays 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.

Sort Keys

Defines the key (column) by which you want to sort the table. Enter _arg in this field to sort by the value coming into the operator's argument port.

Asc/Desc

Defines if you want to sort the table in ascending or descending order. Enter either asc or desc. If not defined, the Sort order defaults to ascending.

This setting is case-sensitive. Use asc or desc, not Asc or Desc.

Adding and Configuring a Sort Operator

Next, let's take a look at how to use the Sort operator to sort table-based data. This use case predefines the sort order as ascending. Then, in Express View, you use a Dropdown component to pick the key (column) to sort the table by. Feel free to test out adjusting the sort order to descending, too.

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

Here's how the completed use case works in Express View, including a peek at the sorted table in the DevTools Console:

What You Need

To set up this use case, you need:

  • 1 Data Table component

  • 1 Dropdown component

  • 1 Button component

  • 1 Data Workflow component

To set up your Data Workflow, you need:

  • 2 Input operators

  • 1 Sort operator

  • 2 Console operators

Configure the Data Table Component

The Sort operator needs a table as a data source, so start with setting up a Data Table component.

1. Drag and drop a Data Table component onto your canvas.
2. Enter dtTable in the Label and Property Name fields.
3. In the data table, enter the following:

age

firstName

43

Mitsue

17

Leota

28

Abel

91

Alishia

26

Willow

42

Jose

75

Emerson

4. Click Save.

Configure the Dropdown Component

Next, add a Dropdown component. In Express View, this Dropdown component lets you pick the key to sort the table by. The keys correspond to the column headers in your Data Table. You define these keys, age and firstName, in the Dropdown component's Values table.

1. Drag and drop a Dropdown component onto your canvas, placing it below the Data Table.
2. Enter sortBy in the Property ID field.
3. Enter Sort by: in the Label Text field.
4. In the Values table, enter the following:

Option Label

Data Source Values

Age (Youngest to Oldest)

age

First Name (Alphabetical Order)

firstName

These Option Labels set the Sort operator to sort in ascending order. If you decide to sort in descending order, remember to adjust the Option Labels.

5. Click Save.

Configure the Data Workflow Component

Next, create the Data Workflow which contains the Sort operator.

1. Drag and drop a Data Workflow component onto your canvas, placing it below the Data Table.
2. Enter dwfSort in the Canvas LabelText  and Property Name fields.

Configure the First Input Operator

This operator brings your source data into the Data Workflow.

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

Setting

Value

Category

Input

Component

dtTable

Required

Yes

Source

Default

Configure the First Console Operator

This Console operator helps you see the before of your Data Workflow in the DevTools Console. Later, you'll add an after Console operator, making it easy to see exactly what the Sort operator does.

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

Setting

Value

Category

Console

Label

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

Configure the Second Input Operator

The Sort operator needs to know what gets selected in the Dropdown component. The first step is to use an Input operator to get the Dropdown's input into the Data Workflow. In the next step, you connect this Input operator to the Sort operator's argument port.

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

Setting

Value

Category

Input

Component

sortBy

Required

Yes

Source

Default

Configure the Sort Operator

Now you're ready to set up the Sort operator. There are 2 settings to pay attention to in the Info window:

  • Sort Keys: Here, enter _arg, since you're using the sortBy Input operator's value to set the sort key. _arg acts as an alias for whatever input is coming into the Sort operator's argument port.

  • Asc/Desc: Entering asc sorts by the specified key in ascending order. Entering desc sorts by the specified key in descending order. Here, enter asc, but feel free to try out both options.

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

Setting

Value

Category

Sort

Label

Sort Data

Sort Keys

_arg

Asc/Desc

asc
3. Connect the output port (right) of the dtTable Input operator to the input port (left) of the Sort operator.
4. Connect the output port (right) of the sortBy Input operator to the argument port (top) of the Sort operator.

Configure the Second Console Operator

Now, add a Console operator so you can easily see the after of your Data Workflow. Notice that the Sort operator only outputs to this Console operator. When creating applications, you can also use a dedicated Output operator. Then, you can connect that Output operator to a Hidden component. This lets you store the sorted table and reference it elsewhere in your application.

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

Setting

Value

Category

Console

Label

After Sorting
3. Connect the output port (right) of the Sort operator to the input port (left) of the Console operator.
4. Click Save.

Configure the Button Component

Finally, add a button you can click in Express View to trigger your Data Workflow.

1. Drag and drop a Button component onto your canvas, placing it above the Data Workflow.
2. Enter btnRunDWF in the Property ID field.
3. Enter Run Sort in the Label Text field.
4. Select Event as the Action Type.
5. Enter dwfSort in the Trigger on Click field.

6. Click Save.
7. Save your module.

Now you're ready to test out your Sort operator. Preview your module in Express View and open the DevTools Console. Click the Run Sort button and watch what displays in the DevTools Console when sorted by age:

And here's how it looks when sorted by name:

Changing the Settings of a Sort Operator

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

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.

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

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 find the completed Sort Operator lab here: https://training.unqork.io/#/form/5f472cfac7aa420218812198/edit.