Power of the Qlik APIs




Out-of-the-box Qlik Sense gives users the ability to manipulate data with ease and quickly generate insightful visualizations. But sometimes we want to apply the power of Qlik’s data modeling capabilities in a more custom-way. Whether it be integrating objects into external websites, creating visualizations on-the-fly, or directly accessing the Qlik engine to build your own visualizations, Qlik Sense has a way to accommodate your custom use case. In this post, we will explore different ways in which the power of the QIX engine can be utilized in external web environments, but stay tuned for more!

 

IFRAME/Element Integration

The easiest way for a developer to integrate Qlik Sense into their web page is through use of the App Integration and Single Integration APIs. The integration APIs allow us to embed an object, sheet, or even entire app into a webpage using an iframe element. Setup is as simple as placing a specialized URL URL into an iframe’s src attribute.

[code language="css"]
<iframe src="https://<servername>/sense/app/4d541aea-a8b1-4cef-a4c2-6bda620321a9"/>

[/code]

On top of providing a URL URL to the location of the Sense object, we can also configure the URL with additional parameters to control aspects such as user interactivity, initial selections in the app, and more. Parameter configuration settings can be found in the Integration documentation, but if you’re looking to embed a sheet or object somewhere in your web page, the easiest way to generate an iframe tag with a fully configured URL is to go to the Single Configurator tool within the Qlik Sense Dev-Hub (can be found at http://localhost:4848/dev-hub/single-configurator while Qlik Sense Desktop is open). After selecting an app, you can use the options panel to automatically generate an iframe that includes the app, sheet, and object ids, and any selection/interaction settings you want to be applied. From there, integration is as simple as copying and pasting the full iframe into your html document.

 

Note that when interactions and selections are made available to the end user, any selections made on an object within an iframe will be made through the established session, so if you have the same app open in another window, selections made in one view will be applied to both instances of Sense that are open.

 

 

Qlik Sense Capability APIs

 

We’ve seen how the Single Configurator can provide us a convenient method of embedding Qlik sheets and objects into web pages, but more serious developers will require further control over the objects being embedded. With the Qlik Sense Capability APIs, we can use functions to request information, or even objects, from the Qlik Sense engine, and use the responses to build out web pages with objects that have already been created in an existing application, or even generate our own objects on the fly using the Visualization API.

 

The easiest way to get started using the Capability APIs is through the Mashup editor within Qlik Sense’s Dev-Hub (http://localhost:4848/dev-hub/mashup-editor). This editor will allow you to connect to an app and create html elements where you can then place Sense objects. Follow the instructions to build your own mashup to see how easy it is to generate a Qlik Sense driven web page, and witness the ease of using the getObject() method to pull existing objects into your html document.

 

Once setup, we can run numerous methods in the JavaScript file to retrieve metadata and generate charts. Here’s an example of how easy it is to use the Visualization API to generate our own bar chart completely within the script (I have already created a template using the Helpdesk Management application within Qlik Sense Desktop).

 

First, I have created a div element within our html body that will act as a container for the Qlik Sense chart

[code language="css"]

<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 500px; height: 500px;"></div>

[/code]

Then, in our mashup JavaScript file, within the requirejs load, we can call the following lines of code to create a new visualization and place it within our <div> using the visualization.create() and visualization.show() methods

[code language="javascript"]
var app = qlik.openApp("Helpdesk Management.qvf", config);

&nbsp;

app.visualization.create( 'barchart', ["Case Owner Group", "=Count(%CaseId)"]).then( function(vis){

vis.show('QV01');

})

[/code]

All we needed to define in the above code was the type of chart we were creating (‘barchart’) and an array of our dimensions and measures, giving us the following chart

And that’s all it takes to generate a chart on the fly. Of course, there’s likely more configuration we would want to apply to the chart (axis labels, suppression of null values, etc.). All of the options you would find in a chart’s property panel can be found within the visualization options documentation, and can be passed as a third parameter to the visualization.create() function to further configure the chart.

 

 

Qlik Sense Engine API

 

Sometimes the charting capabilities, we get out of the box from Qlik Sense aren’t enough to satisfy complex visualizations have in mind for specialized use cases. By using the Qlik Engine API, we can take advantage of Qlik Sense’s back-end data structure and filtering capabilities, and define our own HyperCubes to build powerful charts using a libraries like d3.

 

The Qlik Engine API uses JSON RPC 2.0 to send and receive information with the Qlik Engine via WebSocket traffic. A great place to your feet wet with the Engine API is through the Engine API Explorer found within Dev-Hub (http://localhost:4848/dev-hub/engine-api-explorer). This documentation has some good examples to get you started. Be aware that API methods you call from within the Engine API explorer are actually connected to the applications you are connecting to; When you update or delete an object within the Explorer, it will affect the object where it exists within the app.

 

Running Engine API methods using the json protocol to communicate with the Qlik Engine is very powerful, but you will quickly realize that manually generating json objects for every method you want to call can become repetitive. This is where method wrappers, such as EnigmaJS, or the reactive RxQ can make the Engine API library easy to work with.

 

The Engine API doesn’t expose methods like the Visualization API that allow us to create a chart with a few lines of code, but the depth of information and the ability to manipulate complex data structures exposes levels of the data model that can be used to create extremely powerful and custom visualizations. The flexibility that comes with the ability to define Qlik Sense HyperCubes (Check out Axis Group’s Qix Structure Generator for a convenient way to build qHyperCubeDefs) allows us to customize a data structure in countless ways, providing endless charting capabilities.

 

The power of the Engine API can be seen in a number of Axis Group custom visualizations, including our Service Charges dashboard, Across Borders (analyzing the world-wide refugee and forced displacement crisis), and many more. And don’t forget to check out our powerful map animation of big data, demonstrated in Axis Group’s 2017 Hackathon Challenge entry.

 

All of us at Axis Group are very excited about the powerful opportunities made available through the Qlik Sense API set.

Stop by our booth (#701) at Qonnections 2017 to talk with John about our exciting activities in the Data Viz world!

 

John is a Solutions Consultant in the Visual Analytics Practice at Axis Group. He has a background in Mechanical, Computer, and Racecar Engineering. When he’s not mashing keys on his keyboard to look busy, John enjoys travelling to the corners of the world and driving fast cars.

TAGS: APIs, Qonnections, QIX Engine, Qlik

Related News

Student retention is near the top of every institution's agenda. Student attrition results in...

Read More

A minor but frequent pain point at our Qlik Sense clients has been addressed in the Qlik Sense...

Read More