In the previous chapter, we discussed a recipe to develop a visualization extension in Qlik Sense by writing the code manually in the .js
and .qext
files. One of the easier methods to develop extension visualization in Qlik Sense is using Extension editor in Qlik Dev Hub.
A Qlik Dev Hub is an integrated development toolbox used for building visualizations and mashup websites. It does not come with a separate installation package, but the editor and the API libraries are provided with Qlik Sense Desktop.
The previous recipe has explained all the basics of the Dev Hub. This recipe will introduce the user to the process of building a basic chart extension using Extension editor in Qlik Dev Hub. The extension workbench supports the .js
, .qext
, .css
, and .html
formats.
For the purpose of this recipe,we will make use of an inline data load which gives the sales information for four countries:
QS_DevHub_Extensions
.Sales: LOAD * INLINE [ Country, Sales USA, 1000 UK, 2000 France, 3000 Germany, 4000 ];
http://localhost:4848/dev-hub
QlikDevHub_Extension
..qext
, and other related files for the extension. If we want to get added functionalities in the extension, we can modify the JavaScript code here as per requirements.QlikDevHub_Extension.qext
tab as follows:"description": "Qlik Sense extension using the Qlik Dev Hub", "author": "<User Name>"
QlikDevHub_Extension.js
tab contains the JavaScript required for rendering the visualization. One can edit this tab if required to do so.QS_DevHub_Extensions
application we created in step 1 of the Getting ready section in Qlik Sense Desktop.QlikDevHub_Extension
extension object is now available in the Assets panel on the left. Drag the extension onto the sheet.Sum (Sales)
Sales by Country
.The Qlik Sense Extension editor provides JavaScript APIs, which consist of a number of methods and properties to build the custom visualizations. The editor autogenerates the mandatory files required for the extension to work.
If we want to define custom styles for our visualization, we can do so by using one or more CSS files. The content for the CSS files first need to be loaded to the document's header or alternatively added as a link to a style sheet to the document's header. Styles can also be defined using the RequireJS CSS plugin.
Additional files such as .css
, .js
, and .html
can be added using the button located at the top-right hand corner of the Extension editor workspace: