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 Blogdetailing 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
Blog Posts:qdt-components - A Components Library that can be used in simple Html, Angular 5 and React
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.jsis 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
Blog Posts: ,,Qdt-components - custom charts with Qlik's Open Source picasso.js,Creating custom charts with qdt-components,
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
Blog Posts:Creating a Geo Map with qdt-components and MapBox
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:
- HTML / Vanilla JavaScript Template,HTML Documentation, Demo
- React Template,React Documentation, Demo
- Angular Template,Angular Documentation, Demo
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!
