Sorter¶

This control renders a Sorter FormCell to be used in a filter-options page. It allows user to choose the field to be used as sorter.

Supported only on ObjectTable, ObjectCollection, ContactCell, Data Table, Grid Table and ExtensionCollection. Please avoid to set this property as false if you intend to use FilterFeedbackBar as well.

Sorter Properties¶

Property	Type	Required	Default
AllowEmptySelection	`boolean`	No	`true`
Caption	`string`	No
FormatRule	Rule	No	`""`
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
Label	`string`	No
Separator	`boolean`	No	`true`
SortByItems	complex	Yes
Validation	Validation	No
_Name	`string`	Yes
_Type	`const`	Yes
validationProperties	ValidationProperties	No

AllowEmptySelection¶

Disables or enables the selection of empty value set. Please avoid to set this property as false if you intend to use FilterFeedbackBar as well.

type: boolean
default: true

Caption¶

Displays label on the control.

type: string

FormatRule¶

If specified, the given rule executes when a control is initialized or when a value changes.

type: Rule
default: ""

HelperText¶

Helper text to be displayed if there is no validation view.

type: string

IsEditable¶

Indicates if the cell’s value may be modified.

type: boolean
default: true

IsVisible¶

Sets the visibility of the control.

type: boolean
default: true

Label¶

Displays label when being displayed as selected item on filter feedback bar.

type: string

Separator¶

Sets the visibility of the separator line below the control. This property will take precedence over ControlSeparator in section and is only supported for Form Cell control in Sectioned Table and not supported in Form Cell Container.

type: boolean
default: true

SortByItems¶

The items to sort by.

type: complex

SortByItems Value¶

Any following options needs to be fulfilled.

Option 1¶

Array type:

All items must be of the type: string

Option 2¶

FixedCollection

Validation¶

The validation view properties.

type: Validation

_Name¶

The _Name value will also function as CustomQueryGroup to match with FastFilters in FilterFeedbackBar.

type: string

_Type¶

type: const

The value of this property must be:

"Control.Type.FormCell.Sorter"

validationProperties¶

Deprecated. Please use Validation property. The validation view properties.

type: ValidationProperties

Examples¶

With a simple fixed collection specifier¶

{
  "_Type": "Page",
  "_Name": "FilterPage",
  "Controls": [
    {
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.Sorter",
            "_Name": "OrderBy",
            "AllowEmptySelection": true,
            "Caption": "Sort By",
            "SortByItems": ["OrderId", "BusinessArea", "OrderType"],
            "IsEditable": true,
            "HelperText": "This is helper text",
            "Validation": {
              "Message": "This is validation view message",
              "Visible": true,
              "SeparatorVisible": true,
              "Styles": {
                "Message": "ValidationMessage",
                "ValidationView": "ValidationView"
              }
            }
          }]
        }
      ]
    }
  ]
}

With a complex fixed collection specifier¶

{
  "Controls": [
    {
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.Sorter",
            "_Name": "SortFilter",
            "AllowEmptySelection": false,
            "Caption": "Sort By",
            "SortByItems": [{
              "ReturnValue": "OrderId",
              "DisplayValue": "Job ID"
            }, {
              "ReturnValue": "OrderDescription",
              "DisplayValue": "Description"
            }, {
              "ReturnValue": "Priority",
              "DisplayValue": "Priority"
            }],
            "IsEditable":true
          }]
        }
      ]
    }
  ]
}

Sorter queries having asc/desc attribute and sorter queries with multiple attributes.¶

{
  "Controls": [
    {
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.Sorter",
            "_Name": "SortFilter",
            "AllowEmptySelection": false,
            "Caption": "Sort By",
            "SortByItems": [
              {
                "ReturnValue": "OrderId desc",
                "DisplayValue": "OrderId Descending"
              }, 
              {
                "ReturnValue": "OrderId asc",
                "DisplayValue": "OrderId Ascending"
              },
              {
                "ReturnValue": "Priority ,OrderId",
                "DisplayValue": "Priority (default ascending) and then OrderId (default ascending)"
              },
              {
                "ReturnValue": "Priority desc ,OrderId",
                "DisplayValue": "Priority descending and then OrderId (default ascending)"
              },
              {
                "ReturnValue": "Priority ,OrderId desc",
                "DisplayValue": "Priority (default ascending) and then OrderId descending"
              }
              {
                "ReturnValue": "Priority desc ,OrderId asc",
                "DisplayValue": "Priority descending and then OrderId ascending"
              }],
            "IsEditable":true
          }]
        }
      ]
    }
  ]
}

Sorter Form Cell with Rule and Global support¶

{
  "Controls": [
    {
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.Sorter",
            "_Name": "SortFilter",
            "AllowEmptySelection": false,
            "Caption": "Sort By",
            "SortByItems": [
              {
                "ReturnValue": "/MDKDevApp/Globals/DescendingSorter.global",
                "DisplayValue": "Descending order of BusinessArea"
              },
              {
                "ReturnValue": "/MDKDevApp/Rules/SorterQueries/AscendingSorterQuery.js",
                "DisplayValue": "Ascending order of OrderType"
              },
              {
                "ReturnValue": "/MDKDevApp/Rules/SorterQueries/DescendingSorterQuery.js",
                "DisplayValue": "Descending order of OrderType"
              },
              {
                "ReturnValue": "/MDKDevApp/Rules/SorterQueries/MultipleColumnSorterQuery.js",
                "DisplayValue": "Descending order of BusinessArea and then ascending order of OrderId"
              }],
            "IsEditable":true
          }]
        }
      ]
    }
  ]
}

// AscendingSorterQuery.js - Rule returing sorter query string
function AscendingSorterQuery() {
    return "OrderType asc";
  }

// DescendingSorterQuery.js - Rule returing promise of sorter query string
function DescendingSorterQuery() {
    return Promise.resolve("OrderType desc");
  }

// MultipleColumnSorterQuery.js - Rule returing promise of sorter query string with multiple attributes
export default function MultipleColumnSorterQuery() {
    return Promise.resolve("BusinessArea desc, OrderId asc");
}

Style Classes Definition¶

/* Validation view */
.ValidationView {
  background-color: #83AF9B;
  border-top-color: #ff00ee;
}

/* Validation message */
.ValidationMessage {
  font-size: 16;
  font-color: #0000ff;
}