Qlik Community

New to Qlik Sense

Discussion board where members can get started with Qlik Sense.

3ernardo
New Contributor III

Is it possible to mashup Qlik Sense with Angular 5?

Is it possible to Mashup Qlik Sense with Angular 5?

I intend to make an Angular 5 PWA app with Qlik Sense Mashup, but I haven't found any example that uses this particular mixture and I am running into major problems trying to figure it out by myself. So is there any example, material or tutorial on using mashup inside an Angular (not AngularJS) app? Is this even possible?

Thank you very much.

1 Solution

Accepted Solutions
bela2_szalontai
New Contributor II

Re: Is it possible to mashup Qlik Sense with Angular 5?

Hi,

I am not granted to give you details, but I can say it is possible with some limitation.

First I have a question: which authentication method do you use in Qlik sense (SAML, JWT, Ticket, etc..) set up in the proxy or vitual proxy in QMC?

Then here you are some info:

- From Angular2,4,5 side (so Client side) it is not possible to create a Qlik sesson in secure way. Technically it is possible, but you always have to provide credentials (Private key, CERT etc..) to client side which is not secure so no way.

- You cannot use iFrame integration because it is not cross browser compatible anymore (IE9,10,11 does not support well)

- You can integrate a Qlik Sense Mashup into a DIV HTML tags with some hack (workaround)

- First you have to authenticate the user and Sign-in to Qlik (I cannot give you more information about the trick, sorry

- If your user is well authenticated in Qlik you can see following Cookie in the Browser:

name: the name of the Cookie set up in the proxy or virtual proxy authentication settings in QMC e.g. X-Qlik-Session

value: the session ID e.g.: 91b42818-382a-4e18-9fe8-746152b15bd4

domain: the domain name of your Qlik instance

it will be a HTTP only proxy so it is not possible to parse it from Angular, let say Client side..

- In the index.html of the Angular 2+ app no need to include any Qlik related Javascript or CSS

- You have to create a component which DYNAMICALY loads the require.js from the Qlik server then DYNAMICALY loads the necessary CSS also from the QLIK server

- Then you have to load finally the mashup related Javascript which will Require the qlik object then instantiate the app

(see dev-hub Mashup editor CSS, JS, HTML files for more details)

- Limitation: require.js overrides (or overloads?) some original JS framework e.g. JQuery, bootstrap.js, I don't know what else.. So MAYBE your app will lost some object because require puts it out of global scope.

4 Replies
3ernardo
New Contributor III

Re: Is it possible to mashup Qlik Sense with Angular 5?

Thank you for answering Devarasu.

But unfortunately all this material is about AngularJS, as I said, my objective is to use the TypeScipt based Angular (aka: Angular 2, 4, 5).

bela2_szalontai
New Contributor II

Re: Is it possible to mashup Qlik Sense with Angular 5?

Hi,

I am not granted to give you details, but I can say it is possible with some limitation.

First I have a question: which authentication method do you use in Qlik sense (SAML, JWT, Ticket, etc..) set up in the proxy or vitual proxy in QMC?

Then here you are some info:

- From Angular2,4,5 side (so Client side) it is not possible to create a Qlik sesson in secure way. Technically it is possible, but you always have to provide credentials (Private key, CERT etc..) to client side which is not secure so no way.

- You cannot use iFrame integration because it is not cross browser compatible anymore (IE9,10,11 does not support well)

- You can integrate a Qlik Sense Mashup into a DIV HTML tags with some hack (workaround)

- First you have to authenticate the user and Sign-in to Qlik (I cannot give you more information about the trick, sorry

- If your user is well authenticated in Qlik you can see following Cookie in the Browser:

name: the name of the Cookie set up in the proxy or virtual proxy authentication settings in QMC e.g. X-Qlik-Session

value: the session ID e.g.: 91b42818-382a-4e18-9fe8-746152b15bd4

domain: the domain name of your Qlik instance

it will be a HTTP only proxy so it is not possible to parse it from Angular, let say Client side..

- In the index.html of the Angular 2+ app no need to include any Qlik related Javascript or CSS

- You have to create a component which DYNAMICALY loads the require.js from the Qlik server then DYNAMICALY loads the necessary CSS also from the QLIK server

- Then you have to load finally the mashup related Javascript which will Require the qlik object then instantiate the app

(see dev-hub Mashup editor CSS, JS, HTML files for more details)

- Limitation: require.js overrides (or overloads?) some original JS framework e.g. JQuery, bootstrap.js, I don't know what else.. So MAYBE your app will lost some object because require puts it out of global scope.

3ernardo
New Contributor III

Re: Is it possible to mashup Qlik Sense with Angular 5?

Hi Béla

Thank you very much for your answer. Well, the primary intention is to authenticate users via ticket but this part of the app is yet to be developed. Due to the lack of examples and documentation on mashing up with Aangular2+ we decided to develop our app in AngularJS this time hoping that this experience will enlighten us on future projects.

Community Browser