Qlik Community

Qlik Design Blog

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

Employee
Employee

qdt-components - A Components Library that can be used in simple Html, Angular 5 and React

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

<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);

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

  • Install the package

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>

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

25 Comments
Partner
Partner

Looks great! Can't wait to test out React components.

0 Likes
2,713 Views
thpessato
New Contributor III

Hello Yianni! This looks great!

I just imported this JavaScript file and noted that it puts bootstrap's CSS with a <style> tag, overriding almost all my CSS classes and styles.

Is Bootstrap a requirement to use the qdt-components? Or do I have an option to not load it?


Thanks!

0 Likes
2,713 Views
Employee
Employee

Hello Thomas,

I am really glad you tried it out. We are in the process of removing bootstrap.

1. Try to load your css after initializing the component

2. Bootstrap is used only in the objects that are using hte Engine API and not the Visualization API. So, if you only wand to display Qli kSense objects with their id, set the engineApi to false in your config

Let me know how any of these work out for you

Yianni

2,713 Views
thpessato
New Contributor III

Hey Yianni, thanks for the tip!

I think that loading my CSS after the component's initialization isn't really an option, since this JS file has 1.5mb... It would be painful for the user experience, if on slow connections...

I tried with engineApi set to false but it still applies all CSS styles in my page, since I'm using default class names (e.g navbar).

As you suggested in 2., if I set to engineApi to false, it should not load Bootstrap CSS, or did I misunderstood?

Thanks for your attention

0 Likes
2,713 Views
Employee
Employee

Hmmm maybe its not the bootstrap, maybe its /resources/autogenerated/qlik-styles.css?

We will definitely work on removing bootstrap

Yianni

2,713 Views
thpessato
New Contributor III

Well, I have this line on my HTML:

<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">

But this never gave me any issues, actually

I will keep waiting for that!

Keep up the good work!

0 Likes
2,713 Views
bela2_szalontai
New Contributor II

Hello Yianni!

Thnx for the initiation.

My question is that how the Authentication will work in an Angular2+ environment to access Qlik sense apps and sheets protected by e.g. SAML or JWT authentication method behind a Virtual Proxy?

Br: Béla Szalontai

0 Likes
2,713 Views
Employee
Employee

Hello Bella,

This is over the anon proxy. We will have an auth component later on

0 Likes
2,713 Views
Employee
Employee

We've just added a template if you want to use the qdt-components from dev-hub

https://github.com/qlik-demo-team/qdt-devhub-template

2,713 Views
Employee
Employee

Hey QDT authors! Great work, very useful and it speeds up mashup creation. However, how could I achieve that a anguar-app with QDT parses selection parameters from URL? (like the /single integration)? Usually I would grap the app object and use app.field(...).selectMatch(...) or so.

0 Likes
2,713 Views

Hi Yianni jvs

Thanks for great components. I got them to work with the basic angular 5 app i build from scratch. I was able to use them without issues and they really help get an image of what you can do with Qlik Sense.

What i could not get to work were picasso charts.

In your "LiveDemo" examples you take different approach. I am not web developer so please excuse me if my question is silly...

Can the below tag work for them?   Is the color parameter compulsory?

<qdt-components [Component]="'QdtPicasso - lineChart'"    props="{type: 'lineChart', cols: ['Dim1', '=Avg([Expression1])']}">  </qdt-components>

thanks

Lech

0 Likes
2,713 Views
Employee
Employee
0 Likes
2,713 Views
Employee
Employee
0 Likes
2,713 Views
Employee
Employee
2,713 Views

Thanks Yianni, all looking good now. cheers

0 Likes
2,713 Views
Partner
Partner

hello,

i'm getting the below error:

"Uncaught TypeError: window.Qt Components is not a constructor"

at this line:

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

what could be the reason ?

thanks for your time.

Best regards

Andrea

0 Likes
2,713 Views
Employee
Employee

Hello Andrea,

I just changed the html template to use the latest qdt-components.

https://github.com/qlik-demo-team/qdt-html-template

Try that and let me know

Yianni

0 Likes
2,713 Views
krishnanandsiva
New Contributor

HI Yianni

Can you help me solve this issue while export data.  Please see the link below

https://github.com/qlik-demo-team/qdt-components/issues/44

Thanks

0 Likes
2,713 Views
vitalytomilov
New Contributor

Can't get it to work with Angular 6 or 7 (tried both), always getting a strange error about React.

Here I opened an issue: https://github.com/qlik-demo-team/qdt-components/issues/46

0 Likes
2,713 Views
andyjalexlive
New 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
2,358 Views
andyjalexlive
New 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
1,017 Views
andyjalexlive
New 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
944 Views
andyjalexlive
New 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
938 Views
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?

 

1.PNGbefore click button

 

2.PNGafter click

 

0 Likes
260 Views