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.





1 Response to "Qlik Sense Theme - Zebra Striped Tables & Pivots"

  1. Roland Vecera says:

    Originale Defaultthemes liegen unter:
    C:\Program Files\Qlik\Sense\Client\assets\external\sense-themes-default

    Von dort kann man die Themes copy&paste nehmen, eine .qext ergänzen, das .css modifizieren und als Extension hinzufügen!

Kommentar veröffentlichen

heldendaten GmbH,2017