Qlik Community

Integration, Extension & APIs

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

Announcements
QlikWorld 2022, LIVE in Denver CO., May 16-19, 2022. REGISTER NOW TO RECEIVE EARLY BIRD PRICING
cancel
Showing results for 
Search instead for 
Did you mean: 
bcf
Contributor III
Contributor III

Use other frontend stacks in Qlik mashups

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

1 Solution

Accepted Solutions
ErikWetterberg

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

View solution in original post

6 Replies
ErikWetterberg

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

View solution in original post

Francis_Kabinoff
Employee
Employee

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.

bcf
Contributor III
Contributor III
Author

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
Employee
Employee

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
Partner
Partner

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
Contributor II
Contributor II

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.