(6) Using Filters

Knowledge base
,
1

Overview

The sixth chapter explains the topic filter handling in custom widgets.
This chapter is recommended for anyone planning to create a custom widget that uses filter dependencies and can be filtered by other widgets. 
The basis for chapter six is a custom widget that uses the data assignment as it was explained and created in chapter three.

Widget Preview

The custom widget “Demo widget 6” will display the data of columns and rows just like “Demo widget 3”, but additionally support the filtering of data.
The screenshots below show the final result of “Demo widget 6” being filtered by an other widget.

872×304 17.5 KB

Resulting files

Demo widget 6 consists of the following directories and files.
As compared to the structure of "Demo widget 5" the following folders and files were added or changed.

\---customWidgets
     \--- demoWidget6 
          |     demoWidget6Config.js 
          |     demoWidget6Module.js 
          | 
          +---assets 
          |     +---css 
          |     |         widget_demoWidget6.less  
          |     | 
          |     \---images 
          |               demoWidget6MenuIcon_32x32.png 
          | 
          +---js 
          |         demoWidget6AssignDataCtrl.js 
          |         demoWidget6Ctrl.js 
           |         demoWidget6DataService.js 
          | 
          \---partials 
               |   demoWidget6.html 
               | 
               \--- assignDataDialog
                     |   advancedProperties.html 
                     |   assignColumns.html 
                     |   assignData.html 
                     |   thresholdProperties.html 
                     | 
                     \---  columnTypeConfigTemplates 
                               date.html 
                               numeric.html 
                               text.html

The created files and source code accompanying this article can be downloaded here.

Creation steps

Step 1: Enable the filter framework in custom widget configuration

In order to apply a filter on the data of a custom widget two preconditions must be fulfilled. One is the assigning of data and the other one is the activation of the filter framework for that widget.
 For the second part please edit the custom widget configuration file demoWidget6Config.js and add the action "filter" as shown in the example below.

demoWidget6Config.js 
angular.module('demoWidget6Module')
    /**
     * Configuration for the custom widget
     * The config contains all configurable properties of the widget
     */
    .config(['dashboardProviderProvider','columnTypeConfigUrlServiceProvider',
        function (dashboardProviderProvider, columnTypeConfigUrlServiceProvider) {
            dashboardProviderProvider.widget('demoWidget6', {
                title: 'Demo Widget 6',
...
                actions: [
...
                    'filter',
...
                ],
...

Explanation: Adding the action "filter" in the custom widget configuration will enable the widget for using the filter framework.
If a custom widget meets all conditions for being filtered, the filter icon will be enabled in the widget properties menu. See screenshot below.

710×322 18.5 KB

Pressing the filter icon will open the filter view where filter dependencies between widgets can be configured. A widget configured for filtering will offer all its available columns and inputs for the usage in a filter dependency. 
This is handled by the filter framework and needs no further configuration or implementation. See screenshot below. 

1427×771 54.1 KB

Summary and sources

As a final result of chapter six, the custom widget supports the filtering of data rows now.

Read in this series:

image.png
image.png872×304 17.5 KB

image.png
image.png710×322 18.5 KB

image.png
image.png1427×771 54.1 KB