Pixel Perfect PowerBI - Layout-Planer WebApp

PixelPerfectPbi ist eine browserbasierte Anwendung zur pixelgenauen Planung von Power-BI-Layouts. Mit dem Tool lassen sich Positionen und Abmessungen von Visualisierungen, Filtern, Karten und weiteren Berichtselementen auf einer frei konfigurierbaren Arbeitsfläche festlegen.

Das vollständige Seitenlayout kann zunächst außerhalb von Power BI entworfen und angepasst werden. Die ermittelten Positions- und Größenwerte werden anschließend einmalig in Power BI übertragen. Dadurch entsteht eine verlässliche Layoutgrundlage, die auch bei späteren Änderungen übersichtlich und konsistent bleibt.

Ausgangslage

Die präzise Ausrichtung von Visualisierungen in Power BI ist häufig zeitaufwendig. Berichtselemente lassen sich zwar direkt auf der Berichtsseite verschieben und skalieren, kleinere Abweichungen bei Position, Größe oder Abstand sind dabei jedoch schnell sichtbar und können das gesamte Dashboard unruhig oder unprofessionell wirken lassen. Insbesondere bei komplexeren Layouts müssen Breiten, Höhen, Abstände und Positionen häufig manuell berechnet werden. Werden einzelne Bereiche nachträglich verändert, müssen die Positionen mehrerer angrenzender Elemente erneut angepasst werden. Dadurch entstehen wiederholte Berechnungen, zahlreiche manuelle Korrekturen und eine eingeschränkte Übersicht über das vollständige Seitenlayout. Eine separate Planungsgrundlage, in der sämtliche Elemente pixelgenau angeordnet und Änderungen direkt nachvollzogen werden können, ist in Power BI standardmäßig nicht vorhanden.

Definierte Lösung

Entwickelt wurde eine interaktive Webanwendung, mit der Power-BI-Seiten und Layouts für andere Visualisierungstools auf einem frei definierbaren Pixelraster geplant werden können. Die einzelnen Elemente werden als Rechtecke angelegt und entsprechend ihrer späteren Position und Größe auf der Arbeitsfläche angeordnet.

Breite, Höhe und Position jedes Elements können direkt verändert oder numerisch festgelegt werden. Zusätzlich lassen sich die Flächen individuell benennen und farblich kennzeichnen. Dadurch können unterschiedliche Bereiche, Visualisierungen oder funktionale Gruppen bereits während der Layoutplanung übersichtlich voneinander abgegrenzt werden.

Ein konfigurierbares Raster unterstützt die gleichmäßige Ausrichtung und sorgt für konsistente Abstände. Für eine schnellere Layoutentwicklung können vorhandene Flächen dupliziert und mit einem definierten Abstand nach oben, unten, links oder rechts positioniert werden. Dadurch lassen sich beispielsweise gleich große Diagramme, Karten oder Filterbereiche ohne erneute Berechnung systematisch anordnen.

Das fertige Layout dient anschließend als Vorlage für die Umsetzung im jeweiligen Visualisierungstool. Eine direkte automatisierte Übertragung in Power BI ist technisch nicht vorgesehen. Die Werte für Position und Größe können jedoch innerhalb weniger Minuten übernommen werden.

Ergebnis & Mehrwert

Mit PixelPerfectPbi wurde ein spezialisiertes Planungstool entwickelt, das die Erstellung professioneller und konsistenter Power-BI-Layouts vereinfacht. Berichtselemente können außerhalb von Power BI strukturiert angeordnet, exakt ausgerichtet und gemeinsam angepasst werden.

Statt Positionen und Abstände wiederholt auf Papier oder mit einzelnen Berechnungen festzulegen, entsteht eine zentrale visuelle Layoutgrundlage. Änderungen an einzelnen Bereichen lassen sich direkt im Zusammenhang mit dem vollständigen Seitenaufbau beurteilen.

Abhängige Elemente können verschoben, dupliziert oder neu ausgerichtet werden, ohne sämtliche Werte erneut manuell berechnen zu müssen. Besonders bei wiederkehrenden Layoutstrukturen reduziert dies den Planungsaufwand deutlich.

