Filter components by string matching
You can use regexp on all the different way of string filtering (to match against the filterString - either pass regexp to the filter or define it in each instanceDefinition you want to act on the filterString).
You can of course use all the differed string filtering options at the same time (as any other filter) if you have a scenario that needs it.
Take a look at components.js to see component the setup for this example.
conditions:0components:1instances:7
var componentSettings = {
components: [{
id: 'filter-string-component',
src: 'ExampleComponent' // ExampleComponent.js in the examples directory - exposed on window
}],
targets: {
'first-examples': [
{
id: 'filter-string-instance-1',
componentId: 'filter-string-component',
order: 1,
args: {
id: 'id: 1',
filterString: 'undefined',
background: '#F6FFBA'
}
},
{
id: 'filter-string-instance-2',
componentId: 'filter-string-component',
order: 2,
args: {
id: 'id: 2',
filterString: 'lorem/ipsum/first',
background: '#B7E8D4'
},
filterString: 'lorem/ipsum/first'
},
{
id: 'filter-string-instance-3',
componentId: 'filter-string-component',
order: 3,
args: {
id: 'id: 3',
filterString: 'a filter string could be any string',
background: '#B6C4FF'
},
filterString: 'a filter string could be any string'
},
],
'second-examples': [
{
id: 'filter-string-instance-4',
componentId: 'filter-string-component',
order: 4,
args: {
id: 'id: 4',
filterString: 'undefined - the filterString is set on the filter passed to the refresh method',
includeIfFilterStringMatches: 'state=one',
background: '#9FEDFF'
},
includeIfFilterStringMatches: 'state=one'
},
{
id: 'filter-string-instance-5',
componentId: 'filter-string-component',
order: 5,
args: {
id: 'id: 5',
filterString: 'undefined - the filterString is set on the filter passed to the refresh method',
includeIfFilterStringMatches: 'state=one',
excludeIfFilterStringMatches: 'lang=en_GB',
background: '#9F9EE8'
},
includeIfFilterStringMatches: 'state=one',
excludeIfFilterStringMatches: 'lang=en_GB'
},
{
id: 'filter-string-instance-6',
componentId: 'filter-string-component',
order: 6,
args: {
id: 'id: 6',
filterString: 'undefined - the filterString is set on the filter passed to the refresh method',
includeIfFilterStringMatches: 'lang=en_GB',
background: '#F9D1FF'
},
includeIfFilterStringMatches: 'lang=en_GB'
},
{
id: 'filter-string-instance-7',
componentId: 'filter-string-component',
order: 7,
args: {
id: 'id: 7',
filterString: 'undefined - the filterString is set on the filter passed to the refresh method',
includeIfFilterStringMatches: '/[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/',
background: '#E8CECB'
},
includeIfFilterStringMatches: /[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/
}
]
}
}
Example one - filterString on the instanceDefintion
These examples have the filterString defined on the instanceDefinitions and sets the properties "includeIfMatch", "hasToMatch" or "cantMatch" on the filter passed to the refresh method.
active filterinfoExample two - filterString on the filterObject
These examples have the filterString defined on the filter passed to the refresh method. This approach is pretty much the opposite of the previous example - here the properties "includeIfFilterStringMatches" and "excludeIfFilterStringMatches" are set on the instanceDefinition. This allows for an easy way to filter instances on a common string defined on the filter instead of on each instanceDefinition.
active filterinfocontrols.component-area--second-examples