Qlik Community

Qlik Design Blog

All about product and Qlik solutions: scripting, data modeling, visual design, extensions, best practices, etc.

Employee
Employee

qdt-components - React template

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


11 Comments
alan_grn
Contributor

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
107 Views
Employee
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
107 Views
alan_grn
Contributor

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
107 Views
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
107 Views
alan_grn
Contributor

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
107 Views
alan_grn
Contributor

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

0 Likes
107 Views
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
107 Views
alan_grn
Contributor

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
107 Views
Employee
Employee
0 Likes
107 Views
alan_grn
Contributor

Brilliant. Thanks it works now.

0 Likes
107 Views
alan_grn
Contributor

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
107 Views