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.
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.
Setting the base URL
Add the following sections to your script file.
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"
} );
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 these 3 links if the mashup is on another webserver than qlik static content-->
<link rel="stylesheet" href="/resources/autogenerated/qlikui.css">
<link rel="stylesheet" href="/resources/assets/client/client.css" media="all">
<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
Did this page help you?
If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!