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.
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.
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.
| | widget_demoWidget6.less
The created files and source code accompanying this article can be downloaded here.
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.
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.
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.
Summary and sources
As a final result of chapter six, the custom widget supports the filtering of data rows now.
Read in this series:
- (0) Custom widgets introduction and prerequisites
- (1) Creating a simple custom widget
- (2) Setting up data assignment
- (3) Configuration of assigned columns
- (4) Configuration of thresholds
- (5) Selection handling
- (5a) Multiple selection handling
- (6) Using filters
- (7) Creating actions
- (8) Enable multi-language support
- (9) Using the D3 library within a custom widget