SAP Analytics Cloud: Canvas & Responsive Layout Design im Vergleich

Responsive, Canvas, Applications, Story, Optimized Design Mode (ODM) - das Reporting in der SAP Analytics Cloud bietet eine Vielzahl an Möglichkeiten und Layouts, um schicke Dashboards zu bauen. Doch manchmal ist es gar nicht so leicht, die Unterschiede und Auswirkungen der unterschiedlichen Optionen zu begreifen. Daher wollen wir uns einmal anschauen, wie sich die einzelnen Optionen voneinander unterscheiden und welche Vor- oder Nachteile sie bieten.

Hinweis: Die englischen SAC Begriffe sind auch unter deutschen Nutzern verbreiteter, daher verzichten wir innerhalb des Blog Beitrages auf die Verwendung der deutschen Begriffe.

Story im Optimized Design Mode, die Auserwählte

Grundsätzlich gibt es die Auswahl zwischen Appications und Stories und innerhalb der Stories noch zwischen Story ODM und klassischer Story. Doch bei genauer Betrachtung ist diese Auswahl hinfällig. Im Kern wurden alle Funktionen der Applications bereits Mitte 2023 in die Stories ODM integriert. Auch wenn am Anfang nicht alles reibungslos lief, gibt es mittlerweile keinen Grund mehr auf Anwendungen zu setzen. Noch vernichtender fällt das Urteil gegen die Klassischen Stories aus. Die SAP hat angekündigt, dass es keine vollkommende funktionsparität geben wird und im selben Atemzug noch hinzugefügt, dass es ab 2025 nicht möglich sein wird, klassische Stories anzulegen.

 Hinweis Dialog bei Neuanlage einer Story

Doch keine Sorge, klassische Stories lassen sich weiterhin öffnen und konvertieren. Ein Datum einer vollkommenen Abschaltung der klassischen Stories wurde nicht genannt und ist zumindest 2024 noch in weiter Ferne.

Das sind schon gute Argumente die neuen Stories zu nutzen, doch das wichtigste Argument mag sein, dass nur Stories ODM von der SAP weiterentwickelt werden und alle neuen Reporting- und Dashboarding Funktionen auch nur in den Stories zur Verfügung stehen. Auch die nicht vollkommende funktionsparität kann seit dem Q3 Update 2024 hingenommen werden, da damit das letzte große fehlende Funktion - Data Blending - hinzugefügt wurde.

Responsive, Canvas, Grid… die Qual der Wahl

Sobald man eine Story anlegen will, hat man die Wahl zwischen einem Responsive, einem Canvas und einem Grid Design. Allerdings ist dies auch nur halb richtig, da das Grid Design ausschließlich den klassischen Stories vorbehalten ist.

Grid Design

Das Grid Design erinnert an eine Excel Mappe mit stark eingeschränkten Funktionsumfang. Nicht nur im direkten Vergleich mit Excel, sondern auch mit den anderen Story Designs.
Das Grid Design setzt auf Zellen und unterstützt hauptsächlich Tabellen.

Klassische Story im Grid Design

Auch wenn die neuen Stories kein Grid-Design unterstützen, gibt es einige Alternativen. Die erste wäre, eine Datenquelle im Data Analyzer zu öffnen und die gewünschten Aufrisse als Insight zu speichern. Wer auf das Excel Look and Feel nicht verzichten möchte, kann je nach Datenquelle, entweder das neue oder alte Excel Plugin verwenden. In diesem Blogbeitrag haben wir beide Excel Plugins ausführlich verglichen. Zu guter Letzt bleibt natürlich auch die Möglichkeit eine Tabelle in einer neuen Story anzubinden.

Canvas Design

Das Canvas Design ist vielseitig und komplex. Im Grunde ist hier der Name Programm, man fängt auf einer weißen Seite ohne Vorgaben an. Unter Design verliebten Entwicklern ist es die beliebteste Methode, Dashboards zu erstellen. Ob dynamisch skalierbar oder im Pixel Perfect Look, das Canvas Design macht es möglich. Diese Freiheit hat natürlich ihren Preis, das perfekte Canvas Dashboard ist eine Menge Arbeit. Vor allem wenn die Nutzergruppe Dashboard auf unterschiedlichen Endgeräten konsumiert, erhöht sich die Komplexität deutlich.

