2018

Qlik Design Blog

February 2018 Previous month Next month

banner_react.jpg

On the demo team we end up working with both the Viz API to create and embed native Qlik Sense charts in apps, as well as creating custom components powered by the Qlik Engine using enigma.js, and we do this in Angular, React, and plain html, as we try to demo all of the ways that Qlik can be used. So after my last blog post (Starter project for developing QAP-powered apps with React and enigma.js) we had an idea on the demo team: let's try to unify all of our different custom components and templates. So we've been hard at work accomplishing that.


You may have seen Yianni's last blog post, qdt-components - A Components Library that can be used in simple Html, Angular 5 and React, introducing this effort. The goal is to have the qdt-components library include custom components powered by Qlik Engine, as well as a way to create and embed native Qlik Sense charts. Right now, the qdt-components library contains a few components, but we're not totally ready to start talking about all of them yet, so we're just sticking to the component that allows you to create and embed native Qlik Sense charts by interfacing with the Viz API.


The big addition since Yianni's post is that we've added a React template, so now we have an Angular 5 template, a plain html template, and a React template, all which load the qdt-components, which is pretty cool. This means that the components only need to be built once, but can be used in a project with almost any frontend stack. I say "almost" because in order to use the component that interfaces with the Viz API there's no getting around loading Angular 1.5 and RequireJS into the global namespace, which means they still have the chance to create conflicts. But you can choose not to use the component that interfaces with the Viz API if you don't have a need for native Qlik charts, and it will avoid loading all of the Capability API stuff, but if you choose to use it, you don't have to worry about writing any of the boilerplate you usually do when connecting to the Capability API.


Documentation, examples, and custom components are coming (and oh yea, we plan on using https://picassojs.com/), but that's the update for now. You can check out the qdt-components library and the templates here - Qlik Demo Team · GitHub. And demos of each of the 3 templates below

 

Angular 5 with qdt-components

React with qdt-components

Simple html with qdt-components


And-the-winner-is-002.pngHey guys - it has been a little over a month since I introduced you to our first Qlik Community Twitter Contest within my 2017 year in review blog. I want to thank you for your contributions and was very pleased to see the number of awesome examples demonstrating Qlik in action. That being said, all contest submissions come to end and well, it's time to announce the winner...watch this brief video to learn who it is and what the winner's 2017 Qlik Highlight was!

 

 

 

 

Can't see the video? Access to YouTube blocked by your organization or region? Download the attached .mp4 file to view on your computer or mobile device.

Do you ever use inline tables in your Qlik Sense app?  I do, especially when I need to add a small amount of data to an app that does not already exist in an Excel file or some other data source.  With the November 2017 release of Qlik Sense, manual entry was added in the Data manager.  With manual entry, users have the option to either manually enter their data into the table editor or paste their data into the table editor to add it to the Data manager.  I like this new small feature because it makes it very easy to copy Excel data or a table from a web page and add it as a table in the Data manager.  Let’s look at how it works.

 

From the Navigation menu, click on Data manager to open it.

menu.png

Once the Data manager is open, click on the plus sign to add data.  On the left, there is an option for Manual entry as seen below.  Select Manual entry to open the Manual entry editor window.  Once the Manual entry editor window is open, users can enter a name for the table they would like to add as well as the field names and table entries.  To enter data, double-click on the cell and start typing.  You will find that as you enter data into the cells, additional rows and columns are added automatically.  Once you are done entering the data for the table, click the Add data button at the bottom right to add the table to the Data manager.  Users can also paste in rows from an Excel table or a webpage which is how I like to use it.  Simply, copy the rows you would like to add, select the entire data entry table by clicking a column or row until they turn orange (as seen below) and then paste the table/rows (Ctrl-P).

manual entry paste.png

After the data is added to the Data manager, it can be loaded and added to the data model.  Refer to Qlik Sense Help for shortcuts that can be used when using the table editor.  Now, if you are accustomed to creating inline tables via the script editor, you can still do that in the script editor using the syntax below:

 

inline.png

 

 

 

This script will add a Products table with 2 fields, Product and Sales.  Five rows of data will be added to the Products table.

 

 

 

 

 

Manual entry allows users to manually enter data into the Data manager in a few easy steps.  Users do not need to remember the inline load script and they can load just the rows of data they need.  Manual entry is ideal when you have a small amount of data to add to an app.  When you have a lot of data, loading directly from the source or an Excel file may be easier.

 

Thanks,

Jennell

Hi guys - in this edition of the Qlik Design Blog, I have a short video that briefly introduces you to some of the new features available in Qlik Sense February 2018. Some of the related features are already available in Qlik Sense Cloud and can be used immediately. (note: themes is not available in Qlik Sense Cloud). The software download is currently available to customers and partners who have signed up for the Technical Preview and will be made available for download in our customer downloads area this month.


Qlik Sense February 2018


  • Custom Themes 
  • Preview Associations in Visual Data Preparation
  • iPhone Support for Qlik Sense Mobile
  • SSO for MSQL ODBC Data Connections
  • Anonymous Usage Support for ODAG (On Demand App Generation)
  • Support for Dynamic Web File Connector URLs
  • Minor user interface and accessibility improvements

 

Available shortly on the Qlik Help Channel - see more of these new features in action with our how-to tutorials.

 

Please let us know what you think by posting comments below.

 

 

What's New - Qlik Sense February 2018

 

Enjoy!

 

Michael Tarallo (@mtarallo) | Twitter

Qlik

 

Can't see the video? YouTube blocked by your Region or Company? Download the .mp4 to watch on your computer or mobile device.

banner_3technologies.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 connecting to Qlik …

Live Demo: Angular5

 

qdt-components

Branch: Qlik Branch

Github: GitHub - qlik-demo-team/qdt-components: React Components to be used with Angular2+ and React. Connects with the Capabili…

Npm: qdt-components

 

Yianni

Filter Blog

By date:
By tag: