1 Reply Latest reply: Aug 24, 2017 10:36 AM by Mathias Schindler RSS

    Chaning Qlik Sense Mashup's theme?

    Daniel Hernández Rino

      Hello,

       

      We need to change the default chart colors to make them fit to our client colors, but we cant seem to find help on how to implement it on a mashup.

       

      Has anyone ever done this? For example, setting Helpdesk's mashup theme to Highvis

        • Re: Chaning Qlik Sense Mashup's theme?
          Mathias Schindler

          Hello Daniel,

           

          it may be too late for you but maybe this solution will help other people:

           

          Create your custom theme (seeMore Qlik Sense Themes (updated with 3.2)

          Create your mashup using dev-hub or your favorite editor

           

          Mashup on Qlik Sense Server

          Apply your custom theme by using the following code:

          require( ["js/qlik"], function ( qlik ) {
               qlik.theme.apply('highvis2').then(function(result) {
                    if(result)
                        console.log('theme applied!');
                    else
                        console.warn('could not apply theme!');
               });
          
               // just replace those with your app / object ids
               app = qlik.openApp('fbfd779f-3cff-4837-b3bf-7a0604e54a73', config);
               app.getObject('QV01','gXZJeg');
          });
          

           

          Unfortunately, this does not work when your mashup resides on an external web server because in a cross-site scenario, RequireJS will append a ".js" to the theme.json which will cause the request to fail (Troubleshooting: mashups ‒ Qlik Sense - "Extension does not work in a mashup on an external web server")

           

          Hence you need to copy your theme.json and rename it to theme.json.js (RequireJS will still fail because it expects an AMD module and not a json file)

          Open the theme.json.js in a text editor, escape every " with a \" and minify the result so you have a single line of text.

          Then just apply the "Possible Action" from the Troubleshooting Mashups link above:

          define([], function () { return "PLACE YOUR ESCAPED AND MINFIED JSON HERE";});

           

          After saving the theme.json.js file you can use the theme.apply method in your mashup and your custom theme will be applied .

           

          I did those steps in the June 2017 Release, hence I can not guarantee that this will work for earlier versions of Qlik Sense (if the qlik.theme.apply method is available it should though).

           

          Best of luck,

          Mathias