Power BI Neues Multi Card Visual in theme.json formatieren
Default Format für das neue Multi-Card-Visual definieren
Das „neue“ Multi-Card-Visual in Power BI ist super nützlich bei der Entwicklung von Reports und gleichzeitig super schlecht dokumentiert. Hier erfährst du wie du das Visual über die theme.json vernünftig vorbelegst.
Das Power BI Multi-Card Visual
Das Power BI Multi-Card Visual ist seit ein paar Jahren in Power und eins der neueren Visuals in der Palette. Es war erst lange Zeit in einer Experiment- bzw. Beta-Phase, ist aber mittlerweile der de-facto-Standard für die Erstellung von KPI-Karten. Damit hat es das „alte“ Card Visual abgelöst, das Usern lediglich das Hinzufügen einer Karte pro Visual erlaubte.

Das neue Card-Visual besticht nicht nur durch die Option mehrere KPIs in einem Visual darzustellen, sondern auch mit diversen Styling-Optionen, die Karten in verschiedenen States unterschiedlich erscheinen lassen.
Multi Card Visual Styles in theme.json definieren
Um das Visual – genau wie alle anderen Visuals – nicht ganz so öde im Default-Zustand aussehen zu lassen, macht es Sinn, ein paar Basic-Styles in der Theme JSON-Datei zu definieren. Das Problem dabei: Das Visual ist extrem schlecht dokumentiert und den richtigen Selektor zu finde, ist dabei nicht ganz so einfach.
Deshalb heißt es nun: THE BIG C Agency to the rescue!
Visual-Selektor
Das größte Problem ist dabei die Wahl des richtigen Selektors im JSON-Objekt. Basierend auf historischen Dokumentationen und Naming-Conventions könnte man vermuten, dass das Visual entweder card oder multiCard heißt. Aber auch Bezeichnungen wie multiRowCard oder cardEx sind gelegentlich im Umlauf. Die richtige Antwort ist:
Das Visual heißt cardVisual in einer Theme Datei.
Mit diesem Selektor können die einzelnen Styles definiert werden.

Definierbare Styles
Bei THE BIG C Agency definieren wir gerne folgende Aspekte eines Visuals als Standard:
- Visual Title (entweder dynamisch oder als Platzhalter)
- Schriftart (insbesondere für Custom Fonts wichtig)
- Background (Ja / Nein)
Für das cardVisual definieren wir noch folgende Eigenschaften:
- Karten-Border-Farbe
- Karten-Schritgröße
- Measure-Units (keine 1.000er Formatierung via 1K)
Die Formatierung der einzelnen Design-Elemente ist dabei dann ziemlich straight-forward. Man beachte dabei, dass hier erstmal nur „default“ State definiert wird. Andere States wie „selected“ oder „disabled“ müssen abweichend definiert werden.

"visualStyles": {
"cardVisual": {
"*": {
"value": [{
"$id": "default",
"fontFamily": "Poppins",
"font-size": 28,
"labelDisplayUnits": 1
}]
}
}
}
Einschränkungen in der Definition
Mit ein bisschen Trial-and-Error konnten wir aber relativ schnell feststellen, dass nicht alle unsere Styles aus der theme.json sich auch im Report manifestieren. So gibt es z.B. Probleme bei der Definition der Accent-Bar-Seite oder verschiedenen Margin-Werten.
Über Power BI Themes
Power BI Themes sind ein wichtiger Bestandteil jedes guten Report Environments. Sie sparen ungemein viel Arbeit bei der Erstellung von Report-Seiten und machen den Unterschied zwischen Draft- und Live-Optik. Ein Theme definiert globale Styles für alle im Report verwendeten Visuals und deren Unter-Elemente. Die Styles können dabei entweder Visual-übergreifend oder -spezifisch festgelegt werden. Dabei gibt es zwei Möglichkeiten ein Power BI Theme für eine Arbeitsmappe zu erstellen.
- Über das Power BI Desktop Interface – Das Interface bietet die Konfigurations-Oberfläche für eine Base-Theme. Globale Schrift- und Farb-Elemente können darin definiert werden. Allerdings ermöglicht es keine Optionen, die Visuals spezifisch zu formatieren oder Custom Fonts zu hinterlegen.
- Über eine JSON-Datei, die in eine Datei hereingeladen wird – Code-basierte Theme-Erstellung, die eine sehr spezifische Definition von Styles zulässt. Syntax ist stark verschachtelt und obliegt einem Microsoft-Standard.
Das Problem in dieser Konstellation ist, dass Option 1 für überragende Reports, zu wenig Konfigurationsmöglichkeiten bietet und Option 2 zumindest Basic-Codingskills erfordert.
