Important
You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get the updated information.
See our Release Process documentation for more information on the currently supported and upcoming releases.
Javascript Widgets
On frontend side filter form types are represented by javascript widgets. They are located in Resources/public/js directory and use javascript namespace Oro.Filter.
Oro.Filter.List
Container for filters, renders all active filters, has a control to enable and disable filters
Rendered As
Combobox with Add button
Parent
Backbone.View
Properties
- filters: Object
- addButtonHint: String
Properties Description
- filters - named list of filters, instances of Oro.Filter.Abstract;
- addButtonHint - test of button that is used for adding filters to the list.
Oro.Filter.AbstractFilter
Abstract filter that has common methods for all filters.
Parent
Backbone.View
Properties
- name: String
- label: String
- enabled: Boolean
Properties Description
- name - unique name name of filter;
- label - label of filter. This values is used for displaying filter in list options and in rendering of filter html template;
- enabled - whether filter enabled or not. If filter is not enabled it will not be displayed in filter list.
Oro.Filter.TextFilter
Has only one text input that can be filled by user. Operator type is not supported.
Rendered As
Clickable control with filter value hint. When control is clicked, a popup container with text input and update button is shown.
Parent
Oro.Filter.AbstractFilter
Inherit Properties
- name
- label
- enabled
Oro.Filter.ChoiceFilter
This widget supports value input and operator type input.
Rendered As
Same as parent widget but also contains radio buttons for operator choices
Parent
Oro.Filter.TextFilter
Options
- choices: Object
Inherit Properties
- name
- label
- enabled
Properties Description
- choices - list of filter types (e.g., contains, not contains for text filter).
Oro.Filter.NumberFilter
Filter that has an operator and is additionally able to format value as a number (integer, decimal)
Rendered As
Same as parent widget but has behavior of parsing numbers as input value
Parent
Oro.Filter.ChoiceFilter
Options
- formatter: Oro.Filter.NumberFormatter
- formatterOptions: Object
Inherit Properties
- name
- label
- enabled
- choices
Properties Description
- formatter - instance of Oro.Filter.NumberFormatter, this object is responsible for converting string to number and backward;
- formatterOptions - this value will be used as argument for Oro.Filter.NumberFormatter.
It contains the following options:
- decimals: Integer - number of decimals to display. Must be an integer;
- decimalSeparator: String - the separator to use when displaying decimals;
- orderSeparator: String - the separator to use to separator thousands. May be an empty string.
Oro.Filter.NumberRangeFilter
Extends NumberFilter to add ability to filter by range (between, not between)
Rendered As
Same as parent widget but allows to filter by number ranges
Parent
Oro.Filter.NumberFilter
Oro.Filter.SelectFilter
Filter that allows to select one of available values
Rendered As
Clickable control with filter value hint. When control is clicked, a combobox with context search field and available values is displayed.
Parent
Oro.Filter.AbstractFilter
Options
- options: Object
- contextSearch: Boolean
Inherit Properties
- name
- label
- enabled
Properties Description
- options - list of available options for select and multi-select filters.
- contextSearch - flag whether need to show context search field.
Oro.Filter.MultiSelectFilter
Filter that allows to select any available values.
Rendered As
Same as parent, but several values can be selected.
Parent
Oro.Filter.SelectFilter
Inherit Properties
- name
- label
- enabled
- options
- contextSearch
Oro.Filter.MultiSelectDecorator
Encapsulates additional logic related to select and multi-select widgets (filter list, select and multi-select filters).
Option Parameters
- element : HTML Element - HTML element used for rendering of multiselect widget;
- parameters : Object - list of parameters to initialize multiselect widget;
- contextSearch : Boolean - flag that specified whether to show context search field.
Oro.Filter.DateFilter
Used for filtering date values.
Rendered As
Popup container has inputs for start and end dates. Each input is clickable calendar. Available operators displayed as radio buttons.
Parent
Oro.Filter.ChoiceFilter
Properties
- typeValues
- externalWidgetOptions
Inherit Properties
- name
- label
- enabled
- choices
Properties Description
- typeValues - list of date/datetime type values for between/not between filter types;
- externalWidgetOptions - additional date/datetime widget options, gets from form type.
Oro.Filter.DateTimeFilter
Used for filtering date time values.
Rendered As
Same as parent but clickable calendars also display controls for setting time
Parent
Oro.Filter.DateFilter
Properties
- typeValues
- externalWidgetOptions
Inherit Properties
- name
- label
- enabled
- choices
- typeValues
- externalWidgetOptions
Oro.Filter.DateGroupingFilter
This widget supports value input and operator type input.
Rendered As
Same as parent widget but also contains radio buttons for operator choices
Parent
Oro.Filter.ChoiceFilter
Inherit Properties
- name
- label
- enabled
- choices
Properties Description
- choices - list of filter types: Day, Month, Quarter, Year.
Oro.Filter.SkipEmptyPeriodsFilter
This widget supports value input and operator type input.
Rendered As
Same as parent widget but also contains radio buttons for operator choices
Parent
Oro.Filter.ChoiceFilter
Inherit Properties
- name
- label
- enabled
- choices
Properties Description
- choices - list of filter types: Yes, No.
Example of Usage
Below is example of creating filter list:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var filtersList = new Oro.Filter.List({
addButtonHint: '+ Add more',
filters: {
username: Oro.Filter.ChoiceFilter.extend({
name:'username',
label:'Username',
enabled:true,
choices:{"1": "contains", "2": "does not contain", "3": "is equal to"}
}),
gender: Oro.Filter.SelectFilter.extend({
name:'gender',
label:'gender',
enabled:false,
options: {"18": "Male", "19": "Female"}
},
salary: Oro.Filter.NumberFilter.extend({
name:'salary',
label:'salary',
enabled:false,
choices:{"1": "=", "2": ">", "3": "<"},
formatterOptions: {"decimals": 0, "grouping": false, "orderSeparator": "", "decimalSeparator": "."}
})
}
});
$('#filter').html(filtersList.render().$el);
|