Nachdem wir uns in einem vorherigen Blogbeitrag schon mit den Unterschieden zwischen dem Responsive und Canvas Layout auseinander gesetzt haben, gehen wir nun einen Schritt weiter und schauen uns die unterschiedlichen Container Widgets im Detail an. Dabei gehen wir der Frage nach, welche Besonderheiten die unterschiedlichen Container Widgets haben und welche Anwendungsszenarien für das jeweilige Widget sinnvoll sind. Dabei beschränken wir uns auf die Standard-Container, die in jeder SAC Story zur Verfügung stehen.
Hinweis: Die englischen SAC Begriffe sind auch unter deutschen Nutzern verbreiteter, daher verzichten wir innerhalb des Blog Beitrages auf die Verwendung der deutschen Begriffe.
|
Englisch |
Deutsch |
|
Canvas |
Grafikbereich |
|
Responsive |
Flexibel |
|
Page |
Seite |
|
Outline |
Gliederung |
|
Pagebook |
Buchseite |
|
Tabstrip |
Register |
|
Panel |
Bereich |
|
Flow Layout Panel |
Flusslayout-Bereich |
|
Section |
Abschnitt |
Tatsächlich bietet die SAP Analytics Cloud (SAC) alleine schon im Standard fünf durchaus unterschiedliche Container Widgets zur Auswahl. Jeder Container Typ hat dabei seine ganz speziellen Eigenschaften, Funktionen und Einschränkungen. An dieser Stelle muss noch vermerkt werden, dass der ausgewählte Pagetype, also Canvas oder Responsive, keine direkte Auswirkung auf die Container Funktionen hat. Dies bedeutet, dass sich Container Widgets an die Regeln des Pagetyps halten, aber alle Widgets im Container sich an die Regeln des Container halten.
Der wohl gängigste Container sind Panels. Wie alle Container können sie zum organisieren und gruppieren von anderen Widgets genutzt werden, aber auch viele optische Kniffe lassen sich mit Panels umsetzen. Zudem können Panels, im Gegensatz zu den meisten anderen Container Widgets, sinnvoll ineinander beziehungsweise in anderen Containern geschachtelt werden.
Panels haben keine speziellen Funktionen und verhalten sich wie das Canvas Layout. Alle Widgets im Panel werden via Pixel oder Prozentangaben im Panel ausgerichtet. Die Panels können über das Design oder CSS konzipiert werden. Als Besonderheit ist hier anzumerken, dass nur Panels den CSS Befehl “box-shadow” unterstützen.
Durch Panels strukturierte SAC Seite
Panels können zwar im Scripting angesprochen werden und ihnen stehen alle grundlegenden API Befehle zur Verfügung, allerdings bieten sie selbst kein Script-Event an. Daher kann kein Script gezielt durch einen Klick auf das Panel ausgeführt werden.
Der TabStrip Container ist im Grunde der Klassiker unter den Containern. Es bietet immer einen Navigationsbereich, in dem zwischen den verschiedenen Tabs gewechselt werden kann. Im Design Panel lässt sich der Tabstrip sowie der Navigationsbereich im speziellen optisch anpassen. Wem die Möglichkeiten nicht ausreichen, der wird im CSS fündig, da das Tab-Strip überraschend großzügig CSS Klassen zur Manipulation bereit hält.
Struktur eines TabStrips in der SAC
Der TabStrip lässt sich im Scripting ansprechen, besitzt aber auch ein eigenes “on-click” Scripting Event. Da es eigene API-Befehle hat wie “TABSTRIP.getTab()“ oder “TABSTRIP.getSelectedKey()” kann das Scripting sehr spezifisch für einzelne Tabs gestaltet werden.
Der TabStrip hat natürlich unverkennbare Ähnlichkeit zu den Story Pages. Dies ist historisch bedingt, da der TabStrip aus der “Application” stammt, während Pages eine Story-Funktion waren. Jetzt in Story 2.0 steht den Nutzern beides zur Verfügung und das hat so einige Vorteile. Ein TabStrip kann eine Page weiter unterteilen und ist recht simpel zu bedienen. Allerdings ist es ein optisches Werkzeug, verschiedene Widgets anzuordnen und aufzuteilen.
Das Pagebook ist um Grunde ein Tabstrip für mobile Endgeräte. Es bietet grundsätzlich die gleichen Funktionen, API-Befehle und Design Einstellungen allerdings ist der Navigationsbereich nicht oben angesiedelt und wird auch nicht mit Tabs dargestellt. Stattdessen finden sich im unteren Bereich Punkte, welche symbolisieren, wie viele Seiten zur Verfügung stehen und welche davon aktiv sind. Als Hauptkomponente eignet sich das Pagebook allerdings nur für Stories die ausschließlich auf mobilen Endgeräten konsumiert werden, oder zumindest auf Pages die nur im mobilen Einsatz angezeigt werden.
Dynamischer Bereich in einer Story mittels Pagebook
Allerdings muss ein Pagebook nicht als Hauptkomponente genutzt werden. Es lässt sich auch hervorragend als kleiner dynamischer Bereich nutzen. Die Punkte zur Navigation sind für Desktop-Nutzer dann immer noch recht schwer zu identifizieren, geschweige denn zu klicken. Mit etwas zusätzlichem Aufwand lässt sich das Pagebook aber auch via Scripting mit verständlichen Buttons und Icons oder mit einem Timer steuern. Das eröffnet neue kreative Möglichkeiten abseits der mobilen Nutzung. So kann neben einem Haupt-Chart ein dynamischer Bereich angezeigt werden, ohne eine mühselige Panel Lösung zu bauen.
Das Flow Layout Panel bietet keine Navigationsfunktionen und ähnelt daher mehr einem normalen Panel als dem Tabstrip oder Pagebook. Im Gegensatz zum Standard Panel besitzt es ein ähnliches Verhalten, wie Lanes im Responsive Layout. Allerdings mit deutlich weniger Funktionen und Einstellungsmöglichkeiten.
Die Widgets innerhalb eines Flow Layout Panels lassen sich nicht frei platzieren, sondern werden einfach, solange Platz vorhanden ist, hintereinander gesetzt. Sofern ein Widget gelöscht oder auf nicht sichtbar geschaltet wird, rücken alle Widgets auf. Auch wenn die Grundlogik, den Lanes des Responsive Layouts ähnelt, fehlen fast alle Einstellungen. Im Flow Layout Panel können lediglich die Breakpoints und die Responsive Regeln erstellt werden. Detaillierte Optionen wie die Richtung des “Flows” oder Position, Größe und Sichtbarkeit der Widgets können nicht in den Regeln konfiguriert werden.
Trotz der Einschränkungen ist das Flow Layout Panel in manchen Anwendungsszenarien äußerst nützlich. Gerade wenn bestimmte Bereiche einer Story auch auf kleineren Bildschirmen gut aussehen sollen, Trumpft das Flow Layout Panel auf.
Konfiguration der Responsive Regeln im Flow Layout Panel
Der Container Section bietet nochmals ganz andere Funktionen als die bisher genannten. Die Section erzeugt einen Bereich, welcher mit mindestens einem Filter versehen werden muss. Beim Filter werden bestimmte oder alle Merkmalsausprägungen ausgewählt. Alle Widgets, die sich in der Section befinden, können dann in den Merkmalsausprägungen angezeigt werden. Dies bedeutet wenn vier Merkmalsausprägungen zur Verfügung stehen, rotieren die Widgets auf Knopfdruck zeitgleich durch diese vier Ausprägungen.
Mit dem Section Container lassen sich sich Detailanalysen auf bestimmte Merkmale über mehrere Charts visualisieren. Man erkennt die Section an der punktierten blauen Seitenlinie und dem kleinen Steuerungsmenü, zum Durchwechseln der Ausprägungen. Allerdings ist die Erstellung etwas mühselig. Sobald ein Section Container Widget auf der Seite platziert wird, steht die Outline nicht mehr zur Verfügung. Ebenfalls ist die Section relativ starr und lässt sich lediglich in der Höhe anpassen. Zudem kann das Widget nicht immer verwendet werden, so ist es zum jetzigen Zeitpunkt nicht möglich Sections auf Responsive Layout Pages zu platzieren.
Section Container Widget auf einer Canvas Story Seite
Abschließend bleibt zu sagen, dass sich mit den Containern Widgets in der SAC viele verschiedene Anwendungsszenarien abdecken lassen. Jeder Container-Typ hat seine eigenen Stärken und Schwächen. Durch die Kombination der verschiedenen Typen und mit etwas Scripting lassen sich aber grundsätzlich alle Schwächen umgehen. Auch wenn das Panel, der wohl am meisten genutzte Container Typ ist, sollte man die übrigen nicht unterschätzen. Sofern diese in die Story integriert sind, werden sie zu wahren Hinguckern und bieten Funktionen, die Endanwender nicht mehr missen wollen.
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!