Dynamic DIV-tag integration

[Alexander_Thor]

With QlikView 11 we introduced a feature with the sexy name DIV-tag integration.

What this really enables us to do is to reference our JavaScript API and integrate QlikView Objects into web solutions with full functionality.

This is huge. With no extra licenses QlikView users around the world can now enjoy QlikView functionality within non .Net solutions, embedded into their ERP or CRM systems. The community loved it but was also a bit concerned that the amount of objects floating around out there would increase the maintenance of QlikView.

A few lines of JavaScript will eliminate that problem for you

Dynamic DIV-tag integration 1.0

Now you have 1 solution to maintain that can serve your entire company with embedded QlikView Objects.

Short version:

You will need:

QlikView Server version 11 installed.

Some sort of web server.

A can of coke and a smile on your face.

NEW: A workbench license.

Installation:

1. Download the sample at: http://dl.dropbox.com/u/18211954/Extensions/single.zip

2. If you are running QV Webserver extract the contents to: C:\Program Files\QlikView\Web\

3. Change the script references in single.htm to match your setup.

4. And you are done.

How-to:

The solution accepts input according to the following syntax: http://WebServerUrl/app pool/single.htm?app=your document without qvw&obj=ObjectID

Optional parameters are w and h to set width and height otherwise default to 100%

On my demo system the following URL will generate the chart below:

http://localhost/QlikView/single.htm?app=Vinguiden&obj=CH233&w=200&h=400

NOTE: If you get a no connection error message try adding the .qvw extension to your app variable

This chart has full QlikView functionality. If you for some reason want to disable any interaction with the object, set it to read-only in the QV document.

[#2]

Hi Phaneendra,

Is your problem resolved? Please could you tell me, how did you make it working? Please share.

Thanks

[#3]

Hi All,

By any chance, is anyone implemeted the below concept part DIV integration with workbench in Java based application

[Browser] -> [webserver 1: HTML page and Proxy.aspx] -> [webserver 2: QvWebServer]

I trying to integfrate DIV integration with workbench into my java application and struck with CORS errors, for that , I tried to enable CORS on QVWS, but still getting the same  CORS error.

I am gave up at the moment, and planned to implement proxy page, but just looking for sample, as I am not sure how to do this and also I need to pass webticket to access the document on QVS.

Please share the info, as I need it very urgently.

Thanks,

[#4]

Hi Alexander,

For DIV-tag integration do we need to have Qlikview licenses ?

[Alexander_Thor]

Yes, server-, user- and a workbench-license.

Kind Regards

Alexander Karlsson

[#6]

Hi Alexander,              

Thanks for your reply.

One more question regarding Qlikview mash-ups. So how can we integrate Qlikview objects with Android/IOS mobile apps.

[#7]

Hi Alexander,

  We are using DIV integration for our application. We have more than 500 qlikview objects, which we embedded in our html pages using DIV integration. Unfortunately we are not able to load the qlikview objects when we needed, so we are loading all these 500 qlikview objects at loading time and using basic html hide and show methodology, we are displaying the qlikview objects in our web pages. This approach is suggested by qlikview guys. But this design taking longer time(10 secs to 20 secs) to load initially when user log-in. Also taking 8 to 15 secs to refresh the page, when we apply any filter. Our qlikview file is very small (10 MB) and we will not have more than 1 million rows

  Can we have any other design so that we can embed qlikview objects in our html pages and get the quick response time within in 1 sec. We can not go for Opendoc or iFrame as we have custom UI developed in html5 and css3.

Thanks,

Ram

[Alexander_Thor]

oh wow. I'm going to be very blunt here, that is a horrible horrible approach.

500 objects sounds a bit overkill also, I'm guessing a lot of them are duplicates with different dimensions or expressions? That could be solved in QlikView by using conditional dimensions and expressions to cut down on the number of objects you have to maintain.

Let's take this offline, feel free to e-mail me at akl@qlik.com and I can provide some code samples.

[#9]

Hi Alexander,

My question doesn't have anything to do with this article, I've just read some of your articles and wanted to email and ask you a question. 

I've implemented div integration, where I have a few individual objects that appear and work. But I'd like for my web page to "be aware" of activities in those objects (if that makes sense). So, for example, if the user scrolls a listbox down to the last row, my javaScript "knows that they did that". I guess a listener,  but I can't figure out how to do that with QlikView objects.

I'm not particular, and have little knowledge of Qlik internals, but would appreciate any guidance you might have.

Thanks,

Alan

[Alexander_Thor]

As far as I know there are no supported events for QlikView objects. Then again I haven't really worked with the QV APIs for a few years so I could be wrong on that.

I guess you could target our objects and inject your own listeners to listen for certain type of events such as scroll and clicks.

[#11]

Hi Alexander,

Thank you for responding to my question.

What I'm doing is mixing Qlik objects with live web content - you click on a Qlik grid and I call a webApi to get live data and display it on the page.. The problem I was trying to solve was that when you sort or refresh or scroll/other, my listeners weren't attached anymore..live is deprecated and .on doesn't work.

So I needed a way to know that object/s had been refreshed, then re-attach the listeners to the resulting divs in the refreshed QvContent.

I figured it out. So here's what I did (the highlights anyway) below. It's not a very elegant solution but it'll work until I find a better one.

    QvReport.PreInitWorkBench = function () {

        $(".qlikPane").addClass("Qv" + QvReport.Report);

    };

    QvReport.InitWorkBench = function () {

        QvReport.PreInitWorkBench();

        Qv.InitWorkBench({

            View: QvReport.DocumentName,

            Host: QvReport.Host,

            BodyOnLoadFunctionNames: "QvReportOnLoad",

        });

    };

    QvReportOnLoad = function () {

        // Set callback for QlikView event "OnUpdateComplete" for policy summary grid. When that grid updates, the callback function will be called.

        var doc = Qv.GetCurrentDocument();

        var policyChart = doc.GetObject("CH37");

        policyChart.SetOnUpdateComplete(OnPolicyGridUpdated());

    }

    function OnPolicyGridUpdated() {

        setEventListener();

    }

    function setEventListener() {

        $('div').on('click', function (event) {

            // Click on down arrow of QlikView search box Document\SO07

            if (this.className == "QvContent QvSearchObject ui-helper-clearfix") {

                event.stopPropagation();

                event.stopImmediatePropagation();

                return;

            }

            // Clicked and then let go of scroll bar on QlikView grid Document\CH37

            if (this.className == "Qv_ScrollbarBackground") {

                setEventListener();

            }

            var target = $(event.target);

            var targetnext = target.next()[0];

            // Clicked on web control button "Clear"

            if (target[0].id == "qvClearButton ") {

                event.stopPropagation();

                event.stopImmediatePropagation();

                qvClearButtonClick();

                return;

            }

            // Clicked on policy number on QlikView grid Document\CH37

            // Fetch policy detail via webApi and display on page

            var targethtml = targetnext.innerHTML;

            var targetval = $(targethtml).attr('title');

            if ((targetval.length == 10 && /^\d+$/.test(targetval) == true)) {

                event.stopPropagation();

                event.stopImmediatePropagation();

                RenderPolicyDetail(targetval);

            }

        })

    }