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 using the React-website-starter.

I can connect to the server and bring back objects on the Embedded Objects component and the Create Session objects component.

I am trying to use the Picasso components (in this case the Pie Chart) but the objects do not seem to appear. React-Dev_tools shows that qMatrix is getting populated so it looks like it is bringing back data. I think the object might be rendered with a height of 0px. What do I need o do to get the object to be displayed?

0 Likes
4,684 Views
Francis_Kabinoff
Former Employee
Former Employee

QdtPicasso has a default height of 100%, so, you can either control the height by supplying it's parent element with a specified height, just like Qlik Sense charts work, or you can override the default height of 100% and pass a height prop.

0 Likes
4,684 Views
alan_grn
Creator II
Creator II

Thanks Francis. So do I need to adjust any of the height settings in the application?

The only change that I have made to the pie-chart component in the template is on the measures and dimension which i can see are working as qMatrix is returning values.

0 Likes
4,684 Views
Yianni_Ververis
Employee
Employee

Make sure in your props you set outerHeight: 300px or whatever is your desired height

Also, what version are you using?

Here is the pie chart with the latest version of qdt-components

Simple html with qdt-components

Pie labels are coming up

0 Likes
4,684 Views
alan_grn
Creator II
Creator II

HI Yianni

Thanks for your response. I am using Qlik Sense Desktop February 2018..

The package.json has the following values:

"name": "qlik-react-starter",

  "version": "1.0.0",

I am connecting to the Executive Dashboard and my props are as below.

type: 'pie', cols: ['Account', '=Num(sum(ExpenseActual), \'##\')'], height: '300px',

If I change outerHeight via the React dev tools. the object height increases but nothing is displayed.picasso-piechart.PNG

0 Likes
4,684 Views
alan_grn
Creator II
Creator II

HI Any thoughts on this? Please let me know if you need any further details.

0 Likes
4,684 Views
Yianni_Ververis
Employee
Employee

yeah hacking it via the dev tools is not going to force to redraw

You need to specify the outerHeight in the props

0 Likes
3,899 Views
alan_grn
Creator II
Creator II

Just tried adding outerheight in Props. Object is resized but still renders a blank / object. Looks like ti is getting data but is not rendering.

0 Likes
3,899 Views
Yianni_Ververis
Employee
Employee
0 Likes
3,899 Views
alan_grn
Creator II
Creator II

Brilliant. Thanks it works now.

0 Likes
3,899 Views