Sort Operator

Overview

A static image displaying the Data Workflow component's Sort Operator icon and information window.

The Sort operator helps you organize table data in ascending or descending order. This operator is specifically useful when you want to prioritize, group, or analyze values in your application In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module..

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

About the Info Window

Here's a breakdown of each setting in the Sort operator's Info window:

Info

Category

Grayed out and non-adjustable setting indicating the operation type.

Label

Sets the label for your operator, displaying below the 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.

Preserve Argument Type

When selected, this setting ensures the argument data type is respected when the operator executes.

Sort Keys

Defines the key (column) by which you want to sort the table. Enter _arg in this field to sort by the value passing 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 a Sort Operator

Now, let's explore the Sort operator to sort table data. This example predefines the sort order as ascending. You can test it by adjusting the sort order to descending, too. Later, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., you can use a Dropdown component to pick the key (column) to sort the table by.

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

Configure the Data Table Component

You'll begin by adding a Data Table component and populate it with data that you want to sort.

1. In the Module Builder, drag and drop a Dropdown Component IconData Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter dtTable.
3. In the data table, enter the following:
 

A

B

1

age

firstName

2

43

Mitsue

3

17

Leota

4

28

Abel

5

91

Alishia

6

26

Willow

7

42

Jose

8

75

Emerson

A static image displaying the Data Table component's completed configuration in the configuration window.

4. Click Save Component.

Configure the Dropdown Component

Next, add a Dropdown component to select the key to sort the table by. The keys correspond to the column headers in your Data Table component. You'll define the age and firstName keys in the Dropdown component's Values table.

1. Drag and drop a Dropdown Component Icon Dropdown component onto your canvas, placing it below the Dropdown Component IconData Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter sortBy.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field., enter Sort by:.
4. In the Values table, enter the following:
 

Option Label

Data Source Values

1

Age (Youngest to Oldest)

age

2

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.

A static image displaying the Dropdown components configuration settings in Udesigner.

5. Click Save Component.

Configure the Data Workflow Component

Next, you'll configure the Data Workflow component, which performs the sort operation.

1. Drag and drop a Data Workflow onto your canvas, placing it below the sortBy Dropdown Component Icon Dropdown component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter dwfSort.

Configure the Input Operators

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

Info

Category

Input

Component

dtTable

Required

Yes

Source

Default

3. Drag and drop a another Input operator onto your Data Workflow canvas.
4. Configure the second operator's Info window as follows:

Info

Category

Input

Component

sortBy

Required

Yes

Source

Default

Configure the Sort Operator

Now set up the Sort operator. There are two settings to pay attention to in the Info window:

  • Sort Keys: Enter _arg here because you're using the sortByInput operator's value to set the sort key. The _arg statement 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 both options.

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

Info

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 DataSort operator.
4. Connect the output port (right) of the sortBy Input operator to the argument port (top) of the Sort DataSort operator.

Configure the First Console Operator

Now, add a Console operator before the Sort operator to view the current order in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

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

Info

Category

Console

Label

Before Sorting

3. Connect the output port (right) of the dtTableInput operator to the input port (left) of the Before SortingConsole operator.

Configure the Second Console Operator

Then, add a second Console operator to view the sorted data after the data passes through the Sort operator.

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

Info

Category

Console

Label

After Sorting

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

A static image displaying the data workflow configuration which renames the field name.

4. Click Save Component.

Configure the Button Component

Lastly, configure a Button component to trigger the Data Workflow in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..

1. Drag and drop a Button component Icon Button component onto your canvas, placing it between the sortBy Dropdown Component Icon Dropdown and dwfSortData Workflow component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnRunDWF.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Run Sort.
4. From the Action Type drop-down, select Event.
5. From the On Click drop-down, select dwfSort.

A static image displaying a button component settigns.

6. Click Save Component.
7. Save your module.

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

A static image displaying the completed configuration in the Module Builder.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Click Run Sort and view the data getting sorted based on age.

A static image displaying the configuration in the Preview Page.

Overview

