4 Replies Latest reply: May 17, 2017 9:36 AM by Francis Kabinoff RSS

    Use other frontend stacks in Qlik mashups

    David Farache

      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
          Erik Wetterberg

          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

            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
                David Farache

                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

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