Challenge Overview
-
Create 2 custom filter widgets as a qlik sense extension using AngularJS
Project background
- Our client is looking forward to migrate the excel reports into Qlik Sense. We will build many extensions and reports in this series.
Technology Stack
-
AngularJS 1.x
-
CSS
Challenge Assets
-
Image of the filter widget which need to be created - https://snipboard.io/87OfHd.jpg and https://snipboard.io/s2FTUt.jpg
-
A sample report developed using qlik sense native pivot table and filter pane is provided
-
To work on this Challenge, You need to download the Qlik Sense desktop from this link. Please note that Qlik Sense desktop will work only in Windows.
Individual Requirements
Custom filter widget 1
Reference - https://snipboard.io/87OfHd.jpg
-
Please create an extension which look like the above screenshot but you may remove the fields Reporting Selections, GAAP and Variance with from the widget
-
Each filter within the widget maps to a unique field in one of the table
-
Mapping of filter to table field name is here. Please expose this mapping via Properties tab of the extension
-
Available values for the fields like Currency, Units, View is already populated in an island table in Qlik sense through data load script
-
Default value for Currency drop down is CHF
-
Default value for Units drop down is Millions
-
Default value for View is YTD
-
Changing values in these drop down or selecting date in the widget should automatically trigger the filter like a native filter.
-
Please refer to the sheet “Native report” in the provided sample qlik sense report OBIA.qvf, if we make any changes in the filter pane, the underlying pivot table will get updated automatically.
-
When we use this custom filter widget, the behaviour should be the same as well. It’s just simply setting a field attribute via API
Custom filter widget 2
Reference - https://snipboard.io/s2FTUt.jpg
-
Please create an extension which look like the above screenshot but you may remove the fields GAAP from the widget
-
This widget will be simply a prototype with values populated from mapped table fields
-
Selecting values in this widget will not trigger any changes
-
Mapping of the widget filters to table field name is same as the previous widget
-
Reporting Selections drop down will have values One to Five
-
Depending on the value chosen in the reporting selections drop down, those many selections will be created dynamically
-
Variance with drop down in each selection will have values None and name of the other selections. E.g. If we have three selections, In selection 1, you will see values None, Selection 1 and Selection 2 in the drop down
-
Vertical scroll bar is required if the space is not sufficient to entire list of selections
Important Notes:
-
Please check the tutorial on developing extensions using AngularJS
-
To debug your Angular extensions, After opening Qlik Sense Desktop, you could open Dev hub to edit the extension files and load the extension in any application within hub to debug using developer console in the browser
-
Please try to match the style provided in the table image as much as possible! Minor differences are ok.
-
Submission, Review and Appeals phase for this challenge is shorter than usual challenges. Hence, please make sure to check the timeline properly.
-
If you have any doubts, Please feel free to post it in the forum. We will be happy to resolve your queries as soon as possible.
Final Submission Guidelines
-
Zip your extension files and upload it using the Submit link
- After submitting, please ensure that you are able to download your submission from Online Review