Mashup Tutorial Einsteiger


Inhalt:

Basics

 

Mashup Tutorial

  1. Basefiles (benötige Dateien für Ihr Projekt)
  2. Objekte über den Dev-Hub hinzufügen (Klassen qvplaceholder und qvobject)
  3. Debuggen mit den Chrome Entwicklertools
  4. Skripten im alternativen Editor (Atom)
  5. Zugriff auf Frameworks welche in Sense vorhanden sind
  6. Charts mit jQuery Ein- und Ausblenden und Qlik.Resize() 
  7.  jQuery-UI Komponenten einbinden
  8. jQuery-UI Komponenten nutzen – Tabs
  9. Qlik Navigation erstellen – Auswahl (zurück / löschen / vorwärts)
  10. Berechnungen seitens des Mashups durchführen
  11. Variablen setzten
  12. 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