PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

FiltersChips component

The FiltersChips component provides UI controls that allows users to remove the previously-applied values of the Filters and Search components.

Configuration options

Option Description Type Default Value
component The path to the component’s .js file. String Magento_Ui/js/grid/filters/chips
componentType The type of component. String filtersChips
template Path to the component’s .html template. String ui/grid/filters/chips

Source files

Extends uiCollection:

Examples

Integrate the FiltersChips component as a grid (default) with the Filters component

This is an example of how the FiltersChips component integrates with the Filters component:

1
2
3
4
5
6
7
8
9
10
11
12
13

<listing>
    <listingToolbar>
        <filters name="listing_filters">
            <settings>
                <chipsConfig>
                    <param name="component" xsi:type="string">Magento_Ui/js/grid/filters/chips</param>
                    <param name="componentType" xsi:type="string">filtersChips</param>
                    <param name="template" xsi:type="string">ui/grid/filters/chips</param>
                </chipsConfig>
            </settings>
        </filters>
    </listingToolbar>
</listing>

Result

FiltersChips Component example

© 2021 Adobe. All rights reserved.