FieldFilterPickerGroup

A set of FieldFilterPickers, representing an array of CollectionFilters. The filters are provided to the picker as an array of filter configuration objects.

Field filter picker group
//<code-header>
fiddle.title = 'Field filter picker group';
//</code-header>
const
    store     = new Store({
        fields : [
            { name : 'name', type : 'string' },
            { name : 'type', type : 'string' },
            { name : 'calories', type : 'number' },
            { name : 'icon', type : 'string' }
        ],
        data : [
            { id : 1, name : 'Cheese sticks', type : 'starters', calories : 312, icon : 'cheese' },
            { id : 2, name : 'Fried onion rings', type : 'starters', calories : 234, icon : 'ring' },
            { id : 3, name : 'Hummus', type : 'starters', calories : 532, icon : 'seedling' },
            { id : 4, name : 'Fried fish', type : 'food', calories : 243, icon : 'fish' },
            { id : 5, name : 'Pizza', type : 'food', calories : 687, icon : 'pizza-slice' },
            { id : 6, name : 'Hamburger', type : 'food', calories : 734, icon : 'hamburger' },
            { id : 7, name : 'Hot dog', type : 'food', calories : 435, icon : 'hotdog' },
            { id : 8, name : 'Salad', type : 'food', calories : 112, icon : 'salad' },
            { id : 9, name : 'Gin tonic', type : 'drinks', calories : 145, icon : 'glass-martini' },
            { id : 10, name : 'Wine', type : 'drinks', calories : 150, icon : 'glass-wine' },
            { id : 11, name : 'Soda', type : 'drinks', calories : 205, icon : 'glass-citrus' },
            { id : 12, name : 'Beer', type : 'drinks', calories : 109, icon : 'beer' }
        ]
    }),
    container = new Container({
        appendTo : targetElement,
        layout   : 'hbox',
        items    : {
            results : {
                type    : 'list',
                store,
                itemTpl : record => `${record.name} (${record.calories} calories)`,
                width   : '30%',
                style   : { marginRight : '1em' }
            },
            filters : {
                type   : 'container',
                margin : '0 0 0 1em',
                flex   : 1,
                items  : {
                    pickergroup : {
                        type    : 'fieldfilterpickergroup',
                        store,
                        fields  : ArrayHelper.keyBy(store.fields, 'name'),
                        filters : [{
                            property      : 'name',
                            operator      : 'includes',
                            value         : 'fried',
                            caseSensitive : false
                        }]
                    }
                }
            }
        }
    });

When store is provided in the configuration, the picker group will read filters from the store and monitor for filter changes, and reflect any changes. It is possible to synchronize multiple FieldFilterPickerGroups by configuring them with the same store.

Does not support modifying filters defined as custom functions.

Configs

105

Common

listenersEvents

Other

Sets the text displayed in the 'add filter' button if one is present.

Optional array of field names that are allowed as selectable properties for filters. This should be a subset of the field names found in the store. When supplied, only the named fields will be shown in the property selector combo.

canDeleteFilter: function

Optional predicate that returns whether a given filter can be deleted. When canDeleteFilter is provided, it will be called for each filter and will not show the delete button for those for which the function returns false.

ParameterTypeDescription
filter*

filter for checking

Returns: Boolean -

truthy value if filter can be deleted

canManageFilter: function

Optional predicate that returns whether a given filter can be managed by this widget. When canManageFilter is provided, it will be used to decide whether to display filters found in the configured store.

ParameterTypeDescription
filter*

filter for checking

Returns: Boolean -

truthy value if filter can be managed

dateFormat: String= L{FieldFilterPicker.dateFormat}

The date format string used to display dates when using the 'is one of' / 'is not one of' operators with a date field. Defaults to the current locale's FieldFilterPicker.dateFormat value.

disabled: Boolean= false

Whether the picker group is disabled.

fields: Object<String, FieldOption>

Dictionary of FieldOption representing the fields against which filters can be defined, keyed by field name.

If filtering a Grid, consider using GridFieldFilterPicker, which can be configured with an existing Grid instead of, or in combination with, defining fields manually.

Example:

fields: {
    // Allow filters to be defined against the 'age' and 'role' fields in our data
    age  : { text: 'Age', type: 'number' },
    role : { text: 'Role', type: 'string' }
}

Array of CollectionFilter configuration objects. One FieldFilterPicker will be created for each object in the array.

When store is provided, any filters in the store will be automatically added and do not need to be provided explicitly.

