Filter¶

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

Filter Properties¶

Property	Type	Required	Default
AllowEmptySelection	`boolean`	Optional	`true`
AllowMultipleSelection	`boolean`	Optional	`true`
Caption	`string`	Optional
FilterProperty	complex	Required
HelperText	`string`	Optional
IsEditable	`boolean`	Optional	`true`
IsVisible	`boolean`	Optional	`true`
Label	`string`	Optional
OnValueChange	ActionOrRule	Optional
Styles	`object`	Optional
_Name	`string`	Required
_Type	`const`	Required
validationProperties	ValidationProperties	Optional

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¶

The property of the Entities being filtered that the EntitySet will be filtered on.

If the resolved value of this property is a string, it will be interpreted as the name of the property to filter on.

If the resolved value of this property is an object, it means a fixed subset of possible values is desired. It will have a values properties with type Fixed Collection Specifier. See below for 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¶

string

Condition 2¶

object with following properties:

Property	Type	Required
`caption`	string	Optional
`name`	string	Required
`values`		Optional

caption¶

The display name of the property to filter on.

type: string

name¶

The name of the property for filter on.

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

Styles¶

Set styles for Background and Caption.

type: object with following properties.

Property	Type	Required	Default
Background	`string`	Optional
Caption	`string`	Optional

Background¶

The string value is a style class name for Background.

Background style class

Caption¶

The string value is a style class name for Caption.

Caption style class

_Name¶

type: string

_Type¶

type: const

The value of this property must be equal to:

"Control.Type.FormCell.Filter"

validationProperties¶

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,
        "validationProperties": {
          "ValidationMessage": "Validation Message",
          "ValidationMessageColor": "ff0000",
          "SeparatorBackgroundColor": "000000",
          "SeparatorIsHidden": false,
          "ValidationViewBackgroundColor": "fffa00",
          "ValidationViewIsHidden": false
        },
        "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: UIFontTextStyleBody;  /* iOS Only */
  font-typeface: bold;  /* Android Only */
  font-size: 16px;
}