Summary: Learn an easy method to deliver a Qlik Sense app as an embedded web page. Yes, the spelling of this post’s title is intentional 😉
I just came off a week of Qlik Sense API & Integration training with Nick Webster of Websy. I’ve been nothing short of impressed with the integration and reuse options of Qlik Sense.
I was intrigued today by a question on Qlik Community asking if there was a way to disallow the application Edit mode in Qlik Sense Desktop. The poster wanted his students to just “use” an app and not poke around in the design until a later time. Kind of like the “distraction free” mode in text editors.
The challenge I gave myself was how quickly could I knock out a solution to this problem? I’ll detail my solution below and I’ll tell you it is taking me longer to write this blog post than it took to build the solution.
Rather than working at disabling or removing function I didn’t want, I approached the problem as including only what I wanted. My first thought was to create a mashup that represented the entire application. Then I struck on an even easier approach — use the Qlik Sense “Single Integration API” with a bit of Bootstrap. The Single Integration API does not require writing any code. It’s just a URL that displays a single Visualization or complete Sheet. You can create URLs and experiment with options in the Dev Hub Single Configuration Tool.
Bootstrap is a popular web design toolkit that makes it easier to create responsive and interactive web pages. Thanks to Nick’s class I understood how Qlik utilizes bootstrap.
A basic URL to display a sheet looks like this:
Appid is a qvf filename on QS Desktop, or the GUID if using QS Server. Options allow you to control things like allowing selections. A complete list is in the API doc.
With 50 lines of html I created a web page that delivers the full associative experience across seven sheets, including Current selections, Smart search and the Selections tool.
Here’s a screenshot showing my sheet navigation buttons across the top and the Sheet content, including Current selections, immediately below the buttons.
The html file is available for download here. I used the “Sales Discovery” sample app but it is easy to adapt the file to any application.
There is a single iframe nested in a responsive Bootstrap container. The buttons simply change the src attibute of the iframe to load a specific sheet .
If you want to try the file yourself you only need to change the “var appid=” string to point to the app path on your machine. No web server is required, just double click the html file to launch. Your server or QS Desktop must be active. Yes, this file works as is with QS Server.
Nick and I will be showcasing a variety of QS integrations at the Masters Summit for Qlik in Boston Oct 23-25. Nick will also be presenting a half day “Qlik Sense Integration” session at the summit that will teach you how to create a basic web page with bootstrap and explore more advanced QS integration options.