Quick filter group component
Use the Quick filter group component to display multiple filters. The component container includes all active filters and lets you scroll data horizontally.
Before you use the component, make sure that the viewModelConfig schema section includes the attribute bound to the Quick filter group component.
View the example that adds an attribute to the Freedom UI page schema below.
{
"viewModelConfig": {
"attributes": {
"Items": {
"modelConfig": {
"path": "PDS",
"filterAttributes": [
{
"loadOnChange": true,
"name": "QuickFilterGroup_Filters"
}
]
}
}
}
}
}
View the example of a configuration object that displays multiple filters below.
{
"name": "QuickFilterGroup",
"type": "crt.QuickFilterGroup",
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"args": [
{
"target": {
"viewAttributeName": "Items"
}
}
],
"converter": "crt.QuickFilterGroupAttributeConverter"
}
]
}
]
}
}
Properties
string type
Component type. crt.QuickFilterGroup for the Quick filter group component.
array of objects items
Array of predefined quick filters to display on the page.
object _filterOptions
Filter parameters.
Parameters
Name | Description |
|---|---|
string from | The attribute from the |
string attribute | The attribute from the |
string viewAttributeName | The attribute from the |
object items | Filter details that are generated by the preprocessor based on the columns in the initial data collection. You can add details of custom filters. |
View the example of a custom filter for Account column below.
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"args": [
{
"target": {
"viewAttributeName": "Items",
"items": {
"QuickFilterGroup_Item_Primary_Account": {
"quickFilterType": "lookup",
"target": {
"viewAttributeName": "Items",
"filterColumn": "Account.PrimaryAccount"
}
}
}
}
}
],
"converter": "crt.QuickFilterGroupAttributeConverter"
}
]
}
]
}
Component requests
The Quick filter group component lets you bind the following base requests depending on your business goals.
crt.UpdateQuickFilterGroupRequest
Opens a picker to set filters.
View the example that adds a custom filter to the configuration object of Quick filter group component below.
{
"name": "QuickFilterGroup",
"type": "crt.QuickFilterGroup",
"_filterOptions": {
"from": "QuickFilterGroup_Value",
"expose": [
{
"attribute": "QuickFilterGroup_Filters",
"converters": [
{
"converter": "crt.QuickFilterGroupAttributeConverter",
"args": [
{
"target": {
"viewAttributeName": "Items",
"items": {
"QuickFilterGroup_Item_Type": {
"quickFilterType": "lookup",
"target": {
"viewAttributeName": "Items",
"filterColumn": "Type"
}
},
}
},
}
]
}
]
}
],
"from": "QuickFilterGroup_Value"
}
}
View the example of a configuration object that adds a button below. The request fires when a user clicks the button.
{
"name": "FilterGroupButton",
"type": "crt.Button",
"clicked": {
"request": "crt.UpdateQuickFilterGroupRequest",
"params": {
"value": "\$QuickFilterGroup_Value",
"actions": [
{
"caption" : "Type",
"filterViewConfig" : {
"name" : "QuickFilterGroup_Item_Type",
"type" : "crt.QuickFilter",
"config" : {
"caption" : "Type",
"icon" : "filter-column-icon",
"iconPosition" : "left-icon",
"entitySchemaName" : "ContactType",
"defaultValue": [
{
"value": "60733efc-f36b-1410-a883-16d83cab0980",
"displayValue": "Employee",
"checkedState": true
}
]
},
"filterType" : "lookup"
}
}
]
}
}
}
object params
Request parameters.
Parameters
Name | Description | ||||||
|---|---|---|---|---|---|---|---|
string value | The name of attribute from the | ||||||
string updated | The | ||||||
array actions | Array of filters to display. Array includes both predefined custom filters and filters that are generated by the preprocessor based on the columns in the initial data collection. Name Description string caption Title of the quick filter. object filterViewConfig Parameters of quick filter. |
crt.QuickFilterGroupRequest
Stores specified filters to the attribute from the viewModelConfig schema section and adds filters to the component container.
View the example of a configuration object that adds a button below. The request fires when a user clicks the button.
{
"name": "FilterGroupButton",
"type": "crt.Button",
"clicked": {
"request": "crt.UpdateQuickFilterGroupRequest",
"params": {
"value": "$QuickFilterGroup_Value",
"updated": {
"request": "crt.QuickFilterGroupRequest",
"params": {
"target": "QuickFilterGroup"
}
}
}
}
}
object params
Request parameters.
Parameters
Name | Description |
|---|---|
string value | The name of attribute from the |
string target | The component container that displays specified filters. |