Extending with custom visualization objects

Introduction

Qlik Sense custom objects, that is visualization extensions and widgets, enable new ways of visualizing data and enhance user input and interaction.

The visualization extensions are regular Qlik Sense objects that you have added your own rendering code to. They can be charts of different types, or other items like tables or filter panes. In QlikView, this type of extensions are referred to as Object Extensions.

Widgets are similar to visualization extensions but they do not use JavaScript or require JavaScript programming.

Widgets

Widgets are similar to visualization extensions, but widgets do not use JavaScript or require JavaScript programming. This means you cannot create objects that require advanced calculations, or which use external libraries or files. Widgets are best suited for creating simple visualizations, such as KPI objects and tables. Widgets can also be used to add simple functionality to sheets, such as buttons to clear selections or take snapshots, or to add other visual elements.

Widgets are created using HTML and CSS technologies and if developed properly, the handling of them is identical to standard visualizations. They can be:

  • Added to a sheet using drag and drop
  • Configured to use the same property panel as standard Qlik Sense visualizations, meaning that you can create visualization extensions on top of the data of a Qlik Sense app
  • Resized, copied, pasted and positioned just like any other Qlik Sense visualization
  • Added to and used in data storytelling
  • Responsive and therefore work properly on any device

Build custom objects: Widgets

Visualization extensions

Visualization extensions can be integrated with other systems and visual libraries, new selection objects and productivity components can be added, and it can all be done using open standards such as HTML5, JavaScript and CSS.

They use the same set of technologies as standard Qlik Sense visualizations, and if developed properly, the handling of them is identical to standard visualizations. They can be:

  • Added to a sheet using drag and drop
  • Configured to use the same property panel as standard Qlik Sense visualizations, meaning that you can create visualization extensions on top of the data of a Qlik Sense app
  • Resized, copied, pasted and positioned just like any other Qlik Sense visualization
  • Added to and used in data storytelling
  • Responsive and therefore work properly on any device

The Qlik associative engine also treats all visualizations the same and they all use the same interface which is documented in the Qlik Engine JSON API documentation.

Build custom objects: Visualization extensions

Relevant APIs

Qlik Sense provides a number of JavaScript APIs for creating visualization extensions:

  • Extension API
  • Backend API
  • Capability APIs (parts)

In addition to the above, you can also use the Qlik Engine JSON API, which is a WebSocket protocol that uses JSON to pass information between the Qlik associative engine and the clients.

You can also use any external library of choice to create visualization extensions that suit your needs.

Build your first custom object with Dev Hub

Dev Hub is a development toolbox that helps you getting started building solutions with Qlik Sense as well as understanding the APIs.

Note: There is no separate installation package or additional license necessary for using the capabilities of Dev Hub. The editors, templates and code examples are provided with your default installation of Qlik Sense.

Dev Hub

Extension editor

The Extension editor is an editor for JavaScript files and QEXT files. It can be used to create new visualization extensions as to edit existing ones. You can use the templates provided with Qlik Sense to get started building your first custom visualization extensions.

Your Qlik Sense installation comes with a number of visualization extension examples which provide guidance for how to build your own visualization extensions.

Extension editor

Widget editor

The Widget editor assists you getting started creating widgets to enhance your visualizations. Widgets are created and edited using just HTML and CSS alone, no JavaScript or knowledge of other programming languages is required.

Widget editor