Skip to main content Skip to complementary content
Qlik Resources

Creating a mashup template

You can create your own template to be used when building mashups. A template is an empty mashup that can be used as a starting point for creating a mashup using the Mashup editor, and it should contain the following:

  • A QEXT file, defined as type: "mashup-template".

    Example: QEXT: Basic mashup template

    {
	"type": "mashup-template",
	"name": "Basic mashup template",
	"description": "Basic responsive mashup template",
	"version": "1.0.0",
	"author": "",
	"homepage": "",
	"keywords": "qlik-sense, visualization, mashup",
	"license": "",
	"repository": "",
	"dependencies": {
		"qlik-sense": ">=3.0.x"
	}
}

  • A main HTML file to be used as a skeleton HTML file. The places where you want your Qlik Sense content to be inserted should be defined with class="qvplaceholder". They must also have unique IDs.

    Example: HTML: Basic mashup template

    <!doctype html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Qlik Sense Mashup</title>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta http-equiv="cleartype" content="on">
	<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
	<link rel="stylesheet" href="basic-mashup-template.css">
	<script src="../../resources/assets/external/requirejs/require.js"></script>
	<script src="basic-mashup-template.js"></script>
</head>
<body style="overflow: auto">
<div class="flex-container">
	<div id="QV01" class="qvplaceholder"></div>
	<div id="QV02" class="qvplaceholder"></div>
	<div id="QV03" class="qvplaceholder"></div>
	<div id="QV04" class="qvplaceholder"></div>
	<div id="QV05" class="qvplaceholder"></div>
	<div id="QV06" class="qvplaceholder"></div>
</div>

<!--Error Popup-->
<div id="popup">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closePopup"><span aria-hidden="true">×</span></button>
	<p id="popupText"></p>
</div>

</body>
</html>

  • A main JavaScript file with code to open the Qlik Sense app, get the visualizations, and an area where the auto-generated code is inserted.

    Example: JavaScript: Basic mashup template 

    /*
 * Basic responsive mashup template
 * @owner Enter you name here (xxx)
 */
/*
 *    Fill in host and port for Qlik engine
 */
var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );
var config = {
	host: window.location.hostname,
	prefix: 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"
} );

require( ["js/qlik"], function ( qlik ) {
	qlik.on( "error", function ( error ) {
		$( '#popupText' ).append( error.message + "<br>" );
		$( '#popup' ).fadeIn( 1000 );
	} );
	$( "#closePopup" ).click( function () {
		$( '#popup' ).hide();
	} );

	//callbacks -- inserted here --
	//open apps -- inserted here --
	//get objects -- inserted here --
	//create cubes and lists -- inserted here --

} );

  • Other files that are needed for your mashup template. For example a CSS file.

    Example: CSS: Basic mashup template

    .flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 45px 45px 0;
}

.qvplaceholder, .qvobject {
	flex: 1 1 auto;
	height: 300px;
	min-width: 400px;
	margin: 45px 0 0 45px;
}

#popup {
	background-color: #c3534b;
	color: #FFFFFF;
	position: fixed;
	max-width: 250px;
	padding: 10px;
	margin: 10px;
	bottom: 0;
	right: 0;
	display: none;
	border-radius: 5px;
	z-index: 6;
	font-family: sans-serif;
}

.close {
	cursor: pointer;
	background: 0 0;
	border: 0;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
	position: absolute;
	right: 9px;
	top: 7px;
}

.close:hover {
	opacity: .5;
}

#popupText {
	margin-right: 23px;
}

  • A WBL file defining all the files included in the template.

    Information noteThe WBL file must be named wbfolder.wbl.

    Example: WBL: Basic mashup template

    basic-mashup-template.qext; basic-mashup-template.html; basic-mashup-template.js; basic-mashup-template.css;
Information noteWhen Dev Hub creates a mashup from a template, it replaces the string ${name} in the html file with the mashup name and the string ${docid} in the js file with the Qlik Sense app ID.

Creating a mashup template based on an existing mashup

