Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Announcements
QlikWorld 2022, LIVE in Denver CO., May 16-19, 2022. REGISTER NOW TO RECEIVE EARLY BIRD PRICING
Francis_Kabinoff
Employee
Employee

The problem, the solution

Recently, while making a mashup in Angular.js using the Capability APIs I noticed that my UI was performing very poorly. In particular, making a selection in one of my custom selection boxes was basically freezing the up the entire UI for up to a few seconds! After poking around a bit, I discovered the problem: there was just too many dom elements being watched for changes.

You may have seen this problem yourself if you've ever tried to use Angular.js to create a mashup. And this problem isn't inherent to only mashups; the same problem applies to extensions. So how do we deal with it? We can use virtual scrolling.

Virtual scrolling is a way to render and watch only the dom elements that are currently in view, and changing those elements to other elements as we scroll, as opposed to actually rendering and watching all of the elements. The Qlik Sense client already does this, which, in a minute, you'll see we're going to use to our advantage.

Here's two examples to show you just what I mean. You can see that the render time is much faster on the page that implements virtual scrolling, and that the UI responsiveness when making selections on the Case IDs is drastically better.

Virtual Scrolling Example ‌              No Virtual Scrolling Example

So how can you implement virtual scrolling in your mashup or extension? I'm going to walk through an example implementing virtual scrolling in a custom listbox for a mashup, but the same idea can be applied to extensions as well.

Using what's already there

Remember I said that the Qlik Sense client already implements virtual scrolling, and that we can use that to our advantage? We're simply going to make use of the same library that Qlik Sense objects already use to implement virtual scrolling. When building mashups or extensions, it's possible to use any library the client is already using. To see the full list, you can go to the "Menu" in the Qlik Sense client and click "About," then "Third-party Software."

2016-05-13 12_07_40-Qlik Sense.png2016-05-13 12_08_34-Qlik Sense.png

We can see in the images above that something called "angular-vs-repeat" is used by Qlik Sense, and, in this case, that's what we're after. The angular-vs-repeat library is an angular directive for virtual scrolling.

It's super easy to include this in your Angular.js based mashup.

var app = angular.module('app', ['vs-repeat']);

That's all you need to include it, since it's already loaded with the Capability APIs.

Implementing virtual scroll

Using it is pretty simple, too. In the most simple of cases, all you need to do is include the vs-repeat directive on the direct parent of an element with ng-repeat. In our example, that looks like this:

<ul vs-repeat class="cases-container">

     <li ng-repeat="case in cases" ng-click="selectCase(case)" class="{{case.qState}} case">{{case.qText}}</li>

</ul>

Resources and wrap-up

And that's basically the idea. The entire code for the example mashup is attached, and the link to the angular-vs-repeat repository on github is below. Hope this helps you improve the performance of your mashups and extensions

https://github.com/kamilkp/angular-vs-repeat

8 Comments