FieldFilterPicker

Widget for defining a CollectionFilter for use in filtering a Store. Filters consist of property (the name of the data field whose values are checked), operator (the type of comparison to use), and value (the pre-defined value against which to compare the data field value during filtering).

Field filter picker
//<code-header>
fiddle.title = 'Field filter picker';
//</code-header>
const
    store = new Store({
        fields : [
            { name : 'name', type : 'string', text : 'Name' },
            { name : 'type', type : 'string', text : 'Type' },
            { name : 'calories', type : 'number', text : 'Calories' }
        ],
        data : [
            { id : 1, name : 'Cheese sticks', type : 'starters', calories : 312 },
            { id : 2, name : 'Fried onion rings', type : 'starters', calories : 234 },
            { id : 3, name : 'Hummus', type : 'starters', calories : 532 },
            { id : 4, name : 'Fried fish', type : 'food', calories : 243 },
            { id : 5, name : 'Pizza', type : 'food', calories : 687 },
            { id : 6, name : 'Hamburger', type : 'food', calories : 734 },
            { id : 7, name : 'Hot dog', type : 'food', calories : 435 },
            { id : 8, name : 'Salad', type : 'food', calories : 112 },
            { id : 9, name : 'Gin tonic', type : 'drinks', calories : 145 },
            { id : 10, name : 'Wine', type : 'drinks', calories : 150 },
            { id : 11, name : 'Soda', type : 'drinks', calories : 205 },
            { id : 12, name : 'Beer', type : 'drinks', calories : 109 }
        ]
    }),
    container = new Container({
        appendTo : targetElement,
        layout   : 'hbox',
        items    : {
            results : {
                type    : 'list',
                store,
                itemTpl : record => `${record.name} (${record.calories} calories)`,
                width   : '30%',
                style   : { marginRight : '1em' }
            },
            picker : {
                type   : 'fieldfilterpicker',
                store,
                fields : ArrayHelper.keyBy(store.fields, 'name'),
                filter : {
                    property : 'calories',
                    operator : '<',
                    value    : '400'
                },
                listeners : {
                    change : ({ filter, isValid }) => isValid && store.filter(filter)
                }
            }
        }
    });

store.filter(container.widgetMap.picker.filter);

For example:

new FieldFilterPicker({
    appendTo : domElement,

    fields: {
        // Allow filters to be defined against the 'age' and 'role' fields in our data
        age       : { title: 'Age', type: 'number' },
        startDate : { title: 'Start Date', type: 'date' }
    },

    filter : {
        property : 'startDate',
        operator : '<',
        value    : new Date()
    }
});

Configs

104

Common

listenersEvents

Other

dateFormat: String= L{FieldFilterPicker.dateFormat}

The date format string used to display dates in value input fields. Defaults to the current locale's FieldFilterPicker.dateFormat value.

disabled: Boolean= false

Make the entire picker 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  : { title: 'Age', type: 'number' },
    role : { title: 'Role', type: 'string' }
}

Configuration object for the CollectionFilter displayed and editable in this picker.

Example:

{
    property: 'age',
    operator: '=',
    value: 25
}

Optional function that modifies the configuration of value fields shown for a filter. The default configuration is received as an argument and the returned value will be used as the final configuration. For example:

getValueFieldConfig : (filter, fieldConfig) => {
    return {
        ...fieldConfig,
        title : fieldName    // Override the `title` config for the field
    };
}

The supplied function should accept the following arguments:

ParameterTypeDescription
filterCollectionFilter

The filter being displayed

fieldConfigContainerItemConfig

Configuration object for the value field

Returns: ContainerItemConfig -

the resulting configuration

operatorLocked: Boolean= false

Make only the operator selector readOnly.

operators: Object

Overrides the built-in list of operators that are available for selection. Specify operators as an object with data types as keys and lists of operators as values, like this:

operators : {
    string : [
        { value : 'empty', text : 'is empty', argCount : 0 },
        { value : 'notEmpty', text : 'is not empty', argCount : 0 }
    ],
    number : [
        { value : '=', text : 'equals' },
        { value : '!=', text : 'does not equal' }
    ],
    date : [
        { value : '<', text : 'is before' }
    ]
}

Here value is what will be stored in the operator field in the filter when selected, text is the text displayed in the Combo for selection, and argCount is the number of arguments (comparison values) the operator requires. The default argCount if not specified is 1.

Note: The operators config is a subset of valid operators described in CollectionCompareOperator. The use of any other operator apart from these is not supported and will lead to unexpected behavior.

Optional configuration for the property selector Combo.

propertyLocked: Boolean= false

Make only the property selector readOnly.

readOnly: Boolean= false

Make the entire picker read-only.

Optional {Core.data.Store} against which filters are being defined. This is used to supply options to filter against when using the 'is one of' and 'is not one of' operators.

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.

Optional ValueFieldPlaceholders object specifying custom placeholder text for value input fields.

valueLocked: Boolean= false

Make only the value input(s) readOnly.

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

81

Class hierarchy

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

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

Other

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

Record

recordContainer

Visibility

hiddenWidget
isVisibleWidget

Widget hierarchy

ownerWidget
parentWidget
widgetMapContainer

Functions

68

Other

Return an array of unique values in the data store for the currently selected field. If no store is configured or no field is selected, returns an empty array.

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

17

Fires when the filter is modified.

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

});
ParameterTypeDescription
sourceFieldFilterPicker

The FieldFilterPicker instance that fired the event.

filterArray

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

isValidBoolean

Whether the current configuration object represents a complete and valid filter

catchAllEvents
destroyEvents
focusInWidget
focusOutWidget
hideWidget
paintWidget
readOnlyWidget
recomposeWidget
resizeWidget
showWidget

Event handlers

17

Called when the filter is modified.

new FieldFilterPicker({
    onChange({ source, filter, isValid }) {

    }
});
ParameterTypeDescription
sourceFieldFilterPicker

The FieldFilterPicker instance that fired the event.

filterArray

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

isValidBoolean

Whether the current configuration object represents a complete and valid filter

onDestroyEvents
onFocusInWidget
onHideWidget
onPaintWidget
onResizeWidget
onShowWidget

Typedefs

8

A field that is available for selection when defining filters.

ParameterTypeDescription
typestring | number | date | boolean

The data type of the values in this field in the data source

titleString

The human-friendly display name for the field, as might be displayed in a data column header

formatString

(Optional) Format string for formatting values shown in value fields. Applicable only for number and date types.

A dictionary of value field placeholder strings, keyed by data type.

ParameterTypeDescription
stringString

Placeholder text for text value fields

numberString

Placeholder text for number value fields

dateString

Placeholder text for date value fields

listString

Placeholder text for multi-select list values, e.g. for the 'is one of' operator

AlignSpecWidget
ColorWidget

CSS variables

31

Inherited