Skip to content

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

  • type: boolean
  • default: true

AllowMultipleSelection

Disables or enables the selection of multiple entries.

  • 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

Condition 3


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

OnValueChange

Action or rule to be performed after value is changed.


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.

Caption

The string value is a style class name for Caption.


_Name

  • type: string

_Type

  • type: const

The value of this property must be equal to:

"Control.Type.FormCell.Filter"

validationProperties

The validation view properties.


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",
        "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;
}