8 Replies Latest reply: Jan 7, 2016 2:13 AM by Markus Anttila RSS

    Qlik Sense AngularJS wep app where to start

    Peter Cappelle

      So i have spent quite some time trying to build my own Qlik Sense web environment with jQuery.

      What i have done so far is

       

      1. 1. creating a bootstrap mashup trough http://localhost:4848/dev-hub/
      2. 2. Integrate D3 charts
      3. 3. integrate senseUtils
      4. 4. Build some multiCubes
      5. 5. had some lines of code (+-2000) in the callback for creating the charts and do some math
      6. 6. Had a pretty good dashboard

       

      But still I’d some problems with the limitations these mashups gave me. ( mashups only work in the extensions folder + need of a web server so we can use some server sided languages such as PHP to communicate with a database.)

       

      What I’ve done now spend some weeks trying to understand AngularJS. Did some great courses and now I’m ready for some better building.

       

      First step i did now is look at this example I found googling. https://github.com/thomasfriebel/QlikSenseAngularDemo ( that was the reason for me to learn Angular! Your applications does not has to be in the extensions folder anymore (Weeehew!). So all my problems are solved… Except that I did not realized that the code of Qlik Sense became harder than it was in the mashup.

       

      On this website (https://help.qlik.com/sense/2.0/en-us/developer/#Home-developer.htm%3FTocPath%3D_____1) i have found all the sorts of API's Qlik Sense is providing. Honestly i lost it now... I see that there are about 8 API's??

       

      What API do I have to use? I personally think the Qlik Engine API? But what about the QSocks library? Where does this library fits in? Also why are there 8 different ways to accomplish the same thing? Last if u use the Qlik Engine API, do I still need to use senseUtils for example?

       

      I know there are a lot of questions here but I just wanted to ask them all in once so I can get the misunderstandings out of the way.

        • Re: Qlik Sense AngularJS wep app where to start
          Alexander Karlsson

          I'll take a stab at some of the questions

           

          First off, regardless if you create your webpages using jquery or angular you can still host your site through any kind of webserver you like. It does not have to be hosted as a extension through the proxy/qrs. The benefit of hosting it over our static webserver is that we will sort out authentication for you automatically which you typically would have deal with yourself if you separate out your pages from the Qlik Sense infrastructure.

           

          Starting from 2.0 we made a more clear distinction of the APIs, the ones you are referring to are part of the family we call Capabilities API (or Mashup API pre 2.1). The Capabilities API and all the sub-APIs are accessible from the same qlik module so you still only have one surface area BUT we did provide them as separate APIs to make it more clear what responsibilities each API has.

           

          The Angular demo you link to also uses the Capabilities API but it also takes advantages of the benefits that Angular brings to the table. It's worth noting that regardless of the framework/tech you pick, be it jquery, angular, react, ember, backbone, knockout etc etc you will be primarily be utilizing the Capabilities APIs to interact with Qlik Sense.

           

          The Qlik Sense Engine API is not a API per se, it's a JSON-RPC style websocket protocol that defines the communication between the QIX Engine and clients. Qsocks as you mention implements that protocol in javascript, if you for example want to do some serverside programming against QIX using NodeJS it's a viable alternative.

           

           

          The Engine API is also what underpins all of our other APIs and is the communication foundation that all of our services build upon and is by nature very low level. The Capabilities APIs, Extension API and Backend API are abstraction layers on top of the Engine API as well as our graphical components, such as charts, to make it easier for developers to get started developing against Qlik Sense without having to built everything from scratch.

           

          Overall I would focus on understanding how the Capabilities API works and if you want to go the Angular route then reading up a bit on the specific syntax that Angular has.

          • Re: Qlik Sense AngularJS wep app where to start
            Alexander Karlsson

            Just as a follow-up,

             

            http://webapps.qlik.com/ncaatonfl/index.html

            http://collegebasketball.qlik.com/

             

            Are two examples of websites built with the Capabilities APIs, relying heavily on jquery or vanilla js and that's hosted on external webservers.

            You listed a example of a angular implementation so I won't list more of those.

             

             

            http://diplomaticpulse.qlik.com/ (https://github.com/mindspank/DiplomaticPulse)

            http://branch.qlik.com/ (https://github.com/Qlik-PE/branch-resource-library)

            Is two examples of a webpages that uses the Engine API implemented by qsocks.

            Now this is not something I would recommend people so start with unless you have more data driven requirements, not so interested in charts or you intend to implement your own visualizations but using the QIX data layer.


              • Re: Qlik Sense AngularJS wep app where to start
                Peter Cappelle

                As my answer on the time of your follow-up is/was still being moderated i will answer in an new reaction.

                 

                What we want to accomplish is something like this: Angle - Angular Bootstrap Admin Template connected to our Qlik Sense app, with the D3 charts or highcharts (http://www.highcharts.com/).

                 

                We have tried it with the charts from Sense but we are always facing positioning and responsive problems. With D3 we don't have those problems.

                 

                Our application will have a lot of data, mostly tables with compares, evolutions,... So i really want to use the best way to get my data out of Sense and put it all into charts and tables. Untill now I have made a mashup in the dev-hub and then added this bootstrap template to it and made functions between the RequireJS function that invoked building hypercubes and charts, doing calculations, …

                 

                Till now i made something that worked but i was facing problems when i tried to use the filter panel from senseUtils. To me it had something to do with the fact that I was just using my app inside the extensions folder and I had to put all of my Javascript code inside that RequireJS function.

                 

                Now I think that the best way to get my data out of Sense is to just do it the Socks way. I am just wondering if those filters will work like they do inside the mashup (just build a new hypercube when you filter for example by year), or do I have to do it all manually?