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;
Creating a mashup template based on an existing mashup
Do the following:
-
Open Dev Hub.
-
Right click on the mashup you want your new template to be based upon.
In this example, we select the Helpdesk mashup.
-
Select Duplicate, give it a name and click Create & edit.
In this example, we define the name MyMashupTemplate.
-
If applicable, rename the HTML, QEXT and JavaScript files.
In this example, we do not need to rename the files.
-
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". -
If applicable, in the HTML file, change the reference to the JavaScript and define it to ${name}.
Example:
<script src="MyMashupTemplate.js"></script>
<script src="${name}.js"></script>
-
If applicable, in the HTML file, change the references to class="qvobject" to class="qvplaceholder". Also, remove all references to data-qvid.
Example:
<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>
<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>
-
Remove the openApp call.
Example:
//open apps -- inserted here -- var app = qlik.openApp( 'Helpdesk Management.qvf', config );
//open apps -- inserted here -- //get objects -- inserted here --
-
If applicable, in the JavaScript file remove the references in the getObject call.
Example:
//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' );
//get objects -- inserted here -- //create cubes and lists -- inserted here --
-
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 -
Depending on your environment, do the following:
- For Qlik Sense:Deploy the mashup template to the repository:
Create a zipped file of the extension project containing all the files.
Open Qlik Management Console.
Select Extensions on the QMC start page or from the Start drop-down menu to display the overview.
Click Import in the top right corner.
Select a file to import.
Remember to enter the password for the zip file if it is password protected.
- Browse to and click the zipped mashup template file that you want to add.
Click Open in the File explorer window.
Click Import.
- For Qlik Sense Desktop: Move the folder containing all your template files to the following location: %Documents%\Qlik\Sense\Extensions\Templates.
- For Qlik Sense:Deploy the mashup template to the repository:
You have now created a new mashup template.