Fit to Device…

…ist die Standardeinstellung im Canvas Design und auch der Grundstein für skalierbare Dashboards. Bei dieser Einstellung richtet sich der Canvas, quasi die sichtbare Dashboard Fläche, immer anhand des Browserfenster, beziehungsweise anhand der mobilen App aus. Grundsätzlich besitzen fast alle Widgets in den Layout Optionen unter Größe und Postion die Eingabefelder Breite, Links, Rechts und Höhe, Oben, Unten. Der Wert kann jeweils in Pixel (px) oder Prozent (%) eingetragen werden, wobei immer einer der drei Werte auf automatisch gesetzt wird.

Layout Optionen Größe und Position für Widgets im Canvas Design

Höhe & Breite

• bezieht sich immer direkt auf das Widget
• unabhängig zu anderen Widgets

Links, Rechts & Oben, Unten

• bezieht sich immer auf den Abstand des Widgets zu übergreifenden Element
• Das übergreifende Element kann der Canvas allgemein sein oder ein Container, wie zum Beispiel ein Pagebook-Widget

Dashboarding mit SAP Analytics Cloud -
Laden Sie sich hier das Whitepaper herunter! 

Pixel Perfect

Im Canvas Design ist es möglich, sowohl die Dashboard Größe als auch die Größe und Position aller Elemente pixelgenau zu positionieren. Hier liegt die Betonung auf Position, da sich die einzelnen Elemente in den Widgets wie Chartbalken oder Texte weiterhin dynamisch anhand der Daten anpassen und nur teilweise steuerbar sind. Allerdings sind heutzutage Pixel Perfect Dashboards eher eine Seltenheit geworden und bieten dem Anwender auch nicht mehr ein zeitgemäßes Reporting Erlebnis.

Responsive Design

Das Responsive Design bietet weniger Freiräume, dafür ist die Umsetzung von Dashboards wesentlich einfacher. Auf den ersten Blick sieht es dem Canvas Design sehr ähnlich, allerdings liegt im Hintergrund ein Rasterlayout, welches mit der Verfügbaren Browser- oder App-Fläche skaliert. Dies hat zur Folge, dass sich alle auf dem Raster platzierten Widgets ebenfalls an die neue Größe anpassen.

Responsive Design mit eingeblendetem Raster

Bei der Skalierung im Responsive Design, müssen allerdings zwei wichtige Faktoren beachtet werden:

• Die einzelnen Felder im Raster ändern sich in Breite und Höhe. Dies hat zur Folge, dass sich die Widgets ebenfalls in Breite und Höhe ändern. Die Änderung ist allerdings nicht immer proportional zueinander, so kann es passieren, dass die Widgets je nach Auflösung eher länglich oder eher gestaucht dargestellt werden.
• Die Größe der Felder im Raster ist abhängig von der verfügbaren Breite. Die verfügbare Höhe hat keine Auswirkung und falls der vertikale Platz nicht reicht, werden einfach Scrollbalken eingeblendet.

Neben der Skalierung gibt es noch weitere Unterschiede zum Canvas Design. Die Größe und die Abstände der Widgets, die auf dem Raster platziert werden, können nicht in Pixel und Prozent angegeben werden. Stattdessen werden nur Breite, Links und Höhe, Oben mit Grid-Positionen vergeben.

Layout Optionen Größe und Position für Widgets im Responsive Design

Dies gilt allerdings nur für Widgets auf dem Raster Design, sofern ein Container Widget, wie ein Tabstrip oder Panel genutzt wird, werden die darin platzierten Widgets wieder über die Pixel- und Prozentangaben definiert.

Layout Optionen eines KPI Widgets innerhalb eines Container Widgets