Do the following:

  1. Open Dev Hub.

    Launching Dev Hub

  2. Right click on the mashup you want your new template to be based upon.

    In this example, we select the Helpdesk mashup.

  3. Select Duplicate, give it a name and click Create & edit.

    In this example, we define the name MyMashupTemplate.

  4. If applicable, rename the HTML, QEXT and JavaScript files.

    In this example, we do not need to rename the files.

  5. In the QEXT file, set type = "mashup-template".

    Example:  

    {
	"type": "mashup-template",
	"name": "MyMashupTemplate",
	"description": "Basic responsive mashup template",
	"version": "1.0.0",
	"author": "",
	"homepage": "",
	"keywords": "qlik-sense, visualization, mashup",
	"license": "",
	"repository": "",
	"dependencies": {
		"qlik-sense": ">=3.0.x"
	}
}
    Information note If you are creating a template based on a mashup created in an older version of Workbench, make sure you remove references to "appdata", "lists" and "cubes".

  6. If applicable, in the HTML file, change the reference to the JavaScript and define it to ${name}.

    Example:  

    Before
        <script src="MyMashupTemplate.js"></script>
    After
        <script src="${name}.js"></script>

  7. If applicable, in the HTML file, change the references to class="qvobject" to class="qvplaceholder". Also, remove all references to data-qvid.

    Example:  

    Before
    <div class="flex-container">
	<div id="QV01" class="qvobject"></div>
	<div id="QV02" class="qvobject"></div>
	<div id="QV03" class="qvobject"></div>
	<div id="QV04" class="qvobject"></div>
	<div id="QV05" class="qvobject"></div>
	<div id="QV06" class="qvobject"></div>
</div>
    After
    <div class="flex-container">
	<div id="QV01" class="qvplaceholder"></div>
	<div id="QV02" class="qvplaceholder"></div>
	<div id="QV03" class="qvplaceholder"></div>
	<div id="QV04" class="qvplaceholder"></div>
	<div id="QV05" class="qvplaceholder"></div>
	<div id="QV06" class="qvplaceholder"></div>
</div>

  8. Remove the openApp call.

    Example:  

    Before
    	//open apps -- inserted here --
	var app = qlik.openApp( 'Helpdesk Management.qvf', config );
    After
    	//open apps -- inserted here --
	//get objects -- inserted here --

  9. If applicable, in the JavaScript file remove the references in the getObject call.

    Example:  

    Before
    	//get objects -- inserted here --
	app.getObject( 'QV06', 'uETyGUP' );
	app.getObject( 'QV04', 'xfvKMP' );
	app.getObject( 'QV05', 'rJFbvG' );
	app.getObject( 'QV03', 'PAppmU' );
	app.getObject( 'QV02', '298bbd6d-f23d-4469-94a2-df243d680e0c' );
	app.getObject( 'QV01', 'hRZaKk' );
    After
    	//get objects -- inserted here --
	//create cubes and lists -- inserted here --

  10. In the WBL file, update the list of files included in your template.

    Information noteThe WBL file must be named wbfolder.wbl.

    Example:  

    MyMashupTemplate.qext; MyMashupTemplate.html; MyMashupTemplate.js; MyMashupTemplate.css

  11. Depending on your environment, do the following:

    • For Qlik Sense:Deploy the mashup template to the repository:

      1. Create a zipped file of the extension project containing all the files.

      2. Open Qlik Management Console.

      3. Select Extensions on the QMC start page or from the Start Arrow down drop-down menu to display the overview.

      4. Click Create new Import in the top right corner.

      5. Select a file to import.

        Remember to enter the password for the zip file if it is password protected.

      6. Browse to and click the zipped mashup template file that you want to add.

      7. Click Open in the File explorer window.

      8. Click Import.

    • For Qlik Sense Desktop: Move the folder containing all your template files to the following location: %Documents%\Qlik\Sense\Extensions\Templates.

You have now created a new mashup template.

Learn more

 

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!

Leave your feedback here