API svyToolbarFilter v1

Classes

ListComponentFilterRendererAbstractToolbarFilterUX

Members

FILTER_TYPES

Functions

createFilterToolbar(listComponent, table)AbstractToolbarFilterUX

Creates a filter toolbar implementation using the custom list from the custom-rendered-components package.

This implementation expects an NG "Data Grid" table component and a "Custom List" component.

The filters offered from this implementation are generated from the table provided as follows:

  • any column with its filterType property set to TEXT will be offered as a token popup, allowing the user to enter any number of Strings to match

  • any column with its filterType property set to TEXT and the valuelist will be offered as a lookup where the user can search for and select any number of values

  • any column with its filterType property set to NUMBER will be offered as a number filter with a number of operators

  • any column with its filterType property set to DATE will be offered as a date filter with a number of operators

You should create a toolbar filter instance at the onLoad of your form and assign it to a form variable.

Make sure to re-direct the onClick event of the "List Component" to the toolbar.onClick(entry, index, dataTarget, event);

setPopupRendererForm(formType, form)

ListComponentFilterRenderer ⇐ AbstractToolbarFilterUX

Extends: AbstractToolbarFilterUX

listComponentFilterRenderer.clearGridFilters() ⇒ Boolean

Clears all grid filters

listComponentFilterRenderer.getElement() ⇒ RuntimeComponent

Returns the element used to display the filters

Overrides: getElement

listComponentFilterRenderer.getQuery() ⇒ QBSelect

Applies all filters and returns the query for this toolbar

listComponentFilterRenderer.getSearchProvider(column) ⇒ scopes.svySearch.SearchProvider

Returns the SearchProvider for the given column

listComponentFilterRenderer.getSearchText() ⇒ String

Returns the search text for the simple search

listComponentFilterRenderer.getSimpleSearch() ⇒ scopes.svySearch.SimpleSearch

Returns the SimpleSearch

listComponentFilterRenderer.getToolbarFiltersState() ⇒ [ 'Array' ].<{id: String, dataprovider: String, operator: String, params: Object, text: String, values: Array}>

Returns the filters' state of the toolbar

Returns: [ 'Array' ].<{id: String, dataprovider: String, operator: String, params: Object, text: String, values: Array}> - jsonState

listComponentFilterRenderer.hasFilters() ⇒ Boolean

Returns true if the table has any column it can filter on

listComponentFilterRenderer.onClick(entry, index, dataTarget, event)

Called when the mouse is clicked on a list entry.

listComponentFilterRenderer.restoreToolbarFiltersState(jsonState)

Restores the filters' state

listComponentFilterRenderer.search([searchText])

Applies all filters and executes the search

listComponentFilterRenderer.setAutoApplyFilters(autoApply) ⇒ AbstractToolbarFilterUX

listComponentFilterRenderer.setFilterValue(column, values, operator)

Sets a filter value for the given column

listComponentFilterRenderer.setOnFilterAddedCallback(callback) ⇒ AbstractToolbarFilterUX

Sets a callback method that is fired whenever a filter has been added

listComponentFilterRenderer.setOnFilterApplyCallback(callback) ⇒ AbstractToolbarFilterUX

Sets a callback method that is fired whenever the filter is applied The callback method receives an array of values, the operator and the filter as arguments

listComponentFilterRenderer.setOnFilterCreate(callback) ⇒ AbstractToolbarFilterUX

Allows to provide a method that will be called when the filter for a specific column is created That method then can create and return any filter that will then be used for this column

listComponentFilterRenderer.setOnFilterRemovedCallback(callback) ⇒ AbstractToolbarFilterUX

Sets a callback method that is fired whenever a filter is removed

listComponentFilterRenderer.setOnSearchCommand(callback) ⇒ AbstractToolbarFilterUX

Set the onSearchCommand function to override the search behavior. You can add custom conditions to the filter query object;

Example

function onSearch(query, fs) {
  // add custom conditions to the query
  query.where.add(query.columns.orderdate.not.isNull);
  
  // apply the query to the foundset
  fs.loadRecords(query);
}

listComponentFilterRenderer.setSearchText() ⇒ AbstractToolbarFilterUX

Sets the search text for the simple search

listComponentFilterRenderer.showPopupFilterPicker(target)

Shows the filter picker popup

new ListComponentFilterRenderer(listComponent, table)

Filter Toolbar implementation using the custom list from the custom-rendered-components package. This implementation requires a "List Component" element and an "Data-Grid" element. You should create a toolbar filter instance at the onLoad of your form and assign it to a form variable. Make sure to re-direct the onClick event of the "List Component" to the toolbar.onClick(entry, index, dataTarget, event);

Example

//keep track of toolbarFilter object in a form variable
var toolbarFilter;

//init the toolbarFilter at the onLoad.
function onLoad(event) {
 toolbarFilter = new scopes.svyToolbarFilter.ListComponentFilterRenderer(elements.filterToolbar, elements.table)
}

//propagate the onClick event of the "List Component" to the toolbar filter.
function onClick(entry, index, dataTarget, event) {
 toolbarFilter.onClick(entry,index,dataTarget,event);
}

//optionally set a searchText for a cross-field search to further filter the result set
function search() {
 toolbarFilter.setSearchText(searchText);
 toolbarFilter.search();
}

createFilterToolbar(listComponent, table) ⇐ AbstractToolbarFilterUX

Creates a filter toolbar implementation using the custom list from the custom-rendered-components package.\

This implementation expects an NG "Data Grid" table component and a "Custom List" component.\

The filters offered from this implementation are generated from the table provided as follows:

  • any column with its filterType property set to TEXT will be offered as a token popup, allowing the user to enter any number of Strings to match

  • any column with its filterType property set to TEXT and the valuelist will be offered as a lookup where the user can search for and select any number of values

  • any column with its filterType property set to NUMBER will be offered as a number filter with a number of operators

  • any column with its filterType property set to DATE will be offered as a date filter with a number of operators

You should create a toolbar filter instance at the onLoad of your form and assign it to a form variable.

Make sure to re-direct the onClick event of the "List Component" to the toolbar.onClick(entry, index, dataTarget, event);

Extends: AbstractToolbarFilterUX

Example

//keep track of toolbarFilter object in a form variable
var toolbarFilter;

//init the toolbarFilter at the onLoad.
function onLoad(event) {
 toolbarFilter = scopes.svyToolbarFilter.createFilterToolbar(elements.filterToolbar, elements.table)
}

//propagate the onClick event of the "Custom List" component to the toolbar filter.
function onClick(entry, index, dataTarget, event) {
 toolbarFilter.onClick(entry, index, dataTarget, event);
}

//optionally set a searchText for a cross-field search to further filter the result set
function search() {
 toolbarFilter.search(searchText);
}

setPopupRendererForm(formType, form)

FILTER_TYPES

FILTER_TYPES.DATE

Date filter

FILTER_TYPES.NUMBER

Number filter

FILTER_TYPES.SELECT

Select filter

FILTER_TYPES.TOKEN

Tokens filter


Last updated