Example:

filters: [{
    // Filter properties should exist among field names configured
    // via `fields` or `store`
    property: 'age',
    operator: '<',
    value: 30
},{
    property: 'title',
    operator: 'startsWith',
    value: 'Director'
}]

Optional function that returns FieldFilterPicker configuration properties for a given filter. When getFieldFilterPickerConfig is provided, it will be called for each filter and the returned object will be merged with the configuration properties for the individual FieldFilterPicker representing that filter.

The supplied function should accept a single argument, the CollectionFilter whose picker is being created.

ParameterTypeDescription
filterCollectionFilterConfig

The filter to be displayed in the FieldFilterPicker being configured

When limitToProperty is set to the name of an available field (as specified either explicitly in fields or implicitly in the store's model), it has the following effects:

  • the picker group will only show filters defined on the specified property
  • it will automatically set the property to the specified property for all newly added filters where the property is not already set
  • the property selector is made read-only
operators: Object

When specified, overrides the built-in list of available operators. See operators.

readOnly: Boolean= false

Whether the picker group is read-only.

Example: fields: [ { name: 'age', type: 'number' }, { name: 'title', type: 'string' } ]

showAddFilterButton: Boolean= true

Show a button at the bottom of the group that adds a new, blank filter to the group.

The Store whose records will be filtered. The store's modelClass will be used to determine field types.

This store will be kept in sync with the filters defined in the picker group, and new filters added to the store via other means will appear in this filter group when they are able to be modified by it. (Some types of filters, like arbitrary filter functions, cannot be managed through this widget.)

As a corollary, multiple FieldFilterPickerGroups configured with the same store will stay in sync, showing the same filters as the store's filters change.

triggerChangeOnInput: Boolean= true

Whether to raise change events as the user types into a value field. If false, change events will be raised only when the value input field's own change event occurs, for example on field blur.

columnWidget
defaultFocusContainer
labelPositionContainer
renditionContainer
rtlRTL
spanWidget

Accessibility

ariaLabelWidget
keyMapKeyMap

Content

defaultsContainer
itemsContainer
lazyItemsContainer
namedItemsContainer
textContentContainer

CSS

borderContainer
clsWidget
colorWidget
htmlClsWidget
itemClsContainer
styleWidget
uiWidget

DOM

adoptWidget
appendToWidget
contentWidget
datasetWidget
htmlWidget
idWidget
tagWidget
titleWidget

Float & align

alignWidget
anchorWidget
centeredWidget
draggableWidget
floatingWidget
xWidget
yWidget

Layout

alignSelfWidget
dockWidget
flexWidget
heightWidget
hiddenWidget
hideWhenEmptyContainer
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
textAlignWidget
weightWidget
widthWidget

misc

tabBarItemsContainer

Misc

dataFieldWidget
localeClassLocalizable
localizableLocalizable
maskedWidget
ownerWidget
refWidget
rippleWidget
tabWidget
tooltipWidget

Record

recordContainer

Scrolling

Properties

82

Class hierarchy

isFieldFilterPickerGroup: Boolean= truereadonly
Identifies an object as an instance of FieldFilterPickerGroup class, or subclass thereof.
isFieldFilterPickerGroup: Boolean= truereadonlystatic
Identifies an object as an instance of FieldFilterPickerGroup class, or subclass thereof.
isContainerContainer
isDelayableDelayable
isEventsEvents
isKeyMapKeyMap
isLocalizableLocalizable
isWidgetWidget

Other

Returns the array of filter configuration objects currently represented by this picker group.

$namestaticWidget
columnWidget
firstItemContainer
hasChangesContainer
isValidContainer
labelPositionContainer
lastItemContainer
renditionContainer
rtlRTL
spanWidget
typestaticWidget
valuesContainer

Accessibility

keyMapKeyMap

CSS

clsWidget

DOM

appendToWidget
contentWidget
datasetWidget
elementWidget
htmlWidget
idWidget
styleWidget

Float & align

xWidget
yWidget

Layout

alignSelfWidget
flexWidget
heightWidget
layoutContainer
layoutStyleContainer
marginWidget
maxHeightWidget
maxWidthWidget
minHeightWidget
minWidthWidget
widthWidget

Lifecycle

configBase

Misc

cellInfoWidget
disabledWidget
localeHelperLocalizable
localeManagerLocalizable
readOnlyWidget
refWidget
tabWidget
tooltipWidget

Record

recordContainer

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

73

Other

Sets all current filters to enabled and checks their checkboxes.

Appends a filter at the bottom of the list.

ParameterTypeDescription
filterCollectionFilterConfig

Configuration object for the CollectionFilter to add. Defaults to an empty filter.

Sets all current filters to disabled and clears their checkboxes.

Return the FieldFilterPicker for the filter at the specified index.

ParameterTypeDescription
filterIndexNumber

Get the configuration object for one child FieldFilterPicker.

ParameterTypeDescription
filterCollectionFilter

The filter represented by the child FieldFilterPicker

Returns: Object -

The FieldFilterPicker configuration

Remove the filter at the given index.

ParameterTypeDescription
filterIndexNumber

The index of the filter to remove

addContainer
composeWidget
createOnFrameDelayable
disableWidget
enableWidget
focusWidget
getAtContainer
getWidgetByIdContainer
insertContainer
LstaticLocalizable
maskWidget
onEvents
recomposeWidget
relayAllEvents
removeContainer
removeAllContainer
resetValuesContainer
setValuesContainer
triggerEvents
unEvents
unmaskWidget

Configuration

applyDefaultsstaticBase

Events

Float & align

alignToWidget
setXYWidget
showByWidget
toFrontWidget

Lifecycle

createstaticWidget
destroystaticBase
initClassstaticWidget

Misc

attachTooltipstaticWidget
fromElementstaticWidget
fromSelectorstaticWidget
getByIdstaticWidget
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable

Visibility

hideWidget
showWidget

Widget hierarchy

closestWidget
containsWidget
ownsWidget
queryWidget
queryAllWidget
upWidget

Events

18

Fires before a new filter is added to the picker group (and its store, if configured and the filter is valid). Return false from the event handler to prevent the filter being added.

// Adding a listener using the "on" method
fieldFilterPickerGroup.on('beforeAddFilter', ({ source, filter }) => {

});
ParameterTypeDescription
sourceFieldFilterPicker

The FieldFilterPicker instance that fired the event.

filterCollectionFilterConfig

The CollectionFilter configuration object for the filter represented by this FieldFilterPicker.

Fires when any filter in the group is added, removed, or modified.

// Adding a listener using the "on" method
fieldFilterPickerGroup.on('change', ({ source, filters, validFilters }) => {

});
ParameterTypeDescription
sourceFieldFilterPickerGroup

The FieldFilterPickerGroup instance that fired the event.

filtersCollectionFilterConfig[]

The array of CollectionFilter configuration objects currently represented by the FieldFilterPickerGroup. IMPORTANT: Note that this includes all filters currently present in the UI, including partially completed ones that may not be ready to apply to a Store. To retrieve only valid filters, use the validFilters parameter on this event, or filter out incomplete filters in your own code.

validFiltersCollectionFilterConfig[]

The subset of CollectionFilter configuration objects in the filters parameter on this event that are complete and valid for application to a Store.

catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

18

Called before a new filter is added to the picker group (and its store, if configured and the filter is valid). Return false from the event handler to prevent the filter being added.

new FieldFilterPickerGroup({
    onBeforeAddFilter({ source, filter }) {

    }
});
ParameterTypeDescription
sourceFieldFilterPicker

The FieldFilterPicker instance that fired the event.

filterCollectionFilterConfig

The CollectionFilter configuration object for the filter represented by this FieldFilterPicker.

Called when any filter in the group is added, removed, or modified.

new FieldFilterPickerGroup({
    onChange({ source, filters, validFilters }) {

    }
});
ParameterTypeDescription
sourceFieldFilterPickerGroup

The FieldFilterPickerGroup instance that fired the event.

filtersCollectionFilterConfig[]

The array of CollectionFilter configuration objects currently represented by the FieldFilterPickerGroup. IMPORTANT: Note that this includes all filters currently present in the UI, including partially completed ones that may not be ready to apply to a Store. To retrieve only valid filters, use the validFilters parameter on this event, or filter out incomplete filters in your own code.

validFiltersCollectionFilterConfig[]

The subset of CollectionFilter configuration objects in the filters parameter on this event that are complete and valid for application to a Store.

onDestroyEvents
onFocusInWidget
onHideWidget
onPaintWidget
onResizeWidget
onShowWidget

Typedefs

6

CSS variables

32
NameDescription
--b-field-filter-picker-group-gapGap between field filter picker rows

Inherited