/qdt-components

React Components to be used with Angular 6, React 16 and Vue 2. Connects with the Capability API and Engine API.

Primary LanguageJavaScriptMIT LicenseMIT

Banner

version

Qlik Demo Team Components

  • Qlik-powered components built by the Qlik Demo Team. For use with simple html, Angular6, React 16 and Vue 2

Installation

  • npm install --save qdt-components

Usage

Simple Html

<head>
  <script type="text/javascript" src="qdt-components.js"></script>
</head>
<body>
  <qdt-component id="qdt1"></qdt-component>
</body>
  • Add the Javascript
<script type="text/javascript">
  var options = {
    config: {
      host: "sense-demo.qlik.com",
      secure: true,
      port: 443,
      prefix: "",
      appId: "133dab5d-8f56-4d40-b3e0-a6b401391bde"
    },
    connections: { 
      vizApi: true, 
      engineApi: true 
    }
  }
  var qdtComponents = new QdtComponents(options.config, options.connections);
  var element = document.getElementById('qdt1');
  qdtComponents.render('QdtViz', {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'}, element);
</script>

Angular 6 (cli)

  • Live Demo
  • npm install --save qdt-components
  • create an Angular 5 component that implements qdt-components
import { Component, OnInit, ElementRef, Input } from '@angular/core';
import QdtComponents from 'qdt-components';

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

const qdtComponent = new QdtComponents(options.config, options.connections);

@Component({
  selector: 'qdt-component',
  templateUrl: './qdt-component.component.html',
  styleUrls: ['./qdt-component.component.less']
})
export class QdtComponent implements OnInit {

  @Input() type: string;
  @Input() props: object;

  constructor(private elementRef: ElementRef) { }

  ngOnInit() {
    qdtComponents.render(this.type, this.props, this.elementRef.nativeElement);
  }

  ngOnDestroy() {
    QdtComponents.unmountQdtComponent(this.elementRef.nativeElement)
  }
}

React

  • Live Demo
  • npm install --save qdt-components
  • create a React component that implements qdt-components
import React from 'react';
import PropTypes from 'prop-types';
import QdtComponents from 'qdt-components';

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

const qdtComponents = new QdtComponents(options.config, options.connections);

export default class QdtComponent extends React.Component {
  static propTypes = {
    type: PropTypes.string.isRequired,
    props: PropTypes.object.isRequired,
  }
  componentDidMount() {
    const { type, props } = this.props;
    qdtComponents.render(type, props, this.node);
  }

  componentWillUnmount() {
    QdtComponents.unmountQdtComponent(this.node)
  }

  render() {
    return (
      <div ref={(node) => { this.node = node; }} />
    );
  }
}

Vue

Component Docs

QdtViz

This component can be used to create or get a native Qlik Sense viz. If you define the id prop, then it will get that Qlik Sense viz. If you define the type, cols, and options props it will create a new viz. The width and height props are both optional, and default to '100%'.

prop type description
id String Id for an existng visualization
type String see here
cols Array see here
options Object see here
width String Sets width of viz
height String Sets height of viz

QdtFilter

This creates a custom filter dropdown. If cols is defined, qListObjectDef will be ignored.

prop type description
cols Array see here
qListObjectDef Object see here

QdtSelectionToolbar

This populated a toolbar with the current app selections.

prop type description
title String SELECTIONS
btnText String Clear All

QdtBarchart

This creates a barchart based on Picasso.js.

prop type description
type String horizontal
cols Array [dimension, measure]
options Object barcolor
width String Sets width of viz, default 100%
height String Sets height of viz, default 100%

QdtPicasso - lineChart

This creates a Line Chart based on Picasso.js.

prop type description
type String lineChart
cols Array [dimension, measure]
options Object color

QdtSearch

This creates a search input field based on Leonardo UI - input.

prop type description
cols Array [dimension]
invert Boolean false
placeholder String Search for
tooltipDock String 'top', 'right', 'bottom', 'left'
tooltipContent String <h5>Tooltip Header</h5> more content here.
showGo Boolean false

Version Log

  • 1.1.67 Add Vertical Bar Gauge
  • 1.1.66 Add Vertical Bar Gauge with Range Limits