Enabling themes in visualization extensions

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

• 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

{
  "name":"MyVizExtension",
  "description":"Basic empty visualization template",
  "type":"visualization",
  "version":"1.0.0",
  "icon":"extension"
}

define( [ "qlik"
],
function ( qlik) {

  // Define the namespace used for styling 
  // Should be "object.[Extension name as defined in QEXT file]"
  var extensionNamespace = "object.MyVizExtension";

  function renderHtml( $element, qtheme ) {
    var html = "";

    // Get background color for the labels box from primary data color in current theme
    html += "<div style='background-color: " + qtheme.properties.dataColors.primaryColor + "; display: flex; align-items: center; height: 100%'>";

    // Get styling for the extension's label from current theme
    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 );
  }

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

} );