QlikView + Qlik Sense Blog von Heldendaten

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!

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 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 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

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