Qlik Sense Widgets – my very first time
After doing Qlik Sense extensions for a couple of years now I was allowed to touch the Widgets – a user friendly concept of simplifing the creation of visual components for Qlik Sense - promising not to code, at least no JavaScript.
Well, I think it’s not. Might be true for some very simple vizzes with few data like KPIs or input controls like buttons or sliders. But, when it comes to more complex use cases and larger data sets you have to deal with limitations and rethink.
So, I started my first own widget library. It contains only one widget for now, a table widget to provide dynamic labels (and more), a missing feature in Qlik Sense:
https://github.com/ralfbecher/irregular-widgets
Fortunately, a Widget is nothing else than an AngularJS extension. Now it gets interesting here since we can use JavaScript code snippets in AngularJS expressions to access underlaying properties and data, also to add processing logic.
This is very simple: in the expression snippet we can access the widget’s properties we have defined thru the object settings and the widget’s data thru the object data. To investigate these object structures just add following console outputs to you template:
<qw-console log="settings" /> <qw-console log="data" />
Please have a look into the expressions in the template of the table widget to get an idea what’s possible.
What I haven’t thought would be possible at the beginning was to extend the HyperCube definition itself.
The widget’s underlaying HyperCube is defined with a fixed size of the initial data page in qHyperCubeDef.qInitialDataFetch to 10 columns and 50 rows and we have no access to adjust it. How can we exceed this limit if we need more than 10 fields? There are no properties in the panel or code artifacts we can use for these settings. In my opinion a clear lack of features here, but there is help. After a few investigations and a steep AngularJS learning courve I found a way quickly:
We can use the AngularJS ngInit directive initially to call the applyPatch method of Enigma - the new Qlik engine API module (still not released nor documented) - to patch options of the hyperCubeDef we need:
data.model.enigmaModel.applyPatches([ {qPath: '/qHyperCubeDef/qInitialDataFetch/0/qHeight', qOp: 'replace', qValue: settings.rowsPerPage.toString()}, {qPath: '/qHyperCubeDef/qInitialDataFetch/0/qWidth', qOp: 'replace', qValue: settings.maxColumns.toString()}]) settings.rowsPerPage.toString()},{qPath: '/qHyperCubeDef/qInitialDataFetch/0/qWidth', qOp: 'replace', qValue: settings.maxColumns.toString()} ])
(Watch out not to break the line of an expression. Not all browsers can handle this correctly.)
It’s probably a rude way to get things work and not the intension of the Widget concept but who said we need to be polite? However, I’m curious if someone else found a better and more conform solution..
With the understanding of the widget’s object model and how to use the AngularJS directives and expressions in the template we have all we need to start new Widget ventures!
Good luck! Hope to see some more new stuff out in the wild.