Eine weitere Besonderheit des Responsive Designs sind die Lanes. Auch wenn eine neu angelegte Story erstmal nur eine Lane hat, können weitere vertikal oder horizontal hinzugefügt werden. Lanes gruppieren die im Raster platzierten Elemente, zudem können die Responsive Regeln für jede Lane einzeln konfiguriert werden. Diese Regeln definieren, wie die Widgets verschoben und angeordnet werden sollten, wenn sich die verfügbare Fläche ändert.

Konfiguration von Responsive Regeln innerhalb von Lanes

Mit all diesen Sonderoptionen wird schnell klar, dass das Responsive Design gerade für Dashboards geeignet ist, die auf verschiedenen Endgeräten konsumiert werden. Aber auch im Selfservice kann das Responsive Design glänzen. Durch das unterliegende Raster, fallen ungleichmäßige Widgets sofort auf und können einfach größer oder kleiner gezogen werden, ohne sich über genaue Pixel und Prozent Werte kümmern zu müssen.

Mix & Match

Wer bei den letzten Screenshots den Blick in die linke obere Ecke wandern lassen hat, konnte schon erkennen, dass Canvas und Responsive Design sich innerhalb einer Story nicht ausschließen müssen. Auch wenn die Anwendungsszenarien begrenzt sind, kann bei jeder neu angelegten Seite zwischen den beiden Designs entschieden werden. So kann zum Beispiel ein skalierbares Canvas Design für Laptops und Monitore mit hoher Auflösung ohne Scrollbalken umgesetzt werden. Während Tablets und Smartphones auf eine Inhaltlich reduzierte Seite im Responsive Design zugreifen. Welches Endgerät welche Seite angezeigt wird, kann dann über das Scripting ausgesteuert werden.

Zudem können manche Eigenschaften des Canvas oder Responsive Designs über Container-Widgets simuliert werden. Wir haben eben schon gesehen, dass das Bereichs Widget Canvas Eigenschaften in das Responsive Design bringt. Andersherum funktioniert es mit einem Flow Layout Panel Widget im Canvas Bereich. In beiden Fällen gelten immer noch die jeweiligen Regeln des Designs für das gesamte Dashboard und das platzierte Container-Widget. Für alles, was sich im Container Widget befindet, gelten allerdings die Regeln des Containers.

Eine klare Empfehlung…

…für ein Design kann man nicht erteilen. Beide haben ihre Vor- und Nachteile, je nachdem welche Anforderungen an das Dashboard gestellt werden.

Das Canvas Design kann bis in das kleinste Detail gesteuert werden. Ob nun skalierbare Dashboard, die den gesamten Inhalt immer im Bildausschnitt behalten, oder Pixel Perfect Reports umgesetzt werden müssen. Dafür ist es wesentlich aufwendiger optisch ansprechende Dashboards zu erstellen, da viele Prozent- / Pixelgenaue Detaileinstellungen nötig sind. Mit einigen Tricks können aber auch hier skalierbare Dashboards entstehen die auf jedem Endgerät gut aussehen.

Wer vertikale Scrollbalken nicht scheut, ist bestens im Responsive Design aufgehoben. Die Inhalte lassen sich wesentlich leichter optisch ansprechend platzieren, die Skalierung funktioniert “out-of-the-box” und es werden alle gängigen Endgeräte bzw. deren Auflösung unterstützt. Wenn die IT Templates und ein entsprechend konfiguriertes Theme zur Verfügung stellt, dann ist es kinderleicht ansprechende Dashboards im SelfService zu erstellen.

Mit der offiziellen Einführung der Story ODM Mitte 2023 wurde das Responsive Design deutlich aufgewertet. Wer das Design nur aus klassischen Stories kennt und damals nicht davon überzeugt war, sollte auf jeden Fall nochmals einen Blick riskieren…

Haben Sie Fragen zur SAP Analytics Cloud oder anderen Themen? Versuchen Sie das nötige Know-How in Ihrer Abteilung aufzubauen oder benötigen Sie Unterstützung bei einer konkreten Fragestellung? Nehmen Sie einfach Kontakt zu uns auf - wir freuen uns auf den Austausch mit Ihnen!