
Inhalt:
Basics
- Einführung HTML und CSS
- Einführung in JavaScript
- Einführung Frameworks
- Einführung in JSON
- Die Dinge zusammenführen
- Der Dev-hub
Mashup Tutorial
- Basefiles (benötige Dateien für Ihr Projekt)
- Objekte über den Dev-Hub hinzufügen (Klassen qvplaceholder und qvobject)
- Debuggen mit den Chrome Entwicklertools
- Skripten im alternativen Editor (Atom)
- Zugriff auf Frameworks welche in Sense vorhanden sind
- Charts mit jQuery Ein- und Ausblenden und Qlik.Resize()
- jQuery-UI Komponenten einbinden
- jQuery-UI Komponenten nutzen – Tabs
- Qlik Navigation erstellen – Auswahl (zurück / löschen / vorwärts)
- Berechnungen seitens des Mashups durchführen
- Variablen setzten
- Numerisches Feld mit Schieberegler (jQueryUI) einschränken
Das Gesamtergebnis nach allen Einheiten:
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 id="nav">
<div id="back" class="meinButton">zurück</div>
<div id="clear" class="meinButton">löschen</div>
<div id="forward" class="meinButton">vorwärts</div>
</div>
<div id="tabContainer">
<ul>
<li><a href="#tabs-1">Seite 1</a></li>
<li><a href="#tabs-2">Seite 2</a></li>
</ul>
<div id="tabs-1">
<div id="output"> Umsatz: <span class="umsatz"></span></div>
<div id="setVariable">
aktueller Wert: "<span class="author"></span>" neuer Wert: <input id="varValue" name="varValue" />
<div id="save" class="meinButton">speichern</div>
</div>
<div id="showHide" class="meinButton">Chart ein-/ausblenden</div>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<div class="flex-container">
<div id="QV01" class="qvobject"></div>
<div id="QV02" class="qvobject"></div>
<div id="QV03" class="qvobject hideObject"></div>
<div id="QV04" class="qvobject"></div>
<div id="QV05" class="qvobject"></div>
</div>
</div>
<div id="tabs-2" class="flex-container">
<div class="flex-container">
<div id="QV06" class="qvobject"></div>
</div>
</div>
</div>
</body></html>
project.css
@import url('css/jquery-ui.min.css');
.flex-container {
display: flex;
flex-wrap: wrap;
margin: 0 45px 45px 0;
}
.qvplaceholder, .qvobject {
flex: 1 1 auto;
height: 300px;
min-width: 250px;
margin: 45px 0 0 45px;
}
.meinButton{
border: 1px solid #afafaf;
background-color: #efefef;
color: #333;
cursor: pointer;
display: inline-block;
padding: 5px;
margin: 2px;
}
.meinButton:hover{
background-color: #333;
color:#fff
}
.hideObject{
display: none;
}
#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;
}
project.js
/*
* 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 ) {
function setVariable( name, val, useString = false) {
if ( !app ) { app = getQlikApp(); }
if(useString === true) { app.variable.setStringValue(name,val);
} else {
if(!isNaN(val)) app.variable.setNumValue(name, parseFloat(val));
else app.variable.setStringValue(name,val);
}
}
qlik.setOnError( function ( error ) {
$( '#popupText' ).append( error.message + "<br>" );
$( '#popup' ).fadeIn( 1000 );
} );
$( "#closePopup" ).click( function () {
$( '#popup' ).hide();
} );
//callbacks -- inserted here --
//open apps -- inserted here --
var app = qlik.openApp('Stage 3 - Layout DE.qvf', config);
//get objects -- inserted here --
app.getObject('QV04','keQuTJ');
app.getObject('QV06','TtFdH');
app.getObject('QV05','MjXwv');
app.getObject('QV03','tEUkeF');
app.getObject('QV02','bMZeARw');
app.getObject('QV01','mhPzJ');
//create cubes and lists -- inserted here --
console.log(angular.version);
console.log($.fn.jquery);
$('#showHide').on('click',function(){
//was passieren soll
//$('#QV02').toggle();
if($('#QV02').is(':visible')){
$('#QV02').hide();
$('#QV03').show();
}else{
$('#QV03').hide();
$('#QV02').show();
}
qlik.resize();
});
$('#tabContainer').tabs({
activate: function( event, ui ) {
qlik.resize();
}
});
$('.meinButton').button();
$('#back').on('click',function(){
app.back();
});
$('#clear').on('click',function(){
app.clearAll();
});
$('#forward').on('click',function(){
app.forward();
});
app.createGenericObject( {
user: {
qStringExpression: "=QVUser ()"
},
umsatz: {
qStringExpression: "=sum([Umsatz pro Bestellzeile])"
},
umsatznum: {
qValueExpression: "=sum([Umsatz pro Bestellzeile])"
},
author: {
qStringExpression: "=Author"
}
}, function ( reply ) {
if ( reply.user ) {
$( ".user" ).html(reply.user);
}
$( ".umsatz" ).html(reply.umsatz);
$( ".author" ).html(reply.author);
});
$('#save').on('click',function(){
setVariable('Author',$('#varValue').val())
});
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
var scrStr = ">" + ui.values[ 0 ] + "<" + ui.values[ 1 ] ;
app.field('Katalogpreis').selectMatch(scrStr,false);
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
Styling Up
Coming soon