Qlik Sense Mashup jetzt auf GIT

QlikView 4 QlikSense Mashup Beta jetzt online. 

Hier geht’s zum download: https://github.com/Ac1d0n3/myMashup

Es sind noch ein paar kleine Käfer in dem Mashup und die BETA läuft nur mit Qlik Sense > September 2018. Für Versionen davor muss in den URLs wieder das ! hinter der # entfernt werden. Dafür wird es im nächsten Update eine Variable geben.

Eine entsprechende Dokumentation wird später im Bereich Mashup Templates erfolgen. 

Für Developer reicht wahrscheinlich auch das Skript selber. Zudem werden Teile daraus auch im nächsten Tutorial erscheinen.

Viel Spaß mit dem Mashup.

Responsive Design mit CSS Grid und vmax

Egal ob Mashup, Extensions oder die eigene Webseite,…

Entweder Sie nutzen Bootstrap, ein Framework für Responsive Design oder:

Nutzen Sie CSS Grid für Ihr Layout und für Ihre Schrifgröße anstelle von pixel em oder Prozent die vmax dieses Attribut bezieht sich auf die größere Angabe von vMin und vMax. Diese beiden Attribute beziehen sich wiederum auf den Viewport sprich der Displaygröße des Gerätes mit dem man die Seite betrachtet.

Mit sogenannten Media Queries können Sie dafür sorgen, das Ihre Seite auf unterschiedlichen Geräten anders aussieht. Achten Sie darauf das Sie als erstes die Mobilansicht definieren:

weiterlesen

Mashup Tutorial Einsteiger fertig

Hier nochmal ein Überblick alle Lektionen:

Inhalt:

  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

Erste Einheiten zum Mashup Tutorial fertig

Die ersten Einheiten zum Mashup Tutorial sind jetzt verfügbar, werden aber ggf. noch erweitert. 

http://qlik.binom.net/4-developers/mashup-tutorial/

Wer schon mal reinschauen möchte:

  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 nutzen
  8. Berechnungen seitens des Mashups durchführen
  9. Variablen auslesen und setzten

Die nächsten 3 Einheiten sind in Arbeit.

Variablen setzen

Egal ob Extension oder Mashup.

Sie müssen beim setzen von Variablen entscheiden ob der Wert als ZAHL oder STRING gespeichert werden soll. Da in HTML aber immer alles erst mal STRING ist können Sie folgende kleine Funktion nutzen um Zahlen auch als zahlen zu speichern.

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 Farben im Mashup ändern

Als erstes benötigt man ein eigenes Template.

Dieses ist schnell im Extension Ordner erstellt:

Extensions/myMashupTheme

1. myMashupTheme.qext
2. theme.json

Inhalt der MashupTheme.qext:

{
	"name": "myMashupTheme",
	"description": "custom theme for myMashup",
	"type": "theme",
	"version": "1.0.0",
	"author": "Thomas Lindackers"
}

Inhalt der theme.json: 

https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-properties.htm

Die komplette Liste der Proberties findet man ganz unten auf der Seite.

Innerhalb des Mashups kann man das Theme mit folgenden Code anwenden:


qlik.theme.apply('myMashupTheme').then(function(result){

});

Nutzt man nun die Visualisierung API oder bindet Charts ein deren Farben nicht über die KPIs bestimmt werden, ändert man so die Farben.

Berechnng nur einmal ausführen

Es kommt immer wieder vor, das man für die Vorbelegung von Werten wie (z.B. min max Berechnung für die Einstellung eines Schiebregelers) nur eine einmalige Berechnung benötigt.

Erstellt man mit Hilfe des genericObjects eine Berechnung, wird diese allerdings bei jeder Selektion erneut ausgeführt. Dies kann zu unerwünschten Flackereffekten führen.

Um dieses Problem zu lösen können Sie das Session Objekt nach der Berechnung einfach entfernen, somit wird die Berechnung nur einmal ausgeführt.

Beispiel:


app.createGenericObject(JSON.parse('{' + genStr + '}'), function ( reply ) {
// Berechnung 
app.destroySessionObject(reply.qInfo.qId);
});

JavaScript Datum in Qlik Format umrechnen

Mit der folgen Funktion kann man ein JavaScript Date() in das Qlik Sense / View Format konvertieren:


function Date2QlikDate(aDate){
var nDate = new Date(aDate); 
var nMonth = nDate.getUTCMonth() +1; 
var nDay = nDate.getUTCDate() +1;
var nYear = nDate.getUTCFullYear();
// DMY to Modified Julian calculated with an extra subtraction of 2415019 - 153 for Q.
var nSerialDate =
parseInt(( 1461 * ( nYear + 4800 + parseInt(( nMonth - 14 ) / 12) ) ) / 4) +
parseInt(( 367 * ( nMonth - 2 - 12 * ( ( nMonth - 14 ) / 12 ) ) ) / 12) -
parseInt(( 3 * ( parseInt(( nYear + 4900 + parseInt(( nMonth - 14 ) / 12) ) / 100) ) ) / 4) +
nDay - 2415019 - 32075 - 153;

if (nSerialDate < 60) {
// Because of the 29-02-1900 bug, any serial date
nSerialDate--;
}
return nSerialDate;
}

Mashups & Extensions – Einstieg

# Extensions

Einen guten Einstieg zu diesem Thema bietet mein Kollege Stefan Walther an, es handelt sich hierbei um ein Tutorial mit entsprechenden Code Beispielen: https://github.com/stefanwalther/qliksense-extension-tutorial

Des weiteren finden Sie eine umfassende API Dokumentation unter:
Beachten Sie hierbei bitte die entsprechende Release Nummer in der URL.
 
(Weitere Beispiele und Hilfe folgen)
 

# Mashups
Der einfachste Einstieg in die Welt der Mashups ist der Einsatz von jQuery UI. Mit Hilfe dieses Frameworks  können Sie schnell und einfach Benutzergeführte Analysen erstellen.  Die Komponenten welche über jQuery bereit gestellt werden lassen sich sehr einfach mit Qlik Sense verknüpfen. Ein entsprechendes Training finden Sie hier Link, der Kurs ist entgegen der Beschreibung in der Regel in Deutsch.
 
 
# Wissen
HTML / CSS / JavaScript: http://selfhtml.org
Web Standards erfüllen: https://www.w3.org
 
 
# Frameworks
jQuery: http://selfhtml.org  
jQueryUI: https://www.w3.org 
anychart: https://www.anychart.com
 
# Tools und Umgebung
Maen Stack: http://mean.io
 
 

Cycle Groups with Sense Mashup V1

CaptureCycle
CaptureCycle2

HTML eine Selectbox welche die Werte enthält:

<div class="qvOverlay" style="right:10px"> <i class="fa fa-refresh"></i> 
<select class="changeDimension" id="vDimensionField"> 
<option value="MonthYear"> Month Year</option> 
<option value="Year"> Year </option> 
<option value="QuarterYear"> Quarter Year </option> 
<option value="Month"> Month </option> 
<option value="CompanyName"> Customer </option> 
<option value="ProductName"> Product </option> </select>
</div>

CSS-Code:

bei Bedarf anpassen Overlay hat bei mir einen höheren z-index als das Chart und ist absolut rechts oben ausgerichtet

JS (man kann über die ID den VariablenNamen mitgeben):

$( ".changeDimension" ).change(function() { 
var str = ""; 
$('#' + $(this).attr('id')+" option:selected" ).each(function() { 
  str += $( this ).val(); }); 
  app.variable.setStringValue($(this).attr('id'), str); 
});

Qlik:

1 Variable vDimensionField
1 Chart was als Dimension =[$(vDimensionField)] enthält fertig 🙂