Quick Sense App in a Page

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

 

Share

12 thoughts on “Quick Sense App in a Page”

  1. 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

  2. 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.

  3. 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

    1. 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.

  4. 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

    1. 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.

    1. 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.

  5. 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

Leave a Reply

Your email address will not be published. Required fields are marked *