Filter¶

This control renders a Filter FormCell to be used in a filter-options page.

Filter Properties¶

Property	Type	Required	Default
AllowEmptySelection	`boolean`	No	`true`
AllowMultipleSelection	`boolean`	No	`true`
Caption	`string`	No
FilterProperty	complex	Yes
HelperText	`string`	No
IsEditable	`boolean`	No	`true`
IsVisible	`boolean`	No	`true`
Label	`string`	No
OnValueChange	ActionOrRule	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

AllowMultipleSelection¶

Disables or enables the selection of multiple entries. 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

FilterProperty¶

Property of the entities used to filter the EntitySet.

If the resolved value of this property is a string, it will be interpreted as the property name for filtering and the distinct values are retrieved from the EntitySet.

If the resolved value of this property is an object, it means a fixed subset of possible values. It has a values property of FixedCollectionSpecifier type. See below for the expected structure.

In a Filter Page, every Filter or ListPicker must have a unique FilterProperty.

type: complex

FilterProperty Value¶

One of the following conditions need to be fulfilled.

Condition 1¶

Property name for filtering. MDK will try to get its distinct values from the filtered EntitySet.

Caution: Using FilterProperty may lead to longer response time or memory shortage when the EntitySet rows are too large. It is advised to use Option 2 or 3 instead. In Option 2, use static values or a Rule, which returns the object of type FilterProperty to retrieve from a (small) dictionary EntitySet.

string

Condition 2¶

object with following properties:

Property	Type	Required
`caption`	string	No
`name`	string	Yes
`values`		No

caption¶

The display name of the property for filtering.

type: string

name¶

The property name for filtering.

type: string

values¶

type: FixedCollectionSpecifier

Condition 3¶

QuerySpecifier

HelperText¶

Helper text to be displayed if there is no validation view. Specifically for Android, the helper text can only be displayed if AllowMultipleSelection is true.

type: string

IsEditable¶

Disables or enables interaction.

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

OnValueChange¶

Action or rule to be performed after value is changed.

type: ActionOrRule
Formatter and Binding are not supported

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 Background and Caption.

type: object with following properties.

Property	Type	Required	Default
Background	string	No
Caption	string	No

Background¶

The string value is a style class name of Background.

Background style class

Caption¶

The string value is a style class name of Caption.

Caption style class

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

validationProperties¶

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

type: ValidationProperties

Examples¶

Filter Property - Literal¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Value": "FormCell Example",
  "Controls": [{
    "Sections": [{
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Filter",
        "_Name": "FilterFormCell",
        "AllowMultipleSelection": false,
        "AllowEmptySelection": false,
        "Caption": "Filter by",
        "FilterProperty": "EntityColour",
        "IsEditable": true,
        "HelperText": "This is helper text"
      }]
    }]
  }]
}

Filter Property - Global¶

{
  "Value": "FormCell Example",
  "Controls": [{
    "_Type": "Page",
    "_Name": "FormCellsPage",
    "Sections": [{
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Filter",
        "_Name": "FilterFormCell",
        "AllowMultipleSelection": false,
        "AllowEmptySelection": false,
        "Caption": "Sort By",
        "Label": "Sort",
        "FilterProperty": "/AssetWorkManager/Globals/ThirdTest.global",
        "IsEditable": true
      }]
    }]
  }]
}

Filter Property - Rule¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Value": "FormCell Example",
  "Controls": [{
    "Sections": [{
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Filter",
        "_Name": "FilterFormCell",
        "AllowMultipleSelection": false,
        "AllowEmptySelection": false,
        "Caption": "Sort By",
        "FilterProperty": "/AssetWorkManager/Rules/OneTwoThree.js",
        "IsEditable": true
      }]
    }]
  }]
}

