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

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

15 Comments
aapurva09
Creator
Creator
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
2,447 Views
Yianni_Ververis
Employee
Employee
0 Likes
2,385 Views
david_hg96
Partner - Contributor III
Partner - Contributor III

Hi!,

How could I implement the 'identity' attribute?

 

0 Likes
2,253 Views
Yianni_Ververis
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);
2,244 Views
david_hg96
Partner - Contributor III
Partner - Contributor III

Thank you! It works now!

🤗

0 Likes
2,240 Views
david_hg96
Partner - Contributor III
Partner - Contributor III

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
2,177 Views
Yianni_Ververis
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
1,890 Views
Brandon
Contributor
Contributor

Is there a way to create a bookmark with qdt-components? If not, is there a way to access the Vizualization API directly using qdt-components in a React app?

0 Likes
1,795 Views
jeffersonshibuya
Partner - Contributor
Partner - Contributor

Hi

Is there a way to remove selection from QdtPicasso?

Thanks

961 Views
Yianni_Ververis
Employee
Employee

qdt-components 3.0 beta is out. Check out the examples at
https://observablehq.com/collection/@yianni-ververis/qdt-components 

0 Likes
882 Views