Enabling themes in visualization extensions

In this example we will create a visualization extension that supports usage of custom themes.

Note: The easiest way to build your visualization extension is to use Qlik Sense Desktop. This section assumes that Qlik Sense Desktop is being used.
  • Create the container

    Create a folder that will contain your assets. The folder should be created in the following location: C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\.

    C:\Users\[UserName]\Documents\Qlik\Sense\Extensions\MyVizExtension

  • Create the QEXT file

    Create a QEXT file in the folder we just created and name it MyVizExtension.qext.

    It should contain the following information:

    {
      "name":"MyVizExtension",
      "description":"Basic empty visualization template",
      "type":"visualization",
      "version":"1.0.0",
      "icon":"extension"
    }
  • Create the main script file

    Create the main script file and place in the same folder as the QEXT file. Name it MyVizExtension.js.

  • Define namespace

    In the script file, define the namespace to be used for the styling. It should be created using the following syntax:

    "object.[Extension name as defined in the QEXT file]".

    var extensionNamespace = "object.MyVizExtension";
  • Apply background color for labels

    Create a renderHTML function and get the styling of the background color for the labels from the primary data color in the current theme, that is the theme currently loaded for the app where the visualization extension is being used.

    function renderHtml( $element, qtheme ) {
      var html = "";
    
      html += "<div style='background-color: " + qtheme.properties.dataColors.primaryColor + "; display: flex; align-items: center; height: 100%'>";
    }
  • Apply font color and font size for labels

    Get the styling of the of the label's font color and font size from the current theme.

    function renderHtml( $element, qtheme ) {
      var html = "";
    
      html += "<div style='background-color: " + qtheme.properties.dataColors.primaryColor + "; display: flex; align-items: center; height: 100%'>";
      
      html += "<div style='flex: 1 1 auto; text-align: center;";
      html += " color: " + qtheme.getStyle( extensionNamespace, "label.name", "color" ) + ";";
      html += " font-size: " + qtheme.getStyle( extensionNamespace, "label.name", "fontSize" ) + ";'>";
      html += "My Viz Extension</div>";
      
      html += "</div>";				
      $element.html( html );
    }
  • Render the visualization extension

    In a return statement, enable snapshots and export.

    return {
      support : {
        snapshot: true,
        export: true,
        exportData : false
      }
    };

    Then define the paint function.

    return {
      support : {
        snapshot: true,
        export: true,
        exportData : false
      },
      paint: function ($element) {
        var app = qlik.currApp(this);
    
        app.theme.getApplied().then( function( qtheme ){
          renderHtml( $element, qtheme );
    
          //needed for export
          return qlik.Promise.resolve();
        });
      }
    };
  • Style the extension

    You can style your extension just like any other native Qlik Sense object. This is done in the JSON file of your custom theme.

    "object": { "MyVizExtension": { "backgroundColor": "#eee", "label": { "name": { "color": "#fff", "fontSize": "50px" } } } }

Source code

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?