Filter Property - Array¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Value": "FormCell Example",
  "Controls": [{
    "Sections": [{
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Caption": "Section1",
      "Controls": [
        {
          "_Type": "Control.Type.FormCell.Filter",
          "_Name": "FilterFormCell",
          "AllowMultipleSelection": false,
          "AllowEmptySelection": false,
          "Caption": "By OrderId",
          "FilterProperty":[
            {
              "ReturnValue": "OrderId gt '4004500'",
              "DisplayValue": "OrderId > 4004500"
            },
            {
              "ReturnValue": "OrderId gt '4004414' and OrderId lt '4004500'",
              "DisplayValue": "OrderId > 4004414 & OrderId < 4004500"
            }
          ],
          "IsEditable": true
        }
      ]
    }]
  }]
}

Filter Property - Array with Rule and Global support¶

{
    "Caption": "Filter",
    "ActionBar": {
      "Items": [
        {
          "Position": "left",
          "SystemItem": "Cancel",
          "OnPress": "/MDKDevApp/Actions/Navigation/CancelChangeSet.action"
        },
        {
          "Position": "right",
          "SystemItem": "Done",
          "OnPress": "/MDKDevApp/Actions/Navigation/ClosePage.action"
        }
      ]
    },
    "Result": [
      "#Page:FilterPage/#Control:OrderId/#Value"
    ],
    "Controls": [
      {
        "Sections": [
          {
            "Caption": "Filter",
            "Controls": [
              {
                "AllowMultipleSelection": true,
                "AllowEmptySelection": true,
                "Caption": "Filter By OrderId",
                "FilterProperty": [
                    {
                        "ReturnValue": "/MDKDevApp/Globals/QueryString1.global",
                        "DisplayValue": "OrderId > 4004760"
                    },
                    {
                        "ReturnValue": "/MDKDevApp/Rules/FilterQueries/LessThanQuery.js",
                        "DisplayValue": "OrderId < 4000060"
                    },
                    {
                        "ReturnValue": "/MDKDevApp/Rules/FilterQueries/LogicalAndQuery.js",
                        "DisplayValue": "OrderId > 4004440 and OrderId < 4004450"
                    }
                ],
                "_Name": "OrderId",
                "_Type": "Control.Type.FormCell.Filter",
                "IsEditable": true
              }
            ]
          }
        ],
        "_Name": "FormCellContainer",
        "_Type": "Control.Type.FormCellContainer"
      }
    ],
    "_Type": "Page",
    "_Name": "FilterPage"
  }

// OneTwoThree.js - Returning a property name
function FormCellFilterItems(context) {
  return 'Priority';
}

// OneTwoTree.js - Returning preset values
function FormCellFilterItems(context) {
  return {
    name: 'Priority',
    values: [{
      ReturnValue: '1',
      DisplayValue: 'Low'
    }, {
      ReturnValue: '2',
      DisplayValue: 'Medium'
    }]
  };
}

// LessThanQuery.js - Rule returing filter query string
function LessThanQuery() {
    return "OrderId lt '4000060'";
}

// LogicalAndQuery.js - Rule returning promise of filter query string 
function LogicalAndQuery() {
    return Promise.resolve("OrderId gt '4004440' and OrderId lt '4004450'");
}

Validation¶

{
  "_Type": "Page",
  "_Name": "FormCellsPage",
  "Value": "FormCell Example",
  "Controls": [{
    "Sections": [{
      "_Type": "Control.Type.FormCellContainer",
      "_Name": "FormCellContainer",
      "Caption": "Section1",
      "Controls": [{
        "_Type": "Control.Type.FormCell.Filter",
        "_Name": "FilterFormCell",
        "AllowMultipleSelection": false,
        "AllowEmptySelection": false,
        "Caption": "Sort by",
        "FilterProperty": "TestProperty",
        "IsEditable": true,
        "Validation": {
          "Message": "This is validation view message",
          "Visible": true,
          "SeparatorVisible": true,
          "Styles": {
            "Message": "ValidationMessage",
            "ValidationView": "ValidationView"
          }
        },
        "Styles": {
          "Background": "FilterFormCellBackground",
          "Caption": "FilterFormCellCaption"
        }
      }]
    }]
  }]
}

Style Classes Definition¶

/* Filter Form Cell - Background */
.FilterFormCellBackground {
  background-color: yellow;
}

/* Filter Form Cell - Caption */
.FilterFormCellCaption {
  background-color: #0000FF;
  color: black;
  font-style: body;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}

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

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