Qlik Community

Ask a Question

Qlik Design Blog

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

Announcements
Support Cases coming to Qlik Community Oct. 4! Start chats, open cases, explore resources. Prep for the big move: READ DETAILS
Yianni_Ververis
Employee
Employee

banner-4.jpg

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.

Today, I will show you how to load a simple object and create a session barchart, in simple html and Angular 5

Simple HTML

  • In your HTML, add the following:

 

 

 

<head>
  <script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
  <div id="qdt1"></div>
</body>

 

 

 

  • In your Javascript code, add:

 

 

 

var qConfig = {
   "config": {
      "host": "your-sense-server.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}

var QdtComponent = new window.qdtComponents.default(qConfig.config, qConfig.connections);

var element = document.getElementById('qdt1');

QdtComponent.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);

 

 

 

And you are done.

Simple HTML template: GitHub - qlik-demo-team/qdt-html-template: A simple html template that uses qdt-components

Live Demo: Simple html with qdt-components

 

Angular 5

npm install --save qdt-components
  • Create new component by typing in the command line
ng generate component components/qdt-components --style=less
  • In your qdt-component.component.ts import the library and import or set the qConfig with the connection details

 

 

import { Component, OnInit, ElementRef, Input } from '@angular/core';
// import * as qConfig from '../../../qConfig.json';

import QdtComponents from 'qdt-components';

let qConfig = {
   "config": {
      "host": "sense-demo.qlik.com",
      "secure": true,
      "port": 443,
      "prefix": "/",
      "appId": "133dab5d-8f56-4d40-b3e0-a6b401391bde"
   },
   "connections": {
      "vizApi": true,
      "engineApi": false
   }
}

 

 

  • Replace the class with:

 

 

export class QdtComponentComponent implements OnInit {
   @Input() Component: Function;
   @Input() props: object;

   static QdtComponent = new QdtComponents(qConfig.config, qConfig.connections);

   constructor(private elementRef: ElementRef) { }

   ngOnInit() {
      QdtComponentComponent.QdtComponent.render(this.Component, this.props, this.elementRef.nativeElement);
   }
}

 

 

  • After this, you can start using it in any other component. In the HTML, add:

 

 

<qdt-component [Component]="'QdtViz'" [props]="{id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}"></qdt-component>

 

 

Angular Template: GitHub - qlik-demo-team/qdt-angular-template: An Angular 5 template that is using qdt-components for...

Live Demo Angular 5: https://webapps.qlik.com/qdt-components/angular5/index.html

Live Demo Angular 6: https://webapps.qlik.com/qdt-components/angular/index.html

 

React 16.3

Live Demo: https://webapps.qlik.com/qdt-components/react/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-react-template

 

Vue 2.5

Live Demo: https://webapps.qlik.com/qdt-components/vue/index.html

Git Repo: https://github.com/qlik-demo-team/qdt-vue-template

 

qdt-components

Branch: Qlik Branch

Github: GitHub - qlik-demo-team/qdt-components: React Components to be used with Angular2+ and React. Connec...

Npm: qdt-components

 

Yianni

37 Comments
rarpecalibrate
Contributor III
Contributor III

Hi @FG ,

I dont have any experience using react in a extension. I think you would need to package the file in a very specific way, and I dont know how to do that. I only know how to do standard structured extension using vanilla js or AngularJS. 

Ryan

 

 

0 Likes
791 Views
david_hg96
Partner
Partner

Hi! 

I'm facing a problem, I can not see icons correctly:

Selections bar:

1802.PNG

Accept / cancel selection:

1803.PNG

Console message:

1804.PNG

I have added the site where my app and locallhost is located, on the CORS exception list and White List but problem persist.

Please Help!

@Yianni_Ververis 

-DavidHG

0 Likes
741 Views
Yianni_Ververis
Employee
Employee

Are you using the library in an extension or in a mashup from dev-hub? 

you get a 404 error so maybe if you try and run

npm i -s qdt-lui

 

 

0 Likes
715 Views
andyjalexlive
Contributor III
Contributor III

Hi Yianni,

 

Good to see you in the Integration meetup the other day. Thanks for everything you are doing relating to QDT components.

 

I was wondering if QDT components can be used in conjunction with a connection to the Engine api so that the Engine data and the QDT components share the same session?

 

Thanks,
Andy

0 Likes
561 Views
Yianni_Ververis
Employee
Employee

Hello Andy and my apologies for not making it clear enough.

YES!

Most of the components are with the Enigma.js, Picasso.js and the Engine API and they share identity. Only the first two examples from the link below are from the Capability API. 

Here is a list of what i have shown, fell free to ping me in slack or email for more details

 

https://observablehq.com/@yianni-ververis

 

0 Likes
549 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 

509 Views
Nagesh_Bandaru
Contributor
Contributor

Hi @Yianni_Ververis ,

 Thank you so much for making this re-usable libs, which really save our time.

I am building Qlik Sense Mashup, i have copied the 'qdt-react-website-master' to my local and updated the below configuration, which works fine in localhost:8080 and qlik sense desktop. but it is not working when it is deployed to dev-hub cloud. 

I am getting below errors:

2021-02-02_16-51-33.jpg

 

My configuration looks below:

 
import QdtComponents from 'qdt-components';

const useUniqueSessionID = Math.random().toString(32).substr(2, 8);
const deployOptions = 'qlik';

const options = {
  config: {
    host: deployOptions === 'react' ? 'localhost' : window.location.hostname,
    secure: deployOptions === 'react' ? false : window.location.protocol === 'https:',
    port: deployOptions === 'react' ? 4848 : window.location.port,
    prefix: '',
    appId: '54ba6993-1558-42ab-9981-7ae205a30242', // Helpdesk
  },
  connections: {
    vizApi: true,
    engineApi: true,
    useUniqueSessionID,
  },
};

 

 

0 Likes
147 Views