Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

ts-qlik

1.0.2 • Public • Published

ts-qlik

NPM JavaScript Style Guide

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

Install

npm i ts-qlik

DownloadsWeekly Downloads

7

Version

1.0.2

License

MIT

Unpacked Size

1.52 MB

Total Files

7

Last publish

Collaborators

  • avatar