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:
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.
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.
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.