A static image displaying the Data Workflow component's Sort Operator icon and information window.

The Sort operator helps you organize table data in ascending or descending order. This is specifically used when you want to prioritize, group, or analyze values in your application In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module..

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

About the Info Window

Here's a breakdown of each setting in the Rename Field operator's Info window:

Setting

Description

Category

Grayed out and non-adjustable setting indicating the operation type.

Label

Sets the label for your operator, displaying below the 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.

Preserve Argument Type

When selected, this setting ensures the argument data type is respected when the operator executes.

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 a Rename Field Operator

Now, let's explore the Sort operator to sort table data. This example predefines the sort order as ascending. You can test it by adjusting the sort order to descending, too. Later, in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., you can use a Dropdown component to pick the key (column) to sort the table by.

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

Configure the Data Table Component

You'll begin by adding a Data Table component and populate it with data that you want to sort.

1. In the Module Builder, drag and drop a Dropdown Component IconData Table component onto your canvas.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter dtTable.
3. To the left of the component's configuration window, click Data.
4. In the data table, enter the following:

A

B

age

firstName

43

Mitsue

17

Leota

28

Abel

91

Alishia

26

Willow

42

Jose

75

Emerson

A static image displaying the Data Table component's completed configuration in the configuration window.

5. Click Save & Close.

Configure the Dropdown Component

Next, add a Dropdown component to select the key to sort the table by. The keys correspond to the column headers in your Data Table component. You'll define the age and firstName keys in the Dropdown component's Values table.

1. Drag and drop a Dropdown Component Icon Dropdown component onto your canvas, placing it below the Dropdown Component IconData Table component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter sortBy.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field., enter Sort by:.
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.

A static image displaying the Dropdown components configuration settings in Udesigner.

5. Click Save & Close.

Configure the Data Workflow Component

Next, you'll set up the Data Workflow component, which performs the sort operation.

1. Drag and drop a Data Workflow onto your canvas, placing it below the sortBy Dropdown Component Icon Dropdown component.
2. In the Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . and Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. fields, enter dwfSort.

Configure the Input Operators

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

Setting

Value

Category

Input

Component

dtTable

Required

Yes

Source

Default

3. Drag and drop a second Input operator onto your Data Workflow canvas.
4. Configure the second operator's Info window as follows:

Setting

Value

Category

Input

Component

sortBy

Required

Yes

Source

Default

Configure the Sort Operator

Now set up the Sort operator. There are two settings to pay attention to in the Info window:

  • Sort Keys: Enter _arg here because you're using the sortByInput operator's value to set the sort key. The _arg statement 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 both options.

1. Drag and drop a Sort operator onto your Data Workflow canvas.
2. Configure 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 DataSort operator.
4. Connect the output port (right) of the sortBy Input operator to the argument port (top) of the Sort DataSort operator.

Configure the First Console Operator

Now, add a Console operator before the Sort operator to view the current order in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

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

Setting

Value

Category

Console

Label

Before Sorting

3. Connect the output port (right) of the dtTableInput operator to the input port (left) of the Before SortingConsole operator.

Configure the Second Console Operator

Then, add a second Console operator to view the sorted data after the data passes through the Sort operator.

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

Setting

Value

Category

Console

Label

After Sorting

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

Here's how the completed Data Workflow looks:

A static image displaying the data workflow configuration which renames the field name.

Configure the Button Component

Lastly, configure a Button component to trigger the Data Workflow in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..

1. Drag and drop a Button component Icon Button component onto your canvas, placing it between the sortBy Dropdown Component Icon Dropdown and dwfSortData Workflow component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnRunDWF.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Run Sort.
4. To the left of the component's configuration window, click Actions Icon Actions.
5. Set the Action Type as Event.
6. From the On Click drop-down, select dwfSort.

A static image displaying a button component settigns.

7. Click Save & Close.
8. Save your module

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

A static image displaying the completed classic designer configuration in the Module Builder.

Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Click Run Sort and view the data getting sorted based on age.

A static image displaying the configuration in the Preview Page.