API svyToolbarFilter v1

Classes

ListComponentFilterRenderer ⇐ AbstractToolbarFilterUX

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 ⇐ AbstractToolbarFilterUX

  • .clearGridFilters() ⇒ Boolean

  • .getElement() ⇒ RuntimeComponent

  • .getQuery() ⇒ QBSelect

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

  • .getSearchText() ⇒ String

  • .getSimpleSearch() ⇒ scopes.svySearch.SimpleSearch

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

  • .hasFilters() ⇒ Boolean

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

  • .restoreToolbarFiltersState(jsonState)

  • .search([searchText])

  • .setAutoApplyFilters(autoApply) ⇒ AbstractToolbarFilterUX

  • .setFilterValue(column, values, operator)

  • .setOnFilterAddedCallback(callback) ⇒ AbstractToolbarFilterUX

  • .setOnFilterApplyCallback(callback) ⇒ AbstractToolbarFilterUX

  • .setOnFilterCreate(callback) ⇒ AbstractToolbarFilterUX

  • .setOnFilterRemovedCallback(callback) ⇒ AbstractToolbarFilterUX

  • .setOnSearchCommand(callback) ⇒ AbstractToolbarFilterUX

  • .setSearchText() ⇒ AbstractToolbarFilterUX

  • .showPopupFilterPicker(target)

  • new ListComponentFilterRenderer(listComponent, table)

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

Param	Type
column	[ 'CustomType' ].<aggrid-groupingtable.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.

Param	Type
entry	object
index	Number
dataTarget	string
event	JSEvent

listComponentFilterRenderer.restoreToolbarFiltersState(jsonState)

Restores the filters' state

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

listComponentFilterRenderer.search([searchText])

Applies all filters and executes the search

Param	Type	Description
[searchText]	String	optional searchText to search for; if not provided here, call setSearchText() to set the search criteria before performing the search

listComponentFilterRenderer.setAutoApplyFilters(autoApply) ⇒ AbstractToolbarFilterUX

Param	Type
autoApply	Boolean

listComponentFilterRenderer.setFilterValue(column, values, operator)

Sets a filter value for the given column

Param	Type
column	[ 'CustomType' ].<aggrid-groupingtable.column>
values	Array
operator	String

listComponentFilterRenderer.setOnFilterAddedCallback(callback) ⇒ AbstractToolbarFilterUX

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

Param	Type
callback	function

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

Param	Type
callback	function

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

Param	Type	Description
callback	function	function that receives an aggrid-groupingtable Column as argument and must return a scopes.svyPopupFilter.AbstractPopupFilter

listComponentFilterRenderer.setOnFilterRemovedCallback(callback) ⇒ AbstractToolbarFilterUX

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

Param	Type
callback	function

listComponentFilterRenderer.setOnSearchCommand(callback) ⇒ AbstractToolbarFilterUX

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

Param	Type
callback	function

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

Param	Type
target	RuntimeComponent

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);

Param	Type
listComponent	RuntimeWebComponent.<customrenderedcomponents-customlist> | RuntimeWebComponent.<customrenderedcomponents-customlist_abs>
table	RuntimeWebComponent.<aggrid-groupingtable> | RuntimeWebComponent.<aggrid-groupingtable_abs>

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

Param	Type
listComponent	RuntimeWebComponent.<customrenderedcomponents-customlist> | RuntimeWebComponent.<customrenderedcomponents-customlist_abs>
table	RuntimeWebComponent.<aggrid-groupingtable> | RuntimeWebComponent.<aggrid-groupingtable_abs>

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)

Param	Type	Description
formType	String	any of the FILTER_TYPES
form	RuntimeForm.<AbstractPopupFilter> | RuntimeForm.<AbstractLookup>	the form to set

FILTER_TYPES

• FILTER_TYPES

  • .DATE

  • .NUMBER

  • .SELECT

  • .TOKEN

FILTER_TYPES.DATE

Date filter

FILTER_TYPES.NUMBER

Number filter

FILTER_TYPES.SELECT

Select filter

FILTER_TYPES.TOKEN

Tokens filter

---