EN | ES
From now on, we can define complex filters in our gadgets and dashboards in a simple way.
We can define gadgets with filters as we have done until now, by clicking on a point in the graph or a bar, for example. Besides, we can define a filter form to filter the gadget itself where the form is defined and by means of the datalink we have the option to indicate whether we want these filters to be applied to other gadgets or not.
Additionally, a new type of gadget has been incorporated: the gadget filter.
This gadget will display a form with the filters defined and serves as a master filter to filter other gadgets.
These filters can be defined in the Dashboard API messages, to create gadgets with defined filters.
Creating filters in a Gadget
First, we create a gadget. For this example, we will use the Helsinkipopulation ontology and create a bar gadget:
In dashboard, editing mode, we click on the three-dot icon of the gadget menu and then on the Edit Filters entry.
We are shown this modal window:
It has three sections:
FILTERS:
List of defined filters. Here are the filters defined for each gadget.
ADD NEW FILTER:
Form where we fill in the filter data.
In the form, we define the identifier. It must be unique.
Type filter, we select the type of filter we want to create, it can be a text filter, numerical filter, ... The fields that appear for us to fill in will depend on that choice.
FILTER LAYOUT:
It has three entries:
Show filters in modal: checked shows the filter form in a modal window.
Hide active filters: mark hidden badgets, which indicate which filters are affecting the gadget.
Hide button clean filters: hides the clean filter button on the form.
As an example, we will now create a simple numerical filter over the year:
We press CREATE.
When creating it, it is added to the filter list.
We close the modal widow and we see that a new icon before appears now, because now the gadget has defined filters: . When you press that icon, we see the filters form. We click OK and see the filtered data.
The next step is to create another gadget and see how to filter it from this:
To do this, we create a gadget type line for example, for the same ontology - although it could be for another.
We press the datalink icon.
and we create the relation indicating as parameter the filter identifier in the gadget source. We write year, press the + icon to add the relation and close the modal window.
We click OK on the filter form and see that the two filtered gadgets are there.
If we press the Clean Filters button, the filters are cleaned and we see the initial data again.
Use of the Filter gadget
We will now create a gadget filter to filter the two previous gadgets.
To simplify the example, we remove the filter that we had on the gadget bars. To do this, we click the edit filters icon and, in the list of filters, we click on the red icon. If we wanted to modify it, we would click on the tool instead.
We remove it and the icon no longer appears in the upper right:
We drag the gadget filter to the dashboard.
It appears with this format:
We click on the button of the three dots and edit filters and re-create a filter for the year less than and another greater than.
After creating the two filters, the filter gadget will look like this:
Now we indicate in the datalink the relations with the gadgets. The source will be the gadget filter.
We define that it affects one parameter for each of the gadgets. We could also make the two filters affect the two gadgets, etc.
If for example we mark min as 1900 and max as 1910, the gadget data will be filtered.
Giving us this result. Here we can see the badgets where the filter being applied to the gadgets is shown. As previously explained, they can be either shown or hidden from the modal edit filters.
Note:
NOTE
In the case of the intervalfilter, two relationships will be created in the datalink with the target gadget, adding the terminations to the filter identifier
identifier + startDate and identifier + endDate, for example if we have a filter gadget with a filter of the intervalfilter type with identifier
timestamp, we will create in the data link two relationships from the gadget source to the gadget target putting as filter identifiers
timestampstartDate and timestampendDate.
Access from the code to the filters in Gadget templates:
We have the following functions and variables available to use the filters in the gadgets templates from the JavaScript code, in case it is necessary to know what value they have at some time for example:
Send a data filter:
vm.sendFilter(field, value, op)
field: filter identifier.
Value: value to be sent.
Op: operator (=, <, >, …)
An example would be:
vm.sendFilter(‘year’, 2000, ‘=’)
An example would be:
vm.sendValue(topic, value)
topic: topic to indicate in the datalink which gadgets will be affected.
value: value that is sent for that topic.
An example would be
vm.sendValue(‘topic1’, ‘{actívate:true}’)
To access the data structure containing the filters from the JavaScript code of the gadget template, we can use this variable:
vm.filters