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
Share

Vizlib die Visualisierungs Extension für Qlik Sense

Ich möchte heute noch mal die Extension Vizlib vorstellen, diese erweitert Qlik Sense um einige nette Visualisierungen. Vizlib gehört zu den Certified Exentsions von Qlik Sense, womit Sie für diese entsprechenden Support erhalten können (je nach Lizenzmodell ggf. weitere Kosten).

Mehr erfahren Sie auf https://www.vizlib.com/

weiterlesen
Share

Eigene Gruppe in den Proberties

Um eine eigene Gruppe innerhalb des Accordions für Ihre Extension zu erstellen nutzen Sie folgenden Code: 

define(["qlik", "jquery",'ng!$q'],

function ( qlik, $, $dict, $q) {
  'use strict';
  var MeineGruppe = {
    component: "expandable-items",
    label: "MeineGruppe",
    items: {
       // Reguläre Items aus der Hilfe ...
       // Siehe URL unten
    }
  };

  // Reguläre Settings
  var Settings = {
    uses: "settings",
    items: {
      general: {
        items: {
          showTitles: {
            defaultValue: false
          }
        }
      }
    }
  }
  
  return {

    type: "items",
    component: "accordion",
    items: {
      cSection: MeineGruppe,
      settings: Settings

    }
  };
} );

Um innerhalb des Beispiel Codes weitere Punkte hinzuzufügen folgen Sie diesem Link:

https://help.qlik.com/en-US/sense-developer/September2018/Subsystems/Extensions/Content/Sense_Extensions/extensions-reusing-properties.htm

Share

Variablen- und Feldliste in Extension Proberties

Um Variablen oder Felder in einer Qlik Extension zu nutzen müssen in der define ng!$q nutzen um innerhalb der Proberties auf die Promises von Qlik zugreifen zu können.

Beispiel:

define(["qlik", "jquery",'ng!$q'],

function ( qlik, $,  $q) {
	'use strict';

// Your Code

}

Funktion um die Variablenliste zu erhalten:

var getVariableList = function(){
  var defer = $q.defer();
  app.getList( 'VariableList', function ( items ) {
  defer.resolve( items.qVariableList.qItems.map( function ( item ) {
	return {
		value: item.qName,
		label: item.qName
		}
	} )
       );
     } );
  return defer.promise;
}

weiterlesen

Share

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); 
  }
}
Share

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);
});
Share

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

Qlik Sense – nützliche Extensions

Hier mal eine Liste der Extensions welche mir bis her keine Probleme beim Einsatz bereitet haben und welche Sense um viele wertvolle Funktionen ergänzen:

  1. Alternate States (Alternative Auswahlräume für Qlik Sense).
    Der Partner Akquinet stellt diese Extension kostenlos zur Verfügung. Es handelt sich hierbei im Gegensatz zu den anderen Extensions zu diesem Thema um eine funktionierende Variante. 
    https://github.com/q2g/q2g-ext-alternatestates
  2. Customer Report (Self Service Pivotierung)
    Climber Custom Report ist eine Extension die Ihnen erlaubt eine Pivottabelle zu erstellen, in welcher der Endanwender die Dimension und Formel für die Tabelle selber auswählen kann ohne in den Berabeitungsmodus zu wechseln. 
    http://branch.qlik.com/#!/project/57cd3f80cc816d99d6cbd4b6

  3. Variablen Eingabe an der Oberfläche
    Für die Eingabe von Variablen ist die bekannteste Extension “qsVariable” diese Extension ist auch eine der ersten Certified Extension. Die Extension finden Sie hier: 
    http://branch.qlik.com/#!/project/56728f52d1e497241ae697f8

    Ich möchte Sie an dieser Stelle auch auf meine eigene Extension zu diesem Thema aufmerksam machen, bnQSInput diese erhalten Sie hier: 
    http://branch.qlik.com/#!/project/5ac921580f9f4d1cc1e0c168
    Vorteile meiner Extension vs qsVariable: MultiSelect / kann mit führenden Nullen umgehen / RangeSlider / Vorbelegung der Werte durch ein Feld etc.
    Eine entsprechende Certified Extension werde ich für diese in kürze beantragen.

    weiterlesen

Share

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 
 
# Tools und Umgebung
Maen Stack: http://mean.io
 
 
Share

Icon Fonts – performante Bilder fürs Web

Icon Fonts sind Schriftarten die nur kleine Bilder sogenannte Icons statt Buchstaben, Ziffern etc. darstellen, ähnlich wie die bekannte Schriftart Webdings die man aus Word kennt.

Vorteile dieser Methode:

  • voll skalierbar
  • in der Farbe über Schriftfarbe anpassen
  • kleiner als eine Reguläre Bilddateien in entsprechenden Größen

es gibt bereits fertige Font Icon Sets im Web hier zwei der bekanntesten Beispiele:

Wie sie die entsprechenden Schriftarten per CSS einbinden erfahren Sie auf den jeweiligen Seiten. Sie können aber anhand von SVG Dateien auch eigene Icon Fonts erstellen, hierzu gibt es im Web entsprechende Generatoren:

https://www.google.de/#q=icon+font+generator

Beachten Sie das Sie auf den meisten Seiten ihre Icons automatisch für andere freigeben, um den Service nutzen zu können. Sie können also auch auf diesen Seiten weitere Icon Fonts herunterladen.

Nutzen Sie allerdings nicht zu viele verschiedene Webfonts auf einmal, da sonst wieder ihre Ladezeiten steigen. Der Vorteil dieser Methode liegt nämlich darin, dass Sie statt vieler kleiner Dateien nur eine laden was eleganter und schneller ist, hinzu kommen die oben genannten Vorteile.  weiterlesen

Share