EN | ES

Introduction

The platform allows you to define complex filters in your gadgets and dashboards, in a simple way.

You 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, you can define a filter form to filter the gadget itself where the form is defined and, by means of the datalink, you have the option to indicate whether you 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, in order to create gadgets with defined filters.

Creating filters in a Gadget

First, create a gadget. For this example, you will use the Helsinkipopulation ontology and create a bar gadget:

In dashboard editing mode, click on the three-dot icon of the gadget menu and then on the Edit Filters entry.

You will be 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 you can fill in the filter data.

In the form, you define the identifier, which must be unique.

Type filter, to select the type of filter you want to create, it can be a text filter, numerical filter, ... The fields that appear for you to fill in, will depend on that choice.

FILTER LAYOUT:

It has three inputs:

• Show filters in modal: If checked, it shows the filter form in a modal window.
• Hide active filters: If checked, it hides the badgets, which indicate which filters are affecting the gadget.
• Hide button clean filters: If checked, it hides the clean filter button on the form.

As an example, you can now create a simple numerical filter on the year:

Press CREATE.

When creating it, it is added to the list of filters.

Close the modal widow and you will see that a new icon before appears now, because now the gadget has defined filters:    . When you press that icon, you will see the filters form. 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, create a gadget type line for example, for the same ontology - although it could be for another.

Click the datalink icon.

and create the relation indicating the filter identifier as a parameter in the gadget source. Write year, press the + icon to add the relation, and close the modal window.

Click OK on the filter form and see that the two filtered gadgets are there.

If you press the Clean Filters button, the filters are cleaned and you will see the initial data again.

Using the Filter gadget

Let's create a gadget filter, to filter the two previous gadgets.

To simplify the example, remove the filter that you had in the gadget bars. To do this, click on the edit filters icon and, in the list of filters, click on the red icon. If you wanted to modify it, you would have to click on the tool instead.

Delete it, and the icon no longer appears in the upper right:

Drag the gadget filter to the dashboard.

It appears with this format:

Click on the button of the three dots and edit filters, and create again a filter for the year less than, and another greater than.

After creating the two filters, the filter gadget will look like this:

Now, indicate in the datalink the relations with the gadgets. The source will be the gadget filter.

Define that it affects one parameter for each of the gadgets. You can also make the two filters affect the two gadgets, etc.

If, for example, you mark min as 1900 and max as 1910, the gadget data will be filtered.

giving this result. Here, you can see the badgets where the filter being applied to the gadgets is shown. As previously explained, these can be either shown or hidden from the "edit filters" modal .

Access from the code to the filters in Gadget templates:

You have the following functions and variables available to use the filters in the gadgets templates from the JavaScript code, in case you need to know what value they have at a given point, 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, you can use this variable:

vm.filters