Is it possible to mashup Qlik Sense with Angular 5?

[Anonymous]

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.

[devarasu07]

Hi,

can you check this article

Using AngularJS in your mashup ‒ Qlik Sense Developers

https://qlikcommunity.qliktech.com/blogs/qlikviewdesignblog/2016/06/24/angularjs-capabilities-api-dr...

Integrating Qlik Sense into external Angular web app

Qlik Sense AngularJS wep app where to start

Qlik Sense Mashup - Changing Chart Dimension on the fly

also there is extension u can try this

Qlik Branch

[Anonymous]

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 · Accepted solution]

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.

[Anonymous]

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.

[matthi0uw]

Have you notice same problem as following ?

In my angular component, I need to call twice window.require to avoid and error :

  constructor(
  ) {
    try {
      window['require'].config( {
        baseUrl: blablabla,
      } );
    } catch (error) {
      window['require'].config( {
        baseUrl: blablabla,
      } );
    }
    window['require']( ['js/qlik'], (qlik: {}) => {
      qlik['getGlobal']().getAppList((list: {}) => {
        debugger;
      }, config);
    } );
  }

1st call is catch, then 2nd pass with success...