Skip to main content

Design

The Design blog is all about product and Qlik solutions, such as scripting, data modeling, visual design, extensions, best practices, and more!

Yianni_Ververis
Employee
Employee

banner.png

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

 

 

2 Comments
saurabh_handa
Contributor III
Contributor III

Thanks for sharing the information. Do you have any date for version 3.0 GA?

0 Likes
765 Views
gballester
Creator
Creator

Hello, we are working on an application made in react and we have already set up the bookmark management, we are lacking to be able to set up unions or intersections of bookmarks. Does anyone know how to access the "set analysis" associated with the bookmark from react

0 Likes
687 Views