Use other frontend stacks in Qlik mashups

[Anonymous]

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

[ErikWetterberg · Accepted solution]

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

[Francis_Kabinoff]

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.

[Anonymous]

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.

[Francis_Kabinoff]

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);
        });
    });
});

[paoloderegibus]

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

[09999]

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.