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:
http://server/single/?appid=myappid&sheet=sheetId&opt=options
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.
-Rob
hi Rob
I’m the poster !
what a great answer to my issue.
So, i do not have html developpement skills
The same thing for bootstrap …
I ‘ll try your solution as a novice … and i would return to comment my success (i hope)
Before i start … i use extensions in my app. does your solution works with extension ?
For my comments, do you think it’s better to post in your blog only or in my thread in qlik community also ?
Regards
Philippe
Hi Rob – thanks for sharing this, a very neat example of how open and extensible Sense is.
We had Nick come and deliver some training for our team, and it was a very interesting couple of days.
Hi Rob .
i tried, made the job in your code (title, sheet id, path) for my app.
it’s working perfectly … extensions works to (except one : “sense-navigation” … if you have an idea about this point ?)
other detail … i lose the favorites button 🙁
is there a solution for that ?
great thank’s !
Philippe
I don’t know of a simple way to bring in the bookmarks menu. You would need to write your own using the Capability or Engine API.
Rob,
In the continuity of your solution, i have an other question about security.
If i want my users to be able to use and not edit my app , it will be necessary to prevent them to open the app. in qlik sense desktop directly.
Is there a solution about that (in loading script or/and in the file properties, with a password ) ?
If yess, i could work with real business data by protecting them …
It would be a very efficient and secure way for teachers … i think it will interest many of them !
Regards
Philippe
If you want to get that level of security or app protection, you need to host the app on QS Server. QS Desktop lacks security features by design.
Thanks Rob! It’s really great and can be helpful when we want to show only dashboard for analysis using even Qlik Sense Desktop.
ok for the security issue.
have you any idea about the favorite button and the extension don’t working (sense-navigation) ?
thank’s again
Philippe
If you wanted favorites/bookmark function, that’s something you would need to code yourself using the mashup APIs.
If you are using sense-navigation to change sheets, that won’t work as we have taken over sheet navigation with the buttons at the top.
Another issue about selections :
it seems that when you navigate from one sheet to another it disables the selections
is it possible to keep them ?
Selections stay constant for me between sheets, not sure what issue you may be having.
Ok Rob
I’ll learn to code myself …
about selection’s issue i confirm they don’t stay constant for me …. which makes the solution inoperative
too bad 🙁
regards
Hello Rob,
I am very impressed by your solution which is super easy to use. However I am having a hard time using UNC Paths instead of mapped drives for the qvf file destination. Do you have any suggestions? I have tried several formats for the UNC path but nothing seems to work.
Hi Anton,
I’m guessing you are using QS Desktop. I believe the answer is that QS Desktop is designed to deliver content only from it’s registered Apps directory, not qvf files that live outside the QS Desktop installation.