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
andyjalexlive
Contributor III
Contributor III

Hi Yianni, 

I ran into trouble with the react qdt template when connecting to a local host app. The error i get is 

qdt-components.js:27 WebSocket connection to 'ws://localhost:4848//app/__________.qvf/identity/WdFNRIOuWucvKWGO' failed: Connection closed before receiving a handshake response

 

This was after running npm run dev. Any idea why i'm getting this? 

 

Thanks 

Andy

0 Likes
4,307 Views
andyjalexlive
Contributor III
Contributor III

Hello Yianni, 

Hope you are well. I'm developing a mashup using Angular 6 and the qdt components. I'm wondering what's the best way to set and get variables from the Qlik sense app when i'm using the qdt components and not not the Capabilities api? Or can these be used together?

 

Thanks

Andy

0 Likes
2,966 Views
andyjalexlive
Contributor III
Contributor III

Hi, 

So i've tried to connect the Angular template to my local version of the Helpdesk Management.qvf app using the following settings but i get the below error. Does any one know what i'm doing wrong?

const qConfig = {
"config": {
"host": "localhost",
"secure": true,
"port": 4848,
"prefix": "/",
"appId": "Helpdesk Management.qvf"
},
"connections": {
"vizApi": true,
"engineApi": true
}
}

 

error: 

 

qdt-components.js:27 WebSocket connection to 'wss://localhost:4848//app/Helpdesk%20Management.qvf/identity/AbluFJdmDDdESYMk' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED

Thanks 


Andy

 

0 Likes
2,893 Views
andyjalexlive
Contributor III
Contributor III

So i figured it out for anyone else who has the above error. I just had to set secure to false and remove the prefix. The config settings now look like this:

const qConfig = {
"config": {
"host": "localhost",
"secure": false,
"port": 4848,
"prefix": "",
"appId": "Helpdesk Management.qvf"
},
"connections": {
"vizApi": true,
"engineApi": true
}
}

0 Likes
2,887 Views
david_hg96
Partner
Partner

Hi  !

I am developing an Angular mashup using your QDT-Components library, It is awesome. But I have a problem using the Global Selection Bar, the button "Selections Tool" 3.PNG, when is clicked it opens a large modal that used the 100% - 38px of the screen height. My selections bar is not at the top of the page, is in the middle so, if user clicks that button, it covers all the page and there is no way to close the modal (Only recharging the page). So I have experimented with changing the Stylesheet in the Google Chrome Developer Tools and works, but when I overwrite the styles in my application, It does not work. Do you have an idea of how to overwrite the CSS?

 

before click buttonbefore click button

 

after clickafter click

 

0 Likes
2,151 Views
fabdulazeez
Partner
Partner

How can we set variable as i have limitations calling Api as my application i can't include require. How can we call setstring for varibales

0 Likes
1,534 Views
FG
Partner
Partner

Hi,
I'm trying to use "qdt-components" with react in local for development.
i cloned qdt-react-websites and i started to modify connection with qlik engine in components/Qdtapp.js to set local parameters: 

const options = {
  config: {
    host: 'localhost',
    secure: true,
    port: 4848,
    prefix: '',
    appId: 'path_to_file/filename.qvf',
  },
  connections: {
    vizApi: true,
    engineApi: true,
  },
};
 
when the app runs, gives me this error (in browser console): 
WebSocket connection to 'wss://localhost:4848/app/path_to_file/filename.qvf/identity/vCeVkZeGedmjjNns' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
 
how can i set connection parameters in a correct way?
Thanks, 
Fede
0 Likes
1,467 Views
fabdulazeez
Partner
Partner

I think you need to provide the Appname not full path.

Also see previous comment

I just had to set secure to false and remove the prefix. 

0 Likes
1,445 Views
rarpecalibrate
Contributor III
Contributor III

Hi @FG ,

The appId needs to be only the name of the .qvf app, suggested by @fabdulazeez. On a side note, the prefix is used for apps on the server when using a virtual proxy eg. Virtual proxy name with hdr would need a value of "/hdr". In most cases you can leave it empty. I would also leave secure as false for now.

Ryan Arpe

0 Likes
1,430 Views
FG
Partner
Partner

Hi @rarpecalibrate and @fabdulazeez , thanks for the answers, it works!!! 

I've another!
I'm trying to deploy my react app in Qlik extensions. So in my app I ran "npm run build" (webpack), and I moved build folder into "documents/qlik/.../extensions" folder, then i added required files by Qlik (build.qext and build.wbl).
when I open the app it doesn't load the js script file generated by "npm run build" (with no error in console!), and only displays html content. 
following this guide I set "homepage": http://localhost:4848/extensions/build but it doesn't work!

Have anyone ever deployed a react app into Qlik Extensions? which are the steps to do?

Thanks a lot!!!!!

Fede

0 Likes
1,379 Views