Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

Almost two years ago, in February of 2018, the Qlik Demo Team (Qdt) publicly released qdt-components (GitHub, npm). We originally built Qdt-components as an internal library designed to help us create demos to showcase Qlik Sense Enterprise. We opened up the library to help others use the new Qlik APIs and create interesting mashups with their data. Since that initial release, we've written over a dozen blog posts to the Qlik Community Design Blog detailing how to use the various Qlik Sense and Picasso.js charts available via Qdt-components. In 2019, we hit 50 stars on GitHub, putting us in the top 1% of all open-source projects on GitHub. We've recently made some updates to our documentation and we wanted to re-introduce Qdt-components, show off our new logo, and highlight this powerful library's practical uses and recently added features.

Qdt-components is designed to be a library-agnostic method of connecting to Qlik Sense and displaying visualizations. Whether that is bringing in entire Qlik Sense charts and objects or building your own visualizations, Qdt-components is an easy-to-setup wrapper that can be used in a number of different ways. We've written in the past on this blog about the pros and cons of using the various APIs to connect to Qlik Sense (Getting Started with Qlik APIs, Integrating Qlik Sense into your Web App), an area that developers can easily get tripped up on. With Qdt-components, the question of whether to use the Capability API or incorporating Enigma.js has already been handled. You just need to answer one simple question: do I want to use charts and objects directly from my Qlik Sense app? If so, then you want access to the Visualization API; otherwise, the Engine API is sufficient.

Bringing in Qlik objects with the Visualization API means that it'll have the appearance you'd see in a Qlik Sense app. If you don't need to customize the look of your objects for your web app, then you can just build the charts / toolbars / etc. in Qlik Sense and bring them into your mashup using their object id's. If you want to skip all that, you can use our pre-built components by simply specifying the dimensions, measures, columns, etc. you need. Here are the available components as of 01/01/2020, the appropriate Qlik API required for the configuration object, and links to documentation to get you started:

QdtViz

These are used to bring in Qlik Sense objects exactly as they are in Qlik Sense. QdtViz components require the Visualization API (vizApi: true) and are one of the easiest to implement; you just need the object's id. 

Visualization API: yes
Engine API: no

 

QdtCurrentSelections

Like QdtViz, QdtCurrentSelections requires the Visualization API and appears as it is from Qlik Sense. It can be used to show your user's current selections in the familiar, Qlik-styling. The only property you need to specify is its height.

Visualization API: yes
Engine API: no

 

QdtFilter

Using the Engine API, QdtFilter is a simple dropdown based on a column from your data.

Visualization API: no
Engine API: yes

 

QdtSelectionToolbar

This component displays a toolbar with the current app selections.

Visualization API: no
Engine API: yes

 

QdtPicasso

The QdtPicasso component actually comprises several Picasso.js charts; fifteen (15) as of January 10, 2020. Picasso.js is a charting library streamlined for building interactive visualizations for the Qlik product suites. With Qdt-components, connecting to and using Picasso.js is super easy because it's already built in...no need to import Picasso.js yourself.

Visualization API: no
Engine API: yes

 

QdtSearch

The QdtSearch component is a simple text input field that can be used to search a dimension of your data.

Visualization API: no
Engine API: yes

 

QdtMapBox

We've recently added our MapBox integration with the QdtMapBox component. You'll just need a MapBox API key and desired styling to create a map showcasing your data.

Visualization API: no
Engine API: yes

 

QdtTable

Build a sortable table of your data using QdtTable.

Visualization API: no
Engine API: yes

 

Getting started with Qdt-components is easy but we've created several templates to make it even easier:

And lastly, do you have an idea for a feature, bug fix, or chart to add? You can open an issue on GitHub or contribute!