Qlik Sense is getting better and better on every release!
I was working on a large website using Qlik Sense 2.1 and the Capability APIs where I used the template that I had created and blogged about Creating a website with Angular and the Capabilities API. I had almost finished the project, when we decided to upgrade to 2.2. Everything was fine, I was cleaning up my code and I was ready to deliver the project when we realized that most of the charts, had no interactivity!
So, lets fix our template to work properly in 2.2.
One of the two issues was the css. In 2.1 we had to use qlikui.css and client.css. In 2.2 these were replaced by qlik-styles.css. So in index.html replace L17-L18
<link rel="stylesheet" href="http://localhost:4848/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="http://localhost:4848/resources/assets/client/client.css" media="all">
with
<link rel="stylesheet" href="http://localhost:4848/resources/autogenerated/qlik-styles.css">
Also, remove the icon fix we had in index.less and remove L134-L136. This has been fixed in the new stylesheet.
.sel-toolbar-span-icon {
top: -10px;
}
Another issue we found is that, we have to make sure that overflow-y: auto; is in both the html and body. We had that from beginning in this template but it seems to break things in 2.2 if it is only on body and not the html.
In the js/lib/main.js I used in the grid-service in order to make angular work. This has also been fixed and you can remove L30
define( "client.services/grid-service", {} );
Now, going to my last and more important issue, on why the interactivity was broken in 2.2. I started the blog by stating that "Qlik Sense is getting better and better on every release!" and this is so true. I spend several days trying to figure out why the interactivity was broken when I was moving from pages to pages and on random times. The issue was that simply the engine got so much faster on delivering the objects, that Angular could not keep up with it! Really, when the Capability App API app.getObject() is looking for the id to replace the html with, is looking for the parent element width and height. In my case, all of the objects, most of the time, had the canvas drawn with 0 height and width due to that! So, in order to fix this, unfortunately, I had to add a 1/2 second delay on getting my objects. So in the js/services/api.js, wrap L18-L24 in a timeout function
setTimeout(function(){
angular.forEach(obj, function(value, key) {
app.obj.app.getObject(value, value).then(function(model){
app.obj.model.push(model);
deferred.resolve(value);
});
promises.push(deferred.promise);
});
}, 500);
I would add this only if you have the interactivity issues like I have described above. In cases that you have small projects like this one and you do not have a lot of dependencies, this may not be needed at all!
Updated Git: GitHub - yianni-ververis/capabilities-api-angular-template: A simple mvc template for building webpa...
Capability APIs documentation: https://help.qlik.com/en-US/sense-developer/2.2/Subsystems/APIs/Content/mashup-api-reference.htm
Happy coding!!
Yianni