Die einmalige Übertragung der festgelegten Positions- und Größenwerte in Power BI bleibt zwar erforderlich, lässt sich auf Basis des fertigen Layouts jedoch innerhalb weniger Minuten durchführen.

Das Ergebnis sind gleichmäßige Abstände, konsistente Größen und eine deutlich übersichtlichere Entwicklung von Power-BI-Berichtsseiten. Gleichzeitig können Layouts gespeichert, erneut verwendet und mit anderen Personen geteilt werden.

Technische Ausgestaltung

Link: https://pixelperfectpowerbi.heiselanalytics.cloud/

PixelPerfectPbi wurde als vollständig clientseitige JavaScript-Webanwendung entwickelt. JavaScript übernimmt die gesamte Anwendungslogik, darunter das Erstellen, Verschieben, Skalieren, Benennen, Einfärben, Duplizieren und Ausrichten der Flächen. Auch die Berechnung von Positionen, Größen und Abständen erfolgt direkt im Browser. HTML bildet die strukturelle Grundlage der Benutzeroberfläche, während CSS für die visuelle Gestaltung verantwortlich ist.

Die Anwendung benötigt weder eine Datenbank noch Benutzerkonten oder ein serverseitiges Backend. Sämtliche Layoutinformationen werden lokal im Browser verarbeitet und nicht an einen Anwendungsserver übertragen. Dazu zählen unter anderem die Größe der Arbeitsfläche, das verwendete Raster sowie Name, Farbe, Position, Abmessungen und Sperrstatus der einzelnen Flächen.

Eine Besonderheit der Anwendung ist die Speicherung des vollständigen Layouts direkt in der URL. Die aktuelle Layoutkonfiguration wird dafür in ein kompaktes Format umgewandelt und im Fragment der URL hinterlegt. Dieser Bereich befindet sich hinter dem #-Zeichen und wird ausschließlich durch den Browser verarbeitet. Die enthaltenen Layoutdaten werden dadurch nicht als Teil einer Serveranfrage an GitHub Pages oder einen anderen Anwendungsserver übertragen.

Die URL in der Adresszeile wird nach jeder Änderung am Layout automatisch aktualisiert. Dadurch enthält der aktuell angezeigte Link jederzeit den neuesten Stand der Bearbeitung. Wird dieser Link kopiert und auf einem anderen Gerät oder in einem anderen Browser geöffnet, stellt PixelPerfectPbi das darin enthaltene Layout unmittelbar wieder her. Eine separate Speicherung oder Anmeldung ist dafür nicht erforderlich.

Ein geteilter Link bildet dabei den Stand zum Zeitpunkt des Kopierens ab. Werden anschließend weitere Änderungen vorgenommen, aktualisiert sich die URL im geöffneten Browser erneut und kann als neue Version des Layouts weitergegeben werden. Ergänzend können Layouts als JSON-Datei exportiert und später wieder importiert werden.

Die Anwendung wird als statische Website über GitHub Pages bereitgestellt. Der vollständige Quellcode wird in einem GitHub-Repository versioniert. Sobald eine Änderung in den Main-Branch übertragen wird, erstellt ein GitHub-Actions-Workflow automatisch eine neue Version der Website und veröffentlicht diese. Dadurch entspricht die öffentlich erreichbare Anwendung stets dem aktuellen Stand des Main-Branches, ohne dass ein manuelles Deployment erforderlich ist.

Die projektspezifische Subdomain wird über Cloudflare mit der GitHub-Pages-Website verbunden. Cloudflare übernimmt die Verwaltung der Domainverbindung und die verschlüsselte Bereitstellung über HTTPS. Da die Anwendung vollständig statisch und clientseitig ausgeführt wird, ist keine eigene Serverinfrastruktur für den produktiven Betrieb erforderlich.

Eingesetzte Technologien: JavaScript · HTML · CSS · JSON · GitHub · GitHub Actions · GitHub Pages · Cloudflare