Wenn Sie ein neues Mashup erstellen werden in der Regel folgende Dateien angelegt. Bei diesem Beispiel heißt das Mashup „project“.

  • project.qext
    enthält die Informationen für den DevHub wie Type (widget/mashup/extension) und des Projektes wie Author Version etc.
  • wbfolder.wbl
    enthält die Dateien welche im DevHub als Datei im Editor angezeigt werden. Kann auch leer sein aber muss da sein damit man die Extension auf dem Server installieren kann.
  • project.css
    nicht zwingend notwendig aber empfohlen um CSS von der HTML Datei zu trennen
  • project.html
    die HTML Datei in welcher die Scripte und CSS Dateien eingebunden sind. 
  • project.js 
    enthält die require.js welche die Qlik Funktionen und Methoden bereitstellt. Über diese können auch die in Qlik Sense enthaltenen Frameworks eingebunden werden.

 

# project.qext

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

 

# wbfolder.wbl

project.qext;
project.html;
project.js;
project.css

Öffnet die angebenden Dateien im DevHub:

 

# project.css

.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;
}

 

# project.html

<!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="project.css">
<script src="../../resources/assets/external/requirejs/require.js"></script>
<script src="project.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>
</body>
</html>

Erläuterung:

<link rel=“stylesheet“ href=“../../resources/autogenerated/qlik-styles.css“>
<link rel=“stylesheet“ href=“project.css“>
<script src=“../../resources/assets/external/requirejs/require.js“></script>
<script src=“project.js“></script>

Über diese Verweise innerhalb der HTML Datei werden die für Senes benötigten Scripte und CSS Dateien bereitgestellt. Achten Sie das Sie Ihre CSS nach der autogenerated/qlik-styles.css Datei einbinden um ggf. CSS Attribute wie jqueryUI wieder im Original verfügbar zu haben. Mit dem folgenden Code wird auf dem DevHub ein Platzhalter für Drag und Drop eines Charts bereitgestellt, dafür ist die Klasse qvplaceholder verantwortlich. <div id=“QV01″ class=“qvplaceholder„></div>

 

# project.js

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 ) {

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

} );

Erläuterung:

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


Achten Sie darauf, dass diese Kommentare vorhanden sind wenn Sie über den DevHub Objekte in das Mashup einfügen wollen, da Qlik an diesen Stellen entsprechenden Code einfügt.