topic Re: Use other frontend stacks in Qlik mashups in Integration, Extension & APIs

Use other frontend stacks in Qlik mashups

Anonymous — Wed, 17 May 2017 10:24:20 GMT

Hello community,

We have developed quite a few mashups using and Qlik based web portals/services and so far everything has worked quite well.

However, something we are not so satisfied with is that Qlik kind of imposes a technology stack on every project; namely requirejs and Angular 1.x.

But what if we wanted to start a project that used Redux+Browserify or Angular2+ES6 imports? Does the mashups API offer any way to escape from requirejs and Angular?

Regards,

David

Re: Use other frontend stacks in Qlik mashups

ErikWetterberg — Wed, 17 May 2017 11:18:38 GMT

Hi David,

The mashup API (or Capabilities API, as its called nowdays) includes big parts of the client, so requirejs and angular 1 are part of it. If you want to avoid that you can use enigma instead. That will give you a lot more freedom, but also mean you have to implement pretty much everything (including visualizations etc) yourselves. You might find some examples to help you on Qlik Branch.

Hope this helps

Erik Wetterberg

Re: Use other frontend stacks in Qlik mashups

Francis_Kabinoff — Wed, 17 May 2017 13:14:22 GMT

You can also use Angular 2, ES6 modules, webpack, etc, with the Capability APIs. You'll still have to load them, so Angular 1 and require.js will still be loaded, but it can be done.

Re: Use other frontend stacks in Qlik mashups

Anonymous — Wed, 17 May 2017 13:22:32 GMT

Maybe I am doing something wrong but I think it is not that simple.

For starters, in both Browserify and ES6, require is a reserved word, and so is in require.js.

I did try once using the global window.requirejs instead of window.require to access qlik's requirejs but I remember it didn't quite work.

Re: Use other frontend stacks in Qlik mashups

Francis_Kabinoff — Wed, 17 May 2017 13:35:16 GMT

So I can't speak for Browserify specifically because I haven't tried it, but I know this works with webpack. I just load the qlik require file before my own bundle, and then use a module that looks like below.

let prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
let config = {
  host: window.location.hostname,
  prefix: prefix,
  port: window.location.port,
  isSecure: window.location.protocol === "https:"
};

let appId = 'Helpdesk Management.qvf';

window.require.config({
  baseUrl: (config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "" ) + config.prefix + "resources"
});

export default new Promise((resolve) => {
    window.require( ["js/qlik"], function ( qlik ) {
        let app = qlik.openApp(appId, config);
        app.model.waitForOpen.promise.then(() => {
            resolve(app);
        });
    });
});

Re: Use other frontend stacks in Qlik mashups

paoloderegibus — Fri, 01 Dec 2017 14:36:40 GMT

Hi Francis,

thanks for sharing this code.

I am trying to integrate it in an app, but I am struggling.

could you please let us know how this code can fit into an angular 2 app?

thank you very much

Re: Use other frontend stacks in Qlik mashups

09999 — Sun, 06 Jan 2019 21:27:17 GMT

Hey I am also looking code/ sample application that would demonstrate how qlik capabilities api and angular 2 (4 or 6) could be integrated together ? Will you be able to provide such code?

Thanks for the help in advance.