3 tips for developing your Qlik Sense Mashups

3 tips for developing your Qlik Sense Mashups

Using mashups to render Qlik Sense panels allows for numerous features not present in the traditional “self-service” version of the tool, since it is possible to merge web technologies in a free way. However, this freedom can endanger the end user if some care is not observed during development.

1) Use Single Page Application in an HTML Only

At first it may sound strange, but working with just one HTML file makes the mashup more performative. Exchanging pages and reloading files and objects requires significant performance loss. The tip is to work with Single Page Applications (SPA), in order to optimize the loading of the resources needed for the mashup to work. It is worth mentioning that for anyone using Angular or rendering HTML templates on demand, the drag-and-drop functionality of the dev-hub will not work.

Practical example:
Main file: index.html
Template page 1: page1.html

Using angular or any other tool to include a page inside the main file at runtime will make it impossible to use the dev-hub for the drag’n drop function. This is because when we drag an object into a demand-driven page element, dev-hub will look at the index.html file on your machine and will not find the element (after all, the source file did not load any pages yet , so it does not have the necessary element).

2) Use the HTML editor with CAUTION

Developers have their prefered HTML editors, with varied themes, plugins, extensions, etc. So the development of mashups becomes more comfortable in terms of coding interfaces and, moreover, more productive in an environment outside the environment provided by Qlik (dev-hub). However, there is a crucial point of attention to avoid rework.

We will think of a mashup with the following files and development scenario:


Open browser tabs:
Mashup open with the dev-hub, to use the drag’n drop functionality of objects.

Suppose that, using an external HTML editor, we changed the file mashup.html and mashup.js. When we return to the browser to use the Qlik drag’n drop, it is necessary to reload the page with automatic cache cleaning (in Google Chrome: F12 -> Network -> Disable cache). This is because the dev-hub uses an aggressive cache, so files persist in their environment, ignoring any external modifications.
The same applies if a file is modified using the dev-hub: any external modification will be disregarded and lost if the same files are opened in an external HTML editor, generating a considerable rework.

3) Make the design for mobile first

If your mashup is good for mobile devices then it will adapt more easily to the other types of devices. The mobile-first method refers to designing and implementing the design by mobile devices before the desktop version. On small screens we must make visible only what really matters, both functionalities and content. This way we guarantee the heart of our mashup with indispensable factors, such as performance, usability and content for all resolutions right from the start of our development.

Leave a Reply

Your email address will not be published.