English Qlik Sense Developers 2.2

Getting started building mashups

Creating the container

Create a folder that will contain your assets. The folder can be created in a location of your choice.

Example:  

C:\Users\<UserName>\Documents\Qlik\Sense\Extensions\helpdesk

Creating the QEXT file

The next step is to create a QEXT file in the folder we just created and name it helpdesk.qext.

It should look something like the following:

{
	"name": "helpdesk",
	"type": "mashup",
	"description": "Mashup example based on Helpdesk demo app",
	"author": "Qlik",
	"allowPosition": true
}

Anatomy of the QEXT file

name

Mandatory setting. Defines the name of the mashup. Default is to use the file name.

It is recommended to use an unique name of the mashup to avoid interference with other mashups that may have the same name.

type

Mandatory setting. Should always be "mashup" for mashups.

description

Description of the mashup. Default is to use the file name.

version

Defines your individual version handling of the mashup. This setting is manually defined.

author

Defines the author of the visualization extension. This setting is manually defined.

allowPosition

Defines if absolute positioning is allowed in the mashup. Can be true or false.

Creating the main script file

Then it is time to create the main JavaScript file. This is also placed in the same folder as the QEXT file and we name it helpdesk.js.

The JavaScript file and the QEXT file must have the same name, including matching case. The name must also be unique in the Qlik Sense system so prefixing of the name should be considered. For example: com-qliktech-helloworld.

Configuring your Qlik Sense host

The Qlik Sense host being used must be configured in your mashup. This is needed for the following reasons:

  • To define the actual Qlik engine connection, which is used when you open an app or get a list of apps. This is covered by the config javascript object, used as a parameter in the openApp call.
  • To define where the Qlik Sense client side software and extensions should be loaded from. This is achieved by configuring reguirejs with the require.config call and setting the baseUrl.

In most cases you use the same server for both purposes which means you can create the baseUrl from the config object. If the Qlik Sense server also is hosting the mashup, you can take the necessary parameters from the browser URL, as shown in the following example:

var config = {
	host: window.location.hostname,
	prefix: "/",
	port: window.location.port,
	isSecure: window.location.protocol === "https:"
};
require.config( {
	baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources"
} );

If the mashup is deployed to an external web server, this configuration needs to be modified:

  • host should be set to your Qlik Sense host.
  • prefix should be set to your virtual proxy, terminated by /, or just / if you do not use a virtual proxy.
  • port should be set to the port that your Qlik Sense server is using.
  • isSecure should be true if your server is using https (which is recommended), or false if using http.

Setting the global require and alert

The JavaScript file is loaded in the browser when your mashup is used. RequireJS is used as a module loader.

require( ["js/qlik"], function ( qlik ) {
	qlik.setOnError(function(error) {
		$("#error span").html(error.message);
		$("#error").show();
		$("#closeerror").on("qv-activate", function() {
			$("#error").hide();
		});
	});

Connecting to the Qlik Sense app

You need to connect to the Qlik Sense app containing the objects you want to display on your web page.

	//open apps -- inserted here --
	var app = qlik.openApp("Helpdesk Management.qvf", config);

Retrieving the Qlik Sense objects to use

You then need to fetch the objects you want to display.

	//get objects -- inserted here --
	app.getObject( 'CurrentSelections', 'CurrentSelections' );
	app.getObject( 'QV01', 'hRZaKk', { noInteraction:true } );
	app.getObject( 'QV02', '55fecfc8-6460-4e63-9f32-cb8e8bd52438' );
	app.getObject( 'QV03', 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398' );
	app.getSnapshot( 'QV04', 'dLHgkN' );
	app.getObject( 'QV05', 'rJFbvG' );
});

Creating the main HTML file

We create an HTML file, name it helpdesk.html, and save in the same folder as the QEXT file.

Defining the relationships

Relationships between the current document and the linked Qlik Sense defined style sheets are specified in link rel tags inside the head of the HTML file.

Add host to the link rel tags if the web server hosting the mashup is different from the web server hosting the static Qlik Sense content.
    <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
    <script src="/resources/assets/external/requirejs/require.js"></script>
    <script src="helpdesk.js"></script>

 

    <style>
        article.qvobject
        {
            position:absolute;
            overflow: hidden;
            padding: 10px;
        }
		div.qvobject > div:not([class*="qvt-selections"]) {
			border:1px dashed #808080;
			background-color:rgba(0,0,0,0.01);
		}
    </style>

Placing the Qlik Sense objects

The Qlik Sense objects that have been defined in the JavaScript file are placed inside div tags inside the body of the HTML file.

<div id="CurrentSelections" style="position:absolute;width:100%;height:35px;top:0px;left:0px" data-qvid="CurrentSelections" class="qvobject"></div>
<div id="QV01" style="position: absolute; top: 50px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
<div id="QV02" style="position: absolute; top: 50px; left: 320px; width: 400px; height: 200px;" class="qvobject"></div>
<div id="QV03" style="position: absolute; top: 300px; left: 20px; width: 200px; height: 200px;" class="qvobject"></div>
<div id="QV04" style="position: absolute; top: 300px; left: 320px; width: 400px; height: 200px;" class="qsnapshot"></div>
<div id="QV05" style="position: absolute; top: 550px; left: 20px; width: 700px; height: 250px;" class="qvobject"></div>

Testing the mashup

Now is a good time to test your mashup. The URL to your mashup is of the following syntax:

Syntax:  

http://<ComputerName>:Port/extensions/<MashupName>/<MashupName>.html

Example: Path to Helpdesk example

http://localhost:4848/extensions/helpdesk/helpdesk.html

Make sure Qlik Sense Desktop is running when you test your mashup.