Ts-qlik NPM | npm.io

ts-qlik

TypeScript Qlik

In this library use to communicate with qlik sense capability api. Build your own Web application in analytics by using qlik sense.

Get object
Get filter
Get fields
Can use Root API
Can use App API
Can use Bookmark API
Can use Field API
Can use Selection API
Can use Variable API
Can use Visualization API
Can use Global API
Can use Navigation API
Can use Table API
Can use Theme API

Installation

npm install --save ts-qlik

Usage for react application

Create a sample react application by using create-react-app. Once run the application and replace to below files App.js and App.css. Then you can get analytics react web application.

App.js

import React, { useState } from 'react';
import { TSQlik, QSApp, QSProps } from 'ts-qlik'
import './App.css';

function App(props) {
  const [active, setActive] = useState('qlik');
  const [qlik, setQlik] = useState(null);
  const config = {
    "host": "localhost",
    "port": 80,
    "prefix": "/",
    "isSecure": false
};

  const changeTab = (data) => {
    setActive(data);
    if(data === 'app') {
      // Open Qlik Sense application
      QSApp('031ec68a-9247-4fc5-9ddd-3b1764924aab', config).then((q) => {
        q.currApp.app.getObject('obj1', 'fNGRa')
        q.currApp.app.getObject('obj2', 'JcJvj')
      })
    }
  }

// Get Qlik Properties

  const callQlikFn = () => {  
  TSQlik(config).then((q) => {
    setQlik(q);
  })
  }

  return (
    <div className="App">
      <div className="Header">
        TS-Qlik Application
     </div>
      { qlik && 
            <div className="Content">
              <div className="tabs">
                <div onClick={() => changeTab('qlik')} className={(active === 'qlik') ? 'tab active' : 'tab'}>TSQlik function</div>
                <div onClick={() => changeTab('app')} className={active === 'app' ? 'tab active' : 'tab'}>OpenApp function</div>
              </div>
              {active === 'qlik' && <div className="Qlik">
                <div className="directoryName">Directory: {qlik.qlikUser.directory}</div>
                <div className="userName">UserName: {qlik.qlikUser.userid}</div>
              </div> }
              {active === 'app' && <div className="OpenApp">
                <div id="obj1" className="object"></div>
                <div id="obj2" className="object"></div>
              </div> }
      </div> }
      { !qlik && 
            <div className="Content">
              <div className="qlikBtn">
                <button onClick={() => callQlikFn()}>Call Qlik</button>
              </div>
      </div> }
    </div>
  );
}

export default App;

App.css

.App {
  height: calc(100vh - 20px);
  width: calc(100vw - 20px);
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.Header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
}

.Content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tabs {
  flex: 0 0 50px;
  display: flex;
}

.tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  cursor: pointer;
}

.tab.active {
  background-color: #ccc;
  font-weight: bold;
}

.qlikBtn {
  padding-top: 13px;
  display: block;
  right: 20px;
  position: absolute;
}

.qlikBtn button {
  vertical-align: middle;
  height: 28px;
  min-width: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  line-height: 24px;
  position: relative;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  border-radius: 3px;
  color: #595959;
  background-color: transparent;
  border-color: #B3B3B3;
  transition: border-color 200ms ease-out;
}

.Qlik,
.OpenApp {
  display: flex;
  flex: 1;
  padding: 10px;
  align-items: center;
  justify-content: center;
}

.Qlik div{
  padding: 10px;
}

.object{
  flex: 1;
  height: 100%;
}

Usage for angular application

Create a sample angular application by using @angular/cli. Once run the application and replace to below files app.component.ts, app.component.html and app.component.css. Then you can get analytics angular web application.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { TSQlik, QSApp } from 'ts-qlik'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  qlik = null;
  active = 'qlik';
  config = {
    "host": "localhost",
    "port": 80,
    "prefix": "/",
    "isSecure": false
  };

  ngOnInit() {
    this.qlik = null;
  }

  callQlikFn = () => {
    TSQlik(this.config).then((q) => {
      this.qlik = q;
    })
  }

  changeTab = (data) => {
    this.active = data;
    if(data === 'app') {
      QSApp('031ec68a-9247-4fc5-9ddd-3b1764924aab', this.config).then((q) => {
        q.currApp.app.getObject('obj1', 'VtfsZDc')
        q.currApp.app.getObject('obj2', 'JcJvj')
      })
    }
  }

}

app.component.html

<div class="App">
  <div class="Header">
    TS-Qlik Application
  </div>
  <div *ngIf="qlik" class="Content">
    <div class="tabs">
      <div (click)="changeTab('qlik')" [ngClass]="{'active': active == 'qlik'}" class="tab">TSQlik function</div>
      <div (click)="changeTab('app')" [ngClass]="{'active': active == 'app'}" class="tab">OpenApp function</div>
    </div>
    <div *ngIf="active === 'qlik'" class="Qlik">
      <div class="directoryName">Directory: {{qlik.qlikUser.directory}}</div>
      <div class="userName">UserName: {{qlik.qlikUser.userid}}</div>
    </div>
    <div *ngIf="active === 'app'" class="OpenApp">
      <div id="obj1" class="object"></div>
      <div id="obj2" class="object"></div>
    </div>
  </div>

  <div *ngIf="!qlik" class="Content">
    <div class="qlikBtn">
      <button (click)="callQlikFn()">Call Qlik</button>
    </div>
  </div>
</div>

app.component.css

.App {
    height: calc(100vh - 20px);
    width: calc(100vw - 20px);
    padding: 10px;
    display: flex;
    flex-direction: column;
  }
  
  .Header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
  }
  
  .Content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .tabs {
    flex: 0 0 50px;
    display: flex;
  }
  
  .tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    cursor: pointer;
  }
  
  .tab.active {
    background-color: #ccc;
    font-weight: bold;
  }
  
  .qlikBtn {
    padding-top: 13px;
    display: block;
    right: 20px;
    position: absolute;
  }
  
  .qlikBtn button {
    vertical-align: middle;
    height: 28px;
    min-width: 44px;
    padding: 0 16px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none;
    line-height: 24px;
    position: relative;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    border-radius: 3px;
    color: #595959;
    background-color: transparent;
    border-color: #B3B3B3;
    transition: border-color 200ms ease-out;
  }
  
  .Qlik,
  .OpenApp {
    display: flex;
    flex: 1;
    padding: 10px;
    align-items: center;
    justify-content: center;
  }
  
  .Qlik div{
    padding: 10px;
  }
  
  .object{
    flex: 1;
    height: 100%;
  }

License

MIT © Ranjithkumar

qlik sense capability api react-component angular-components react angular ts

babel-polyfill

@infinitebrahmanuniverse/nolb-ts-q

4 years ago

4 years ago

4 years ago

4 years ago