Qlik Sense Theme - Zebra Striped Tables und Pivots

Aus QlikView kennen wir das Feature einfach als Einstellung beim Objekt. In Qlik Sense gibt es diese Property nicht, dafür hat man natürlich den Vorteil, dass man den Qlik Sense Webclient über CSS steuern kann. 

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

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! 

Qlik Sense erlaubt das Aktivieren von Hovering in jedem einzelnen Chart. Das wird leicht vergessen.

Folgende .css ergänzt auch im Theme autmatisch das Hovering, damit man die markierte Zeile besser sehen kann.

 

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

Will man das Feature in allen Themes einpflegen, 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. In Qlik Sense Feb 2023 muss man zusätzlich mit !important arbeiten, damit der Style übernommen wird.

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

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

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

 

Viel Spaß mit der neuen Möglichkeit bei der Darstellung von Tabellen und Pivottabellen!