Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
Francis_Kabinoff
Former Employee
Former Employee

banner_react.jpg

On the demo team we end up working with both the Viz API to create and embed native Qlik Sense charts in apps, as well as creating custom components powered by the Qlik Engine using enigma.js, and we do this in Angular, React, and plain html, as we try to demo all of the ways that Qlik can be used. So after my last blog post (Starter project for developing QAP-powered apps with React and enigma.js) we had an idea on the demo team: let's try to unify all of our different custom components and templates. So we've been hard at work accomplishing that.

 

You may have seen Yianni‌'s last blog post, qdt-components - A Components Library that can be used in simple Html, Angular 5 and React, introducing this effort. The goal is to have the qdt-components library include custom components powered by Qlik Engine, as well as a way to create and embed native Qlik Sense charts. Right now, the qdt-components library contains a few components, but we're not totally ready to start talking about all of them yet, so we're just sticking to the component that allows you to create and embed native Qlik Sense charts by interfacing with the Viz API.

 

The big addition since Yianni's post is that we've added a React template, so now we have an Angular 5 template, a plain html template, and a React template, all which load the qdt-components, which is pretty cool. This means that the components only need to be built once, but can be used in a project with almost any frontend stack. I say "almost" because in order to use the component that interfaces with the Viz API there's no getting around loading Angular 1.5 and RequireJS into the global namespace, which means they still have the chance to create conflicts. But you can choose not to use the component that interfaces with the Viz API if you don't have a need for native Qlik charts, and it will avoid loading all of the Capability API stuff, but if you choose to use it, you don't have to worry about writing any of the boilerplate you usually do when connecting to the Capability API.

 

Documentation, examples, and custom components are coming (and oh yea, we plan on using https://picassojs.com/), but that's the update for now. You can check out the qdt-components library and the templates here - Qlik Demo Team · GitHub‌. And demos of each of the 3 templates below

 

Angular 5 with qdt-components

React with qdt-components

Simple html with qdt-components

 

15 Comments
alan_grn
Creator II
Creator II

I have started creating a mashup using qdt-compoents. I have used the source code from GitHub and added my own component which is a Fusion Chart.

I can get the object to render but I get an enigma JSON error when trying to make a selection. Any idea why and how to fix? Other Qlik Objects like the qdtFilter work fine and I can make selections suing them. I have used FusionCharts in another Mashup based on the Qlik-react-starter and that works fine.

0 Likes
3,709 Views
08748190
Contributor II
Contributor II

How can i get the id of the graphics

 

 

0 Likes
2,917 Views
SyedIbrahim_Cool
Contributor
Contributor

I want to integrate qliksense reports in Angular web application. Iam geeting the following error when iam using qdtcomponent. Please share your views on this.

ERR_CERT_AUTHORITY_INVALID

I have installed client certificate in my pc to access the qliksense reports.  Guide me how to pass certificate details using qdtcomponent. If its not possible to pass certificate, how can i skip certificate authentication in qliksense server

 

 

 

0 Likes
1,680 Views
SyedIbrahim_Cool
Contributor
Contributor

Now i am able to get ticket from QlikSense server using asp.net api. Could you please suggest how to pass ticket to access QlikSense Report using QdtComponents in Angular

0 Likes
1,653 Views
gballester
Creator
Creator

Hello, we are working on an application made in react and we have already set up the bookmark management, we are lacking to be able to set up unions or intersections of bookmarks.

Does anyone know how to access the set analysis  associated with the bookmark from react?

411 Views