In the previous chapters, we outlined the various capabilities of Qlik Sense and their use. One of the advantages of Qlik Sense is that it is built on open API 's Qlik Analytic Platform (QAP), that allows the customers and partners to extend their analytic solutions. This chapter will provide an overview and some interesting examples of how to enrich your solutions with QAP. It is not meant to replace the Qlik Sense for Developers help documentation, which can be found at https://help.qlik.com/sense/2.1/en-us/developer/#Home-developer.htm.
With this said, in this chapter, we will share some interesting examples and resources in the following key areas:
- Web mashups
- Extending Qlik Sense client
- Developer community – branch
QAP is made up of the following three layers, which include the client layer (Qlik Hub and Qlik Management Console), API, the SDK layer, and finally the Engine layer, which contains the QIX engine and all the supporting services:
https://<servername>/dev-hub/, and for the desktop version of Qlik Sense, it is
https://localhost:4848/dev-hub/. This chapter will focus primarily on Qlik Sense Enterprise. Dev Hub provides four key tools for extending Qlik Sense solutions. They include the following:
- Single configurator: A Qlik Sense tool that provides an easy way of creating simple mashup pages by returning a URL that will resolve to a Qlik Sense object.
- Engine API Explorer: A tool that helps you explore the capabilities of Qlik Engine API.
With this said, now let's take a closer look at the most common solution extensions that can be generated via Dev Hub.
One of the most common requests is: can Qlik Sense create a web mashup with Qlik Sense objects? There are two options based on the level of control and interactivity required of the Qlik Sense objects. The first is the single configurator which provides an easy way to create simple mashup pages without having to create any code. It simply generates a URL that returns a complete HTML page with an embedded Qlik Sense visualization. To create a Qlik Sense object link, select the Single configurator as shown in the following screenshot. Once selected, you will need to select the application you wish to access for the mashup. In this example, the Executive Dashboard application was selected. It is important to note that a developer should access a published application that is in a stream that aligns with the requirements of the resulting mashup. There is additional information on administration in Chapter 9, Administering Qlik Sense®.
Once selected, a listing will be generated of all the sheets and respective objects. A key point to highlight is that both sheets and individual objects are available based on your web page requirements.
In the following screenshot, you can see the use of the Single configurator generating the URL and the Iframe code for the Margin vs Sales by Sales Rep scatter chart that is contained in the Executive Dashboard Qlik Sense application:
Additionally, multiple single Qlik Sense objects can be embedded and they will share common selections and interactions because of the QIX engine. Please note that not only can the visualizations be embedded, but the entire Qlik Sense sheets can be embedded as well. For more information, please refer to the Qlik Sense for Developers help site.
Now, let's move onto more complex mashup requirements with the Mashup editor. To start the creation of a new mashup, select Create new and immediately you will notice that the Mashup editor provides the following four pre-built templates to ease your development:
Once created, all these mashups are stored in the content store of the Qlik Sense server. Dev Hub provides an easy way to filter mashups versus visualization extensions. The following are the four templates that were generated:
With the template created, we are ready to begin. One of the advantages of working in the Dev Hub is that you can create mashups that can span different Qlik Sense applications, in this case, the Executive Dashboard that contains sales analysis visualizations and Travel Expense Management which tracks travel and food expenses. From the Executive Dashboard app, we have dragged Average Sales Per Day, Total Revenue by Product Group, and finally, Revenue by Sales Rep:
With the key Qlik Sense objects all in place, we can focus on changing the headings for the mashup page. Fortunately, the Mashup editor generates the following four files for this template. They include:
Sales and Travel.qext
Sales and Travel.html
Sales and Travel.js
Sales and Travel.css
To make changes to all the headers and other formatting, just edit
Sales and Travel.html:
In the case of this example, the
Header 1 and
Header 2 titles were removed because the Qlik Sense app object titles were self-explanatory. Additionally, because this is a generated HTML file, it can be edited for additional formatting and content. The following is the resulting web page that is previewed from the Mashup editor:
Now, let's turn our attention to extending the visualization objects in Qlik Sense. One of the advantages of an open API is that it can be extended easily to include external visualizations. In our example, we will explore adding a People Chart to Qlik Sense. This example is available in the following locations:
- Qlik Sense Desktop:
- Qlik Sense:
This visualization extension is made up of the following four files:
com-qliktech-peoplechart.qext: This file is primarily used to document the extension name, description, type, and so on
peoplechart.css: Cascading Style Sheets (CSS) describes how HTML elements of the extensions will be displayed
The first step in defining this extension is to edit the applicable fields of the
com-qliktech-peoplechart.qext file to set a default title, description, icon, and type:
Once this is completed, we need to define the properties for the extension in our Java code. In this example, we will do this in the
com-qliktech-peoplechart.js file, which is loaded in the
The next step is to enable selections. To accomplish this, we use the
selectValues function to reuse Qlik Sense standard selection UI. Also, make sure to set the
selected CSS class on the selected elements:
Now that it is completed, we need to implement the
paint method. In the
paint method, we create the HTML for our extension based on the data in the
layout parameter. Then, we set the content of the
$element parameter to display the extension content. It is also important to tag your elements with
class= 'selectable' data-value= '0':
It is a good programming practice to keep your styling in a separate CSS file. Qlik Sense sets the CSS class
qv-object-[extension name] on your extensions. You should prefix your CSS rules with that. You then load your CSS file with RequireJS and add its content to the HTML page:
Once the extension is saved, it is available for use by developers in the Qlik Sense Chart Library. In the following screenshot, you can see the Word Cloud chart type is available and was used to convert the horizontal bar chart of Total Revenue by Product Group into a Word Cloud:
Additionally, please note that all extensions are stored in the Qlik Sense content store and are managed by the QMC. Additional information on administration is available in Chapter 9, Administering Qlik Sense®.
Qlik Engine API Explorer is a tool that allows developers to send messages and receive answers from the QIX engine. This provides an easy way for developers to form handles, methods, and macros to send the QIX engine and test the results before coding an application. To access the Engine API Explorer, select the Engine API Explorer from the Qlik Dev Hub menu:
The first step is to connect to a Qlik Sense app. To do this, we first must know what applications are available on this server. Fortunately, there is a full list of macros available to help explore QIX Engine:
In our case, we will be using the
Get applist to see what applications are available to explore on this server. Based on the response, the Executive Dashboard is available:
Now we are ready to connect to the Executive Dashboard app. Note the
send commands generated and the engine response. If satisfied with the response, the developer can then copy and paste into their development environment:
Now that we are connected, there is a global method to manage every aspect of a Qlik Sense app from outside the Qlik Sense client. This includes the full application life cycle from creation, maintenance, versioning, to deletion:
Qlik Branch (http://branch.qlik.com) is an open source community specifically designed for developers. It is a place to share and collaborate on projects and innovations created with Qlik products with an open source philosophy. All projects posted are required to have the code readily accessible, and they must be downloadable directly from the site. In short, everything on the site is free to use and free to modify in the spirit of open source:
Additionally, Qlik Branch is a place to find and download solutions for your projects and/or network with the developers to help extend your Qlik Sense or QlikView solutions. The site contains a wide variety of projects leveraging the APIs of Qlik Sense, including visualizations, web mashups, server automation, and connectors, to name just a few.
As a developer, Qlik Branch is a great place to get started and involved in the growing community. Many of the projects on the site could serve as a great starting place for development efforts. Additionally, a developer can stay up to date with API-related news, ask questions in the forum, join the public Slack channel, as well as educate themselves with the resources currently available or planned for the future. Furthermore, a more enterprising developer could make a name for themselves by sharing their expertise and creating valuable content, potentially driving business their way as the customers look to implement:
In summary, one of the strengths of Qlik Sense is that it is built on open API 's Qlik Analytic Platform (QAP) that allows customers and partners to extend their analytic solutions. This chapter has provided an overview and some interesting examples of how to enrich your solutions with QAP. It is not meant to replace the Qlik Sense for Developers help documentation which can be found at https://help.qlik.com/sense/2.1/en-us/developer/#Home-developer.htm, but rather serve as an introduction for power users who seek to expand their skill sets, as well as developers who are new to Qlik Sense.
In the next chapter of this book, we will explore the key features of administrating your Qlik Sense environment.