Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Qlik® Product Spotlight: Discover what’s possible. Get more from our products.
See for yourself. Register today.
alexbjorlig
Contributor

Integrating Qlik Sense into external Angular web app

Hi everyone - I'm a bit confused regarding how to include/embed Qlik Sense into a completely external web app.

So far the user flow is the following, hosted at Firebase with a simple Angular project:

  1. The clients enters username&password in a small angular App (not using require.js)
  2. The client gets authenticated against a small Node.js API
  3. The Node.js server requests a ticket from the Qlik Sense Server
  4. The client then uses the ticket to obtain a resource from the Qlik Sense Server (<server><proxy><resource><qsTicket>).
  5. The client/user is now authenticated with success, and has the cookie. It's now possible to include iframes with Sense etc.

But I would like to do more! I imagine building and exploring the capabilities API (directives, bookmarks, filters) - just like the examples on branch like this or this. I am especially interested in using the selections and bookmarks API's. But I'm a bit confused how to obtain this? The examples include require.js loading the qlik.js file - do I also need to do this or?

Possible next steps - if I understand the architecture:´

5. Load the /resources/js/qlik.js module and inject it into my existing Angular app, after the cookie is set?

6. Use the qlik.js file, something like var app = qlik.openApp(<id of app>)

7. And then for example getting an specific object app.getObject(args), getHyperCubeQ

Is this understood correctly - can you provide guidance how to continue from here?

1 Solution

Accepted Solutions
Employee
Employee

Re: Integrating Qlik Sense into external Angular web app

Hey Alex,

The RequireJS file that you see loaded in all of the examples of using the Capabilities APIs includes more than RequireJS. There's the version of Angular in there that qlik.js depends on, jQuery and some jQuery plugins, etc. It would be difficult to load qlik.js without using that require.js file. 

Since the require.js file contains a version of angular, it will also be difficult to use it in an existing Angular application. You can build a mashup using the Capabilities API with Angular.js, however. GitHub - erikwett/helpdesk-angular: Qlik Sense mashup example using AngularJS

So my suggestion would be to either integrate your existing Angular app into your mashup, or to build the mashup seperately, and iFrame it into your existing app.

3 Replies
Luminary
Luminary

Re: Integrating Qlik Sense into external Angular web app

Hi,

It sound as you haven't looked at the dev-hub and the mashup code examples. What your asking for is in there, except the hypercube part. The grip-mashup contains bookmarks and navigation.

Go to https://servername/dev-hub

You can use the hypercube builder to get a understanding of how to build the cube. Here's a guide:

https://help.qlik.com/en-US/sense-developer/3.1/Subsystems/Dev-Hub/Content/MashupEditor/mashup-edito...

Employee
Employee

Re: Integrating Qlik Sense into external Angular web app

Hey Alex,

The RequireJS file that you see loaded in all of the examples of using the Capabilities APIs includes more than RequireJS. There's the version of Angular in there that qlik.js depends on, jQuery and some jQuery plugins, etc. It would be difficult to load qlik.js without using that require.js file. 

Since the require.js file contains a version of angular, it will also be difficult to use it in an existing Angular application. You can build a mashup using the Capabilities API with Angular.js, however. GitHub - erikwett/helpdesk-angular: Qlik Sense mashup example using AngularJS

So my suggestion would be to either integrate your existing Angular app into your mashup, or to build the mashup seperately, and iFrame it into your existing app.

janarthanan_h
New Contributor

Re: Integrating Qlik Sense into external Angular web app

I had the exact same requirement too. I had a fairly large angular app (version 1.6.x) with custom D3 charts, jQuery (3.x) and a handful of other libraries that depend on jQuery.

With respect to Qlik Sense, I

* wanted to access qlik object info such as sheet names, object titles

* embed objects on the fly based on user interaction

* listen for selection events and manipulate an external D3 chart

Loading qlik's require.js starting conflicts with my existing libraries.

So I wrote a small library that will load qlik.js in an isolated way. You can take a look if you are interested.

GitHub - hrivks/ng-qlik-isolated: Angular wrapper for qlik-isolated.js

without Angular : GitHub - hrivks/qlik-isolated: Load Qlik Sense's qlik.js in a isolated non-conflicting way and embed... 

Community Browser