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" } } } }