We are excited to announce version 3 of qdt-components!
If you are not familiar with qdt-components here is a brief intro and I have several links at the end of this blog post for more details.
"qdt-components (Qlik Demo Team Components) is a library of components that we have developed in the demo team and that have been used in most of our mashups found in webapps.qlik.com and demos.qlik.com. It's a collection of filters, tables, barcharts, selection toolbars, or even simple getting/creating object methods from the Visualization Api. You do not have to worry about connection strings, loading Requirejs, jQuery etc. Everything is taken care for you! The library can be used in a simple html page by loading the qdt-components.js or in React and Angular2+ via npm."
https://community.qlik.com/t5/Qlik-Design-Blog/qdt-components-A-Components-Library-that-can-be-used-...
v3 is a faster and more modular edition of this library. There are breaking changes, like, before you had to initiate a new class every single time you wanted to use it and create a websocket connection. Now, you load the module that will handle your connection, qdtCapabilityApp for the Capability API or qdtEnigma for the Engine API and then the components you want to use like QdtViz to embed a Qlik Sense object. You pass the properties such as, "id" if you want to embed a single object by id, "properties" with an entire hypercube layout or just a partial one with only the dimensions and measures with QdtPicasso and the library will do the rest.
Here is an example of embedding a Qlik Sense object
const { qdtCapabilityApp, QdtViz } = QdtComponents;
const config1 = {
host: '...',
secure: true,
port: 443,
prefix: '',
appId: '...',
};
const capabilityApiAppPromise = qdtCapabilityApp(config1);
const app = await capabilityApiAppPromise;
QdtViz({
element,
app,
options: {
id: '...',
height: 400,
},
});
You can see it live here and even fork it
https://observablehq.com/@yianni-ververis/qdt-components-embed-single-object?collection=@yianni-verv...
Here is an example using the Engine API and Picasso.js
const { qdtEnigma, qdtCompose, QdtPicasso, useBarChartSettings } = QdtComponents;
const config = {
host: '...',
secure: true,
port: 443,
prefix: '',
appId: '...',
};
const engineApiAppPromise = qdtEnigma(config);
const app = await engineApiAppPromise;
qdtCompose({
element: chartElement,
component: QdtPicasso,
app,
options: {
settings: useBarChartSettings({
orientation: 'horizontal',
}),
height: 400,
},
properties: {
qHyperCubeDef: {
qDimensions: [
{ qDef: { qFieldDefs: ['Case Owner Group'] }, qNullSuppression: true },
],
qMeasures: [
{ qDef: { qDef: 'Avg([Case Duration Time])', autoSort: false }, qSortBy: { qSortByNumeric: -1 } },
],
qInterColumnSortOrder: [1, 0],
},
}
}
https://observablehq.com/@yianni-ververis/qdt-components-horizontal-barchart?collection=@yianni-verv...
If you are using Qlik Sense Saas, make sure you add the webIntegrationId in your config.
For a full list of what is implemented yet, checkout the collection observablehq.com where you can fork and edit to much your servers, apps, charts etc
https://observablehq.com/collection/@yianni-ververis/qdt-components
/Yianni
