Qlik Sense Theme - Zebra Striped Tables & Pivots

Seit Qlik Sense Februar 2018 gibt es die Möglichkeit eigene Themes für Qlik Sense zu bauen. Diese Woche habe ich eine interessante Frage bekommen: kann man die Zeilen in Tabellen und Pivottabellen alternierend einfärben um die Lesbarkeit zu erhöhen? JA, kann man!

Qlik Sense Default Objekte with Zebra stripes
Die Tabellen mit alternierend weißen und grauen Zeilen in Default Qlik Sense Objekten
Aus QlikView kennen wir das Feature einfach als Einstellung beim Objekt. In Qlik Sense gibt es dieses Property nicht, dafür hat man natürlich den Vorteil, dass man den Qlik Sense Webclient über CSS steuern kann.

QlikView vs. Qlik Sense Zebra Stripes
QlikView Stripes vs. Qlik Sense Table

Wie man Zebra Stripes mit CSS definiere kann findet man unter w3schools.com. Als Ausgangspunkt für ein Qlik Sense Theme habe ich das QDT-Theme vom Qlik Demo Team hergenommen. Dort sieht man in der theme.css bereits einige Styles definiert. Zusätzlich habe ich folgendes eingefügt.

css for Qlik Sense zebra stripes
.css Anweisung für Zebra Stripes
Das .zip File mit dem modifizierten Theme steht hier zum Download.

Um das Theme am Qlik Sense Server zu deployen, das .zip File in der QMC als Extension importieren.



Dann kann das Theme "qdt theme" über die Qlik Sense App Settings eingestellt werden.



Voilà - alle Tabellen werden jetzt schön gestreift dargestellt! Sogar wenn man das Balkendiagramm rechtsklickt und sagt "Daten anzeigen", wird die Tabelle gestreift. Das hat sogar mich positiv überrascht :-)





Folgende .css ergänzt auch ein Hovering, damit man die markierte Zeile besser sehen kann
 .qv-object-content-container .qv-object-content table tr:hover {
          background-color: #ffff99;
 }



Will man das Feature in allen Themes, ohne die Themes anzupassen, kann man die Styles am Ende der client.css ergänzen. Bitte bei jedem Update mitziehen.


In Qlik Sense Nov 2019 haben sich die .css Datei und Klassen geändert

Qlik Sense Nov 2019 CSS


C:\Program Files\Qlik\Sense\Client\views\common

.qv-object-content-container .qv-object-content table tr:nth-of-type(2n) {
    background: #f1f1f1;
}

.qv-object-content-container .qv-object-content table tr:hover {
    background-color: #ffff99;
}



Qlik Sense - QMC und Hub CSS Farbe setzen

Wer viele Tabs in seinem Browser offen hat, und zudem noch mehrere Qlik Sense Systeme (DEV, TEST, PROD) sein Eigen nennt, ist wohl manchmal verwirrt welche Qlik Sense Umgebung er gerade nutzt.

Leider gibt es kein direktes Feature um die verschiedenen Umgebungen farblich klar zu trennen, aber man kann sich die .css von QMC und HUB mal genauer ansehen.

Qlik Sense Hub und QMC in rot gefärbt

Als Helferlein dient hier am besten das Dev Tool in Chrome, welches man mittels F12 einblenden kann. Mit dem DOM-Inspektor sieht man, dass etwa die qmc.css den Style "qmc-toolbar" setzt.


Nicht ganz offensichtlich ist, wo denn die qmc.css im Filesystem liegt. Das war in Qlikview einfacher, weil wir den IIS/QVWS mit klaren Mountpoints hatten. Für den Qlik Sense Proxy Service findet man die Datei unter: C:\Program Files\Qlik\Sense\Client\qmc.css

Dort kann man zum Beispiel "Background-color: red;" für den Style "qmc-toolbar"einfügen.


.css Änderung bewirkt roten Balken in QMC



Für den Hub liegt die Datei unter C:\Program Files\Qlik\Sense\Client\hub\hub.css.  Dort ist es der Style "hub-toolbar".


Die .css ist komprimiert, und somit unangenehmer zu editieren. Wer aber zum Beispiel mit notepad++ nach "hub-toolbar{" sucht, sollte auch schnell fündig werden.





.css Änderung bewirkt roten Balken in Hub


heldendaten GmbH,2017