Qlik Community

Qlik Design Blog

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

Employee
Employee

Qdt-components - latest additions

Qdt-components is a library that we've created to support the Demo Team's work.

In the past I talked about how we can use it with various frameworks, qdt-components - A Components Library that can be used in simple Html, Angular 5 and React‌ and as a Wordpress plugin, qdt-components - A Wordpress plugin.

I have also shared with you, some of the components with examples on how to use them

qdt-components - Horizontal Barchart by Picasso.js & Selection Toolbar and, Qdt-components & Picasso.js - More Charts!‌ (Custom Selection Toolbar, Picasso Horizontal/Vertical Barchart, Pie Chart, Scotterplot, Line Chart and Combo Chart)


Since then, we have added some more components. Below are the latest additions with their examples on how to use them in your websites. Here are the latest additions with v1.3.5

Enjoy

Yianni

7 Comments
aapurva09
Contributor
Hi Yianni, Thanks for the wonderful components! Could you please guide if we have Export to Excel feature in Table with Visualization API/Engine API? Thanks Apurva
0 Likes
323 Views
Employee
Employee
0 Likes
261 Views
Partner
Partner

Hi!,

How could I implement the 'identity' attribute?

 

0 Likes
129 Views
Employee
Employee

Pass in the config ```useUniqueSessionID```

 

https://github.com/qlik-demo-team/qdt-components/blob/master/src/QdtComponents.jsx#L34

 

const options = {
  config: {
    host: 'myhost.com',
    secure: true,
    port: 443,
    prefix: '/',
    appId: 'cccccc-ccccc-cccc-ccccc-cccccc',
  },
  connections: {
    vizApi: true,
    engineApi: true,
    useUniqueSessionID: 1234xcvbnh,
  },
};

const qdtComponents = new QdtComponents(options.config, options.connections);
120 Views
Partner
Partner

Thank you! It works now!

🤗

0 Likes
116 Views
Partner
Partner

Hi again!

I have a little problem in the visualization of a KPI using the default qdt-component call, in my case the tag is called 'app-qdt-comp' that is the selector name given by angular. I tried putting the height and width, putting only the 'id', etc but it seems the same or the kpi is not displayed.

Do you have and example of how to call a kpi by the id? I know that the other way is creating it giving the expression to calculate the kpi value but I would like to use this way.

e1.PNG

In this second picture I use iFrames to call other kpis, that is the hoped result.

e2.PNG

And.. a second question is how could I integrate a ideviomap element or a map, at time I use an iFrame to paste the sheet where the map is.

Thanks for your answers.
David HG

0 Likes
53 Views
Employee
Employee

You can import any object with id, here I modified the code to get a KPI

https://qdt-apps.qlik.com/qdt-components/react/#/embed-object-multi-app

 

Stay away from iFrames, too slow with too many connections.

Get the IDs of the actual map and the "type" ones like bubble etc. So you will need min of 2 ids to show up correctly

0 Likes
40 Views