MultiSorter¶

This control renders a MultiSorter FormCell to be used in a filter page. It allows user to define sort order on multiple sort items, change the sort sequence of the items by dragging various items, change the sort direction for each sort items (ascending or descending order), and customize the ascending/descending labels.

Supported only on ObjectTable, ObjectCollection, ContactCell, Data Table, Grid Table and ExtensionCollection.

Note: Please avoid to use this control with Sorter control in the same filter page together.

When assigning a rule to a property of MultiSorter, the rule will be passed an instance of the following proxy class as an argument:

MultiSorterFormCellProxy

MultiSorter 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`
Items	complex	Yes
Label	`string`	No
Separator	`boolean`	No	`true`
Styles	`object`	No
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

Items¶

The items to sort by.

type: complex

Items Value¶

Any following options needs to be fulfilled.

Option 1¶

Array type:

All items must be of the type: string

Option 2¶

MultiSorterFixedCollection

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

Styles¶

Set styles for components in MultiSorterFormCell control

type: object with following properties.

Property	Type	Required
Caption	string	No
MultiSorter	string	No
`Items`	object	No

Caption¶

The string value is a style class name of Caption.

Caption style class

MultiSorter¶

The string value is a background style class name of MultiSort.

Background style class

Items¶

Include style class name for DisplayValue and DirectionLabel.

type: object with following properties.

Property	Type	Required	Default
`DisplayValue`	string	No
`DirectionLabel`	string	No

DisplayValue¶

The string value is a style class name of DisplayValue.

DirectionLabel¶

The string value is a style class name of DirectionLabel.

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

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.MultiSorter",
            "_Name": "OrderBy",
            "AllowEmptySelection": true,
            "Caption": "Sort By",
            "Items": ["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"
              }
            },
            "Styles": {
              "Caption": "CaptionStyleClassName",
              "MutiSorter": "BackgroundClassName",
              "Items": {
                "DisplayValue": "DisplayValueStyleClassName",
                "DirectionLabel": "DirectionLabelStyleClassName"
              }
            }
          }]
        }
      ]
    }
  ]
}

Set Style for MultiSorter control¶

Since MultiSorter control has nested control style format, like this:

"Styles": {
  "Caption": "CaptionStyleClassName",
  "MutiSorter": "BackgroundClassName",
  "Items": {
    "DisplayValue": "DisplayValueStyleClassName",
    "DirectionLabel": "DirectionLabelStyleClassName"
  }
}

If we want to set style for DisplayValue or DirectionLabel, we could call setStyle() like this:

multiSorterControl.setStyle("DisplayValueStyleClassName", "Items/DisplayValue");
multiSorterControl.setStyle("DirectionLabelStyleClassName", "Items/DirectionLabel");

With a complex fixed collection specifier¶

We can set sort items with a complex fixed collection specifier with customized ascending and descending labels. If the label value is not specified, localized Ascending and Descending will be the default value.

{
  "Controls": [
    {
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.MultiSorter",
            "_Name": "SortFilter",
            "AllowEmptySelection": false,
            "Caption": "Sort By",
            "Items": [{
              "ReturnValue": "OrderId",
              "DisplayValue": "Job ID",
              "AscendingLabel": "Smaller First",
              "DescendingLabel": "Larger First"
            }, {
              "ReturnValue": "OrderDescription",
              "DisplayValue": "Description"
            }, {
              "ReturnValue": "Priority",
              "DisplayValue": "Priority",
              "AscendingLabel": "Higher",
              "DescendingLabel": "Lower"
            }],
            "IsEditable":true
          }]
        }
      ]
    }
  ]
}

Sorter Form Cell with Rule and Global support¶

{
  "Controls": [
    {
      "Sections": [
        {
          "Controls": [{
            "_Type": "Control.Type.FormCell.MultiSorter",
            "_Name": "SortFilter",
            "AllowEmptySelection": false,
            "Caption": "Sort By",
            "Items": [
              {
                "ReturnValue": "/MDKDevApp/Globals/Sorter.global",
                "DisplayValue": "BusinessArea"
              },
              {
                "ReturnValue": "OrderType",
                "DisplayValue": "OrderType",
                "AscendingLabel": "/MDKDevApp/Rules/SorterQueries/AscendingSorterLabel.js",
                "DescendingLabel": "Descending"
              },
              {
                "ReturnValue": "OrderId",
                "DisplayValue": "OrderId",
                "AscendingLabel": "Smaller First",
                "DescendingLabel": "/MDKDevApp/Rules/SorterQueries/DescendingSorterLabel.js"
              }],
            "IsEditable":true
          }]
        }
      ]
    }
  ]
}

// Sorter.global - Global file returning ReturnValue for multi sorter
{
  "_Type": "string",
  "Value": "BusinessArea"
}

// AscendingSorterLabel.js - Rule returing ascending label string
function AscendingSorterLabel() {
    return "Ascending";
  }

// DescendingSorterLabel.js - Rule returing promise of descending label string
function DescendingSorterLabel() {
    return Promise.resolve("Larger First");
  }

Style Classes Definition¶

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

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