CubeServ Blog
Bleiben Sie auf dem neuesten Stand, rund um das Data Driven Business mit Tools für Analytics von SAP & Co. und verpassen Sie keine Neuigkeiten, Downloads & Veranstaltungen.

Custom Page Navigation mit SAC Composites

Wie Sie in SAP Analytics Cloud mit Composites Ihre eigene Seiten-Navigation erstellen

SAP hat Composites mit dem Release QRC4/2023 eingeführt. In diesem Artikel soll anhand eines Beispiels gezeigt werden, was derzeit mit Composites in der SAP Analytics Cloud möglich ist.

Eigene Seitennavigation in SAP Analytics Cloud

Was sind Composites?

Composites bieten die Möglichkeit, aus bestehenden Widgets eigene Komponenten zu erstellen. Dieses Feature ist bereits aus SAP Lumira bekannt und wird beispielsweise für Corporate Header, eigene Seitennavigation oder vordefinierte Charts verwendet. Composites werden im File Repository abgelegt und können dann in Stories verwendet werden.

Ein Vorteil von Composites ist, dass Änderungen zentral vorgenommen werden können. Stories verwenden immer die aktuelle Version eines Composites und erhalten somit automatisch alle Änderungen. So kann z.B. ein Logo in einem Corporate Header einfach zentral angepasst werden. Composites ermöglichen eine modulare und parallele Entwicklung.

Im Vergleich zur Entwicklung von Custom Widgets bieten Composites einen viel einfacheren Weg, neue Widgets in SAC zu erstellen.  

Fallbeispiel

In diesem Anwendungsfall wird ein Corporate Header mit eigener Seitennavigation in Form von klassischen Menüs sowie Firmenlogo und Zugriff auf zentrale Funktionen (Filter, Bookmarks, etc.) realisiert.  Es soll wie folgt aussehen:

Fallbeispiel corporate header

Ziel ist es den Header einmal zu implementieren und dann auf jeder Seite der Story nutzen zu können.

Aufbau von Composites

Ein Composite besteht in der Regel aus einer Seite mit einem oder mehreren Widgets, Skripten und einer definierten Schnittstelle. Diese setzt sich aus Funktionen und Ereignissen zusammen. Die Funktionen implementieren die Logik des Composites, z.B. das Öffnen und Schließen eines Menüs. Die Events werden im Code des Composites ausgelöst. In der Story können diesen Events Skripte zugeordnet werden, die beim Auslösen des Events ausgeführt werden, z.B. einen Bookmark aufrufen.

Implementierung des Fallbeispiels

Menü zur Seitennavigation

SAP Analytics Cloud bietet kein Menu Widget, das die folgende Darstellung umsetzt. Daher muss dieses Menü durch die Verwendung der vorhandenen Widgets realisiert werden.

Designansicht der Menüleiste

Für die Implementierung klassischer Menüs bieten sich die Widgets Button und ListBox an. Der Button dient zum Öffnen und Schließen der jeweiligen Menüliste. In der ListBox werden die einzelnen Menüpunkte aufgelistet, die mit den jeweiligen Seiten der Story verknüpft sind.  

Aufbau des Menüteils des Composites

Zu jedem der Menüpunkte wird hinterlegt, welche Seite der Story aufgerufen werden soll. Wählt der Anwender einen Menüpunkt aus wird das Event onPageSelect ausgelöst:

Composite.fireEvent("onPageSelect");

In der Story, die das Composite verwendet, können für diese Events Skripte definiert werden. Diese werde dann ausgeführt, wenn das Event ausgelöst wurde. Die Events sind in der Story über die Schaltfläche fx des Composites in der Outline wie bei Standard-Widgets verfügbar.

Im Script zum Event onPageSelect kann die Story über die Funktion getNextPage des Composites die ID der Seite abfragen, die aufgerufen werden soll, und diese dann anzeigen:

Application.setActivePage(Composite_Page_1.getNextPage());

Die Sichtbarkeit des Menüs, d.h. die Anzeige der jeweiligen Listbox, wird in den Events onClick des Buttons und onSelect der ListBox mit der Funktion setVisible der ListBox gesteuert. Dabei ist zu berücksichtigen, dass immer alle geöffneten Menüs geschlossen werden müssen, bevor eins geöffnet werden kann.

Um die Story über den Zustand des Composites zu informieren, werden die Events onMenuOpenSelect bzw, onMenuCloseSelect ausgelöst. In der Story kann dann die Größe des Composites entsprechend angepasst werden.  

Allgemeine Funktionen

Die allgemeinen Funktionen wie Filter, Bookmarks, Export etc. sollen ebenfalls in dem Header zentral zur Verfügung gestellt werden.

Implementiert werden diese Funktionen über Button Widgets.

In der Schnittstelle ist für jeden Button ein Event definiert, welches im onClick Event des Buttons ausgelöst wird.

Dort wird dann der jeweilige Code für die Funktion des Buttons hinterlegt. Beispielsweise

ExportToPDF_1.exportView();

Verwendung von CSS

Composites haben in der aktuellen Version keine Möglichkeit, CSS-Klassen im Composite selbst zu definieren. Im Fallbeispiel sollen die Schaltflächen für zentrale Funktionen wie PDF-Export, Lesezeichen etc. durch Icons dargestellt werden. Der Font SAP-icons bietet diese an, die Verwendung in SAC erfordert jedoch die Verwendung von CSS.

Die Lösung besteht darin, die CSS-Klassen in der Story zu definieren und im Composite eine Funktion InitializeCSS bereitzustellen, die diese CSS-Klassen den entsprechenden Widgets im Composite zuweist.

Definition der CSS Klasse in der Story

Zuweisung der CSS-Klassen in der Funktion InitializeCSS:

Button_PDF_Export.setCssClass("SAP_Icons");

Im OnInitialization Skript der ersten Page der Story wird die Funktion dann aufgerufen:

Composite_Page_1.initializeCSS();

Damit sind dann zur Laufzeit der Story die gewünschten Icons der Buttons sichtbar

Verwendung in der Story

In der Story muss das Composite in einem ersten Schritt importiert werden. Danach kann das Composite wie ein Standard-Widget zur Story hinzugefügt werden.

Wie bei den Standard-Widgets sind dann die Events wie bereits beschrieben zu implementieren.

Im Standard wird in der SAC die Seitennavigation über Tabs oder Dropdown gemacht. Diese lassen sich in den globalen Einstellungen abschalten.

Fazit

Bereits mit dem ersten Release von Composites ist die Erstellung komplexer wiederverwendbarer Komponenten aus den vorhandenen Widgets möglich. Das Beispiel zeigt, dass sich sowohl eine unternehmensweite einheitliche Darstellung des Firmenlogos und der grundlegenden Anwendungsfunktionen, als auch eine eigene Seitennavigation umsetzen lassen.

Dabei wird die Komplexität des Headers und der Menüs im Composite gekapselt. Er kann an einer Stelle geändert und verwaltet werden. Anstatt den Header auf jeder Seite Story mit allen Elementen und Funktionen erneut zu implementieren, kann nun ein Element zu jeder Seite hinzugefügt werden.

Custom Page Navigation in der SAC - Beispiel

Ausblick

Mit dem Release QRC2/2024 ist die nächste Ausbaustufe von Composites in der SAP Analytics Cloud geplant. Die neuen Möglichkeiten werden wir dann in einem weiteren Blog vorstellen.

Weitere Informationen zu SAP Analytics Cloud

Im Folgenden finden Sie weitere Informationen zu SAP Analytics Cloud, wie Trainings, Success Stories, Workshops und Webinare.

Sie haben weitere Fragen zu Composites in SAC?

Unsere Experten sind für Sie da.

Newsletter abonnieren

Bleiben Sie auf dem neuesten Stand, rund um das Data Driven Business mit Tools für Analytics von SAP & Co. und verpassen Sie keine Neuigkeiten, Downloads & Veranstaltungen. 

Autor
Expert Team

Blog Artikel unserer Experten

RSA1 nicht mehr verfügbar: Transaktion ZRSA1 jetzt kostenlos downloaden!

Composites bieten die Möglichkeit, aus bestehenden Widgets eigene Komponenten zu erstellen. Dieses Feature ist bereits aus SAP Lumira bekannt und wird beispielsweise für Corporate Header, eigene Seitennavigation oder vordefinierte Charts verwendet. Composites werden im File Repository abgelegt und können dann in Stories verwendet werden.

Moderne Planung mit SAP Datasphere und SAP Analytics Cloud

Wie funktioniert Planung mit SAP Datasphere und SAP Analytics Cloud (SAC)? SAP Datasphere (DSP) und SAP Analytics Cloud (SAC) sind zwei leistungsstarke Tools, die Ihnen helfen können, Ihre Prozesse zu optimieren. In diesem Kontext werden wir von unseren Kunden aber auch immer häufiger über die

CubeServ Group & Pyramid Analytics

CubeServ Group & Pyramid Analytics
Seit Juli 2023 ist die CubeServ Group Partner für die Konzeption und Implementierung der Pyramid Decision Intelligence Platform. Lesen Sie meinen Blog und finden Sie die Beweggründe für diese Partnerschaft heraus und wieso diese Partnerschaft auch für Sie von Vorteil sein kann.

Berichte im eigenen Design

Erstellen Sie SAP-Berichte in Ihrem Design

In SAP Analytics Cloud (SAC) gibt es diverse grafische Elemente, mit deren Hilfe Sie Daten verständlich darstellen können. Wie Sie eigene Grafikelemente in SAC integrieren und ihrem Design anpassen, zeigt unser Schulungsvideo.

Wenn ich nur wüsste….

Schön, dass Sie weiterlesen.  Aristoteles hat Neugier als Tugend verstanden. Im Privaten kennt man oft die intimsten Details über seine besten Freunde.  Aber wie sieht es im Geschäftsleben aus? Schauen wir uns ein Unternehmen an: Kennen Sie deren Strategie? Marktpositionierung? Eigentümer? aktuellen Herausforderungen? Und jetzt

We need to talk

We need to talk!

First of all, a Happy and successful New Year to everyone.  I know, you are all busy with Year End Closing but “We need to talk!” and I will keep it short. Well, quite some of you will connect this expression with something negative.  I

Rapid changes in HR needed

COVID-19 is a typical Black Swan event. Nobody could foresee the global impact on our business and daily life. Rapid changes happened in HR but also other areas. We all struggle to get a clear picture about the future. Optimism helps and let us hope

Best Practice Dashboard with SAP Analytics Cloud (SAC)

My colleagues and myself have talked a lot about Data Warehousing, Analytics, Reporting, Predictive and Planning in previous blogs and in several Webinars so far this year. However, we have not touched Best Practice in Dashboarding with SAP Analytics Cloud (SAC). Regardless of the solution,

Advanced Analytics

Wie Business Analytics erfolgreich gestalten?

Business Analytics einfacher ✅ und effektiver ✅ zu gestalten, ist herausfordernd. Ich stelle mit dieser Blog(serie) meine Lösungsansätze zur Diskussion. ✌