FilterBar¶
A horizontal bar that appears above a list of content and below the section header, containing filter and sorter controls. It renders each control as an interactive chip (also referred to as a button), which communicates the currently applied filters and allows users to quickly apply frequently-used filters. Chips with a downward chevron icon indicate that selecting them opens a bottom sheet or popover dialog for more complex selection, where users can interact with and apply filters accordingly. Users can scroll the bar horizontally to see any additional chips that may be off-screen. FilterFeedbackBar defined on SectionedTable would not be displayed if section level FilterBar is defined.
When assigning a rule to a property of FilterBar, the rule will be passed an instance of the following proxy class as an argument:
FilterBar Properties¶
| Property | Type | Required |
|---|---|---|
| Filters | Rule | No |
| Sections | Section[] | No |
| Styles | object |
No |
| _Name | string |
No |
| _Type | const |
No |
Filters¶
The filters to be applied on the filter bar, this property can only be set with a rule. It accepts only an array of FilterSelection objects that must be returned from the assigned rule. The FilterSelection object could be created through createFilterSelection and createSorterSelection client APIs by providing the name of the control and the value(s) to be selected. The FilterSelection object would override the value defined in the control definition under the same name (_Name).
- type: Rule
- default:
""
Sections¶
List of sections defined for the filter controls.
- type:
Section[]
All array items must be of the type: Section
Styles¶
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
| Bar | string |
No | |
| Active | string |
No | |
| InActive | string |
No |
Bar¶
The style to be applied for FilterBar.
- FilterBar style class
Active¶
The style to be applied when the filter item is in active state. filter control would also be considered as active if an initial value is set.
- FilterBarItem style class
InActive¶
The style to be applied when the filter item is in inactive state.
- FilterBarItem style class
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be:
"Control.Type.FilterBar"
Examples¶
Page with ObjectTableSection with FilterBar¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"FilterBar": {
"_Type": "Control.Type.FilterBar",
"_Name": "SortFilter",
"Filters": "/MDKDevApp/Rules/FilterBar/InitialFilters.js",
"Sections": [
{
"Controls": [
{
"_Name": "Priority",
"_Type": "FilterBar.Type.Segmented",
"Label": "Priority",
"Value": "",
"Items": [
{
"DisplayValue": "Low",
"ReturnValue": "1"
},
{
"DisplayValue": "Medium",
"ReturnValue": "2"
},
{
"DisplayValue": "High",
"ReturnValue": "3"
}
],
"SimpleQuery": {
"Property" : "Priority",
"Operator": "eq"
},
"DisplayOnBar": true
},
{
"_Name": "OrderIdCompare",
"_Type": "FilterBar.Type.Segmented",
"Label": "OrderID Compare",
"Value": "",
"Items": [
{
"DisplayValue": "< 4004760",
"ReturnValue": "OrderId lt '4004760'"
},
{
"DisplayValue": "= 4004760",
"ReturnValue": "OrderId eq '4004760'"
},
{
"DisplayValue": "> 4004760",
"ReturnValue": "OrderId gt '4004760'"
}
],
"AllowEmptySelection": true,
"AllowMultipleSelection": false,
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "OrderIdA",
"_Type": "FilterBar.Type.Segmented",
"Label": "OrderID Static",
"Value": "",
"Items": "/MDKDevApp/Rules/FilterBar/GetOrderIDItems.js",
"SimpleQuery": {
"Property" : "OrderId",
"Operator": "lt"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "OrderIdB",
"_Type": "FilterBar.Type.ListPicker",
"Label": "Order ID >=",
"Value": "4000034",
"PickerItems": {
"DisplayValue": "{OrderDescription}",
"ReturnValue": "{OrderId}",
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKDevApp/Services/Amw.service",
"QueryOptions": "$top=20"
}
},
"Search": {
"Enabled": true
},
"AllowMultipleSelection": false,
"AllowEmptySelection": true,
"SimpleQuery": {
"Property" : "OrderId",
"Operator": "ge"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
}
]
},
{
"Controls": [
{
"_Name": "Favorite",
"_Type": "FilterBar.Type.Switch",
"Label": "Is Favorite?",
"HelperText": "Favorite is",
"SimpleQuery": {
"Property" : "Favorite"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "Quantity",
"_Type": "FilterBar.Type.Slider",
"Label": "Qty",
"MinValue": 1,
"MaxValue": 111,
"Step": 0.5,
"DecimalPlaces": 1,
"HelperText": "Quantity is",
"SimpleQuery": {
"Property" : "Quantity",
"Operator": "ge"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
}
]
},
{
"Controls": [
{
"_Name": "MultiSorter",
"_Type": "FilterBar.Type.MultiSorter",
"Label": "Multi sorter",
"Value": "",
"Items": [
{
"ReturnValue": "OrderId",
"DisplayValue": "OrderId",
"AscendingLabel": "Lowest first",
"DescendingLabel": "Highest first"
},
{
"ReturnValue": "Priority",
"DisplayValue": "Priority - Long text of Products be wrapped up",
"AscendingLabel": "This is very long ascending text be wrapped up",
"DescendingLabel": "Highest first"
},
{
"ReturnValue": "HeaderFunctionLocation",
"DisplayValue": "HeaderFunctionLocation",
"AscendingLabel": "Ascending",
"DescendingLabel": "Descending"
},
{
"ReturnValue": "CreationDate",
"DisplayValue": "CreationDate",
"AscendingLabel": "Earliest first",
"DescendingLabel": "Latest first"
},
{
"ReturnValue": "DueDate",
"DisplayValue": "DueDate",
"AscendingLabel": "Earliest first",
"DescendingLabel": "Latest first"
}
],
"HelperText": "Multi sort by",
"DisplayOnBar": true
}
]
}
]
},
"Header": {
"UseTopPadding": false
},
"ObjectCell": {
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKDevApp/Images/workorder.png",
"DetailImageIsCircular": false,
"Icons": [
"/MDKDevApp/Images/icon_severity_medium.png",
"/MDKDevApp/Images/open.png"
],
"OnPress": "/MDKDevApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKDevApp/Images/workorder_details.png",
"Title": "{OrderId}"
},
"Search": {
"Enabled": true,
"Placeholder": "Item Search",
"BarcodeScanner": true,
"Delay": 500,
"OnScanPress": "/MDKDevApp/Rules/OData/WorkOrderScan.js",
"MinimumCharacterThreshold": 3
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKDevApp/Services/Amw.service",
"QueryOptions": "$orderby=OrderId"
},
"_Name": "Section",
"_Type": "Section.Type.ObjectTable"
}
]
}
]
}
Page with ObjectTableSection with FilterBar and Styling¶
{
"_Type": "Page",
"_Name": "SectionedTablePage",
"Caption": "Work Orders",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"FilterBar": {
"_Type": "Control.Type.FilterBar",
"_Name": "SortFilter",
"Filters": "/MDKDevApp/Rules/FilterBar/InitialFilters.js",
"Sections": [
{
"Controls": [
{
"_Name": "Priority",
"_Type": "FilterBar.Type.Segmented",
"Label": "Priority",
"Value": "",
"Items": [
{
"DisplayValue": "Low",
"ReturnValue": "1"
},
{
"DisplayValue": "Medium",
"ReturnValue": "2"
},
{
"DisplayValue": "High",
"ReturnValue": "3"
}
],
"SimpleQuery": {
"Property" : "Priority",
"Operator": "eq"
},
"DisplayOnBar": true
},
{
"_Name": "OrderIdCompare",
"_Type": "FilterBar.Type.Segmented",
"Label": "OrderID Compare",
"Value": "",
"Items": [
{
"DisplayValue": "< 4004760",
"ReturnValue": "OrderId lt '4004760'"
},
{
"DisplayValue": "= 4004760",
"ReturnValue": "OrderId eq '4004760'"
},
{
"DisplayValue": "> 4004760",
"ReturnValue": "OrderId gt '4004760'"
}
],
"AllowEmptySelection": true,
"AllowMultipleSelection": false,
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "OrderIdA",
"_Type": "FilterBar.Type.Segmented",
"Label": "OrderID Static",
"Value": "",
"Items": "/MDKDevApp/Rules/FilterBar/GetOrderIDItems.js",
"SimpleQuery": {
"Property" : "OrderId",
"Operator": "lt"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "OrderIdB",
"_Type": "FilterBar.Type.ListPicker",
"Label": "Order ID >=",
"Value": "4000034",
"PickerItems": {
"DisplayValue": "{OrderDescription}",
"ReturnValue": "{OrderId}",
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKDevApp/Services/Amw.service",
"QueryOptions": "$top=20"
}
},
"Search": {
"Enabled": true
},
"AllowMultipleSelection": false,
"AllowEmptySelection": true,
"SimpleQuery": {
"Property" : "OrderId",
"Operator": "ge"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
}
]
},
{
"Controls": [
{
"_Name": "Favorite",
"_Type": "FilterBar.Type.Switch",
"Label": "Is Favorite?",
"HelperText": "Favorite is",
"SimpleQuery": {
"Property" : "Favorite"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
},
{
"_Name": "Quantity",
"_Type": "FilterBar.Type.Slider",
"Label": "Qty",
"MinValue": 1,
"MaxValue": 111,
"Step": 0.5,
"DecimalPlaces": 1,
"HelperText": "Quantity is",
"SimpleQuery": {
"Property" : "Quantity",
"Operator": "ge"
},
"DisplayOnBar": "/MDKDevApp/Rules/FilterBar/GetDisplayOnBarValue.js"
}
]
},
{
"Controls": [
{
"_Name": "MultiSorter",
"_Type": "FilterBar.Type.MultiSorter",
"Label": "Multi sorter",
"Value": "",
"Items": [
{
"ReturnValue": "OrderId",
"DisplayValue": "OrderId",
"AscendingLabel": "Lowest first",
"DescendingLabel": "Highest first"
},
{
"ReturnValue": "Priority",
"DisplayValue": "Priority - Long text of Products be wrapped up",
"AscendingLabel": "This is very long ascending text be wrapped up",
"DescendingLabel": "Highest first"
},
{
"ReturnValue": "HeaderFunctionLocation",
"DisplayValue": "HeaderFunctionLocation",
"AscendingLabel": "Ascending",
"DescendingLabel": "Descending"
},
{
"ReturnValue": "CreationDate",
"DisplayValue": "CreationDate",
"AscendingLabel": "Earliest first",
"DescendingLabel": "Latest first"
},
{
"ReturnValue": "DueDate",
"DisplayValue": "DueDate",
"AscendingLabel": "Earliest first",
"DescendingLabel": "Latest first"
}
],
"HelperText": "Multi sort by",
"DisplayOnBar": true
}
]
}
],
"Styles": {
"Bar": "filterBar",
"Active": "activeFilterBarItem",
"InActive": "inactiveFilterBarItem"
}
},
"Header": {
"UseTopPadding": false
},
"ObjectCell": {
"AccessoryType": "disclosureIndicator",
"Description": "{OrderDescription}",
"DetailImage": "/MDKDevApp/Images/workorder.png",
"DetailImageIsCircular": false,
"Icons": [
"/MDKDevApp/Images/icon_severity_medium.png",
"/MDKDevApp/Images/open.png"
],
"OnPress": "/MDKDevApp/Actions/Navigation/NavActionToWorkOrderDetail.action",
"StatusImage": "/MDKDevApp/Images/workorder_details.png",
"Title": "{OrderId}"
},
"Search": {
"Enabled": true,
"Placeholder": "Item Search",
"BarcodeScanner": true,
"Delay": 500,
"OnScanPress": "/MDKDevApp/Rules/OData/WorkOrderScan.js",
"MinimumCharacterThreshold": 3
},
"Target": {
"EntitySet": "MyWorkOrderHeaders",
"Service": "/MDKDevApp/Services/Amw.service",
"QueryOptions": "$orderby=OrderId"
},
"_Name": "Section",
"_Type": "Section.Type.ObjectTable"
}
]
}
]
}
Style Classes Definition¶
.filterBar {
border-radius: 0;
border-width: 1; /* iOS Only */
}
.activeFilterBarItem {
font-color: #ff3333;
background-color: #79d2a6;
border-color: #ff6666; /* iOS Only */
}
.inactiveFilterBarItem {
font-color: #cc6600;
background-color: #80b3ff;
border-color: pink; /* iOS Only */
}