Qlik Sense AngularJS wep app where to start

[petercappelle]

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.

[Alexander_Thor · Accepted solution]

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.

[petercappelle]

Thank you!

That was a very clear answer.

But if we use that capabilities API aren't we stuck to the extensions folder because of the presense of RequireJS? I cannot just open an app, because it does not find the functions if i remove the RequireJS out of my code and move my mashup to another folder...

The angular example that i have provided, works completely out of the extensions folder, so how do i accomplish that?

Thank you

Peter

[Alexander_Thor]

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.

[petercappelle]

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?

[Alexander_Thor]

If you check the two examples I posted you will see that they use RequireJS but are hosted on another server.

This help article also explains how set up the RequireJS config to point to your Qlik Sense server Preparing your mashup deployment

Short story, requirejs was probably loaded with relative paths.
If you move your site you will also have to use a fully qualified url to the Qlik Sense server to load RequireJS

[Alexander_Thor]

I would advise against going the Engine API route unless you are used to web development.
I still don't really understand why you insist on putting all of your code inside a single module. RequireJS is a module loader so you can split your code across multiple modules, which is exactly what the angular demo you linked to before does.

[petercappelle]

Well i am used to web development (backend - PHP and Ruby). But having to deal with (for me) new languages like, Angular and that Qlik engine API, in one application is hard to deal with now. I'm just affraid that using the capabilities API will not give me that much freedom as the Qlik Engine API.

For your information, you are telling me

which is exactly what the angular demo you linked to before does.

But that's not true, that demo is a Qlik Engine API demo and not an capabilities demo, you can find it here https://github.com/thomasfriebel/QlikSenseAngularDemo

[#9]

Hi,

We have made an Angle kind of web application using Nodejs and Angular. Basically we use qliksense as the data engine and the authorization provider.

For me it is a bit unclear where your actual issue lies? Is it with the module structure of requirejs? I prefer requirejs due to the modularity and only requiring scripts/dependencies where their needed and not polluting the global namespace.