alles rund um Qlik Sense und QlikView
Den Custom Hub findet ihr auf GitHub: https://github.com/fadyheiba/CustomHubTemplate
Dies ist ein weiteres Beispiel warum ich Mashups so liebe.
Der Custom Hub ermöglicht Analyse wie in einer Webseite und bietet schnelleren Zugriff auf den Hub, da dieser in der Sidebar immer verfügbar ist.
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.
hier schon mal ein appetizer auf das Mashup was ich bald als erstes Template Online stelle:
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
Damit der Einstieg ein wenig einfacher fällt habe ich das Mashup Tutorial noch mal ein wenig ergänzt. Entsprechende Videos mit den Einzelnen Schritten wird es sicherlich auch bald geben.
Hier nochmal ein Überblick alle Lektionen:
Die neue Startseite zu meinem Lieblingsthema Mashups ist jetzt fertig. Sie bietet Ihnen einen schnelle Zugriff auf das Tutorial, die wichtigsten Ressourcen welche Sie für die Mashup Entwicklung benötigen.
Der Bereich wird natürlich weiterhin ausgebaut.
Die nächsten drei Kapitel vom Mashup Tutorial Einsteiger sind fertig:
Die letzen beiden Einheiten werden in kürze folgen.
Sie benötigen Icons aus Sense wie z.B das Icon. Sie wollen in Ihrem Mashup oder Extension die selben GUI Komponenten wie Sense selber nutzen? Mit diesem Framework erreichen Sie genau dies.
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:
Die nächsten 3 Einheiten sind in Arbeit.
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);
}
}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:
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.
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);
});
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;
}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
<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>bei Bedarf anpassen Overlay hat bei mir einen höheren z-index als das Chart und ist absolut rechts oben ausgerichtet
$( ".changeDimension" ).change(function() {
var str = "";
$('#' + $(this).attr('id')+" option:selected" ).each(function() {
str += $( this ).val(); });
app.variable.setStringValue($(this).attr('id'), str);
});1 Variable vDimensionField
1 Chart was als Dimension =[$(vDimensionField)] enthält fertig 🙂