Qdt-components 2020 Update

[Colin_McNamara]

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

Blog Posts: qdt-components - A Components Library that can be used in simple Html, Angular 5 and React

Documentation

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

Documentation

QdtFilter

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

Visualization API: no

Engine API: yes

Documentation

QdtSelectionToolbar

This component displays a toolbar with the current app selections.

Visualization API: no

Engine API: yes

Documentation

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

Blog Posts: qdt-components - Horizontal Barchart by Picasso.js & Selection Toolbar, Qdt-components & Picasso.js - More Charts!, Qdt-components - custom charts with Qlik's Open Source picasso.js, Creating custom charts with qdt-components,  

Documentation

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

Documentation

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

Documentation

QdtTable

Build a sortable table of your data using QdtTable.

Visualization API: no

Engine API: yes

Documentation

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!

[david_hg96]

Hi everyone!

I have a implementation of Qdt-Components (2.5.5) using Angular 7 and works perfect, but Qlik Sense was updated to September 2020 and Qdt objects does not work propertly, for example:

 When clic on the 'Location' field does not appear the dropdown menu and all their options.

I know that the lastest version of Qdt-components is >3.0 but their implementation works in Angular 10, and I can not update my Angular version.

Can anyone help me?

Thanks a lot

@Yianni_Ververis 

[Yianni_Ververis]

It should not have any issues on Angular 7

[david_hg96]

Yianni, thanks for your fast answer, I updated the qdt-components to 3.0.2 and when I try to serve or build on angular I have the following:

Do you have and example of implementation (qdt.components 3.0.2) on Angular 7? 

Regards!

UPDATE: 

I reviewed the error using Qdt-Components 2.5.5 and I had been loading the require.js file manually (as a solution for another problem) something like:

<script src="domain..........resources/assets/external/requirejs/require.js></script> in the index.html file, so it replaces some functions and that was the reason why qdt-objects did not working correctly, I removed that code line and now it works perfect again.

Regards!

🙂 

[jeffersonshibuya]

Good day @Yianni_Ververis 

I'm trying to use qdt-components with QLik Cloud, but the WebSocket connection is falling. Could you please let me know if there's a way to make it work with Qlik cloud?

Qdt-components: 3.0.2
config:

host: "my-host.us.qlikcloud.com",

appId: "12340000....",

webIntegrationId: '123AbC...',

Thanks

[fabdulazeez]

Hi @Yianni_Ververis ,

I am not able to see any updates in the repository from 2 years. Whether using Qdt-components for connecting to Qlik Sense and displaying visualizations in our internal application a recommended approach.