In 7 Schritten zu Ihrer ersten SAP Fiori App -...

In 7 Schritten zu Ihrer ersten SAP Fiori AppIn diesem Leitfaden beschreiben wir Ihnen ausführlich und Schritt für Schritt, wie Sie selbst eine SAP Fiori App zur Daten-visualisierung erstellen können – und zwar in nur einer Stunde!

7 Schritte zur SAP Fiori App

2

INHALTSVERZEICHNIS

Seite

Ausgangssituation 3

Schritt 1: Basis für die neue SAP Fiori Applikation 5

Schritt 2: Applikation-Komponenten hinzufügen 7

Schritt 3: Das Datenmodell anlegen 10

Schritt 4: Den View konfigurieren 11

Schritt 5: Die Filterkomponente hinzufügen 14

Schritt 6: Den Smartchart hinzufügen 17

Schritt 7: Annotations anlegen 19

Unsere Ansprechpartner 23

Weiterführende Links 23

2017 © Inspiricon AG

Die Inspiricon ist Ihr Geschäftspartner für SAP Business Intelligence im deutschsprachigen Markt. Profitieren Sie von unserem Fachwissen in SAP BI Consulting in den Bereichen Strategie, Organisation und Governance, den Prozessen sowie der BI Architektur. Ergänzt wird das Inspiricon-Portfolio durch Software- und Plattformentwicklung. Durch diese einmalige Kombination aus Beratungs-Erfahrung und Entwicklungsthemen können wir Sie in den Zeiten des digitalen Wandels unterstützen und beraten. RUN BETTER. RUN DIFFERENT.

Inspiricon AGOtto-Lilienthal-Str. 3671034 Böblingenwww.inspiricon.de

http://inspiricon.de/


3Inspiricon AG | Otto-Lilienthal-Str. 36 | 71034 Böblingen | www.inspiricon.de

zurück zum Inhaltsverzeichnis

IN 7 SCHRITTEN ZU IHRER ERSTEN SAP FIORI APPIn diesem Leitfaden beschreiben wir Ihnen ausführlich und Schritt für Schritt, wie Sie selbst eine SAP Fiori App zur Datenvisualisierung erstellen können – und zwar in nur einer Stunde!

AusgangssituationOft finden wir bei unseren Kunden folgende Situation vor: Es existiert bereits eine BEx Query zur Visualisierung der Daten im BEx Query Analyser.

Nun möchte unser Kunde jedoch den nächsten Schritt gehen: Die Daten sollen nicht nur im Query Analyzer zu sehen sein, sondern zusätzlich tabellarisch oder sogar als Grafik dargestellt werden. Die Visualisierung soll flexibel möglich sein, ganz unabhängig vom Gerät oder Browser (mobile Unterstützung).

Die Lösung lautet: SAP Fiori.Der Nachteil des Query Analyzers ist, dass man an einem PC gebunden ist. Mit SAP Fiori schafft man diese Abhängigkeit ab: man kann eine Fiori Applikation im Browser am PC oder auf mobilen Geräten (Tablets und Smartphones) ausführen. Und das ist nur ein Vorteil von SAP Fiori.

Mehr Informationen zu SAP Fiori

NACHHERVORHER

http://inspiricon.de/sap-fiori/




Das steht am Anfang: 1. Wir haben eine BEx Query.2. Diese liefert uns Daten aus einem Cube, in dem z. B. Sales-relevante Daten abgespeichert sind.3. Die BEx Query wurde als OData Service im SAP BW Gateway zur Verfügung gestellt.4. Für den OData Service werden wir eine SAP Fiori Applikation erstellen, die die Daten der Query in

tabellarischer Form anzeigt.

Der OData ServiceDer OData Service ist Voraussetzung für eine SAP Fiori Applikation.

OData ist das Protokoll, über das die Daten später aus der Query vom BW Server in die UI übertragen werden. In der UI können diese Daten visualisiert werden.

OData Service für die BW Query: Wir werden die Query als OData Web Service zur Verfügung stellen. D. h. die Daten können per Web Requests konsumiert werden, folglich können sie aus einer Fiori Applikation abgefragt werden.

Der OData Service wird mit dem SAPUI5 Smart Komponenten verbunden, um die Visualisierung der Daten zu ermöglichen.

Metadaten sind ein wichtiger Teil von OData, denn sie liefern bereits viele Informationen und automatische Funkti-onen, z. B. in unserem Fall: welche Kennzahlen und welche Dimensionen werden von der Query zurückgeliefert und was ist der jeweilige Datentyp?

Diese Daten ermöglichen, dass die Smart Komponenten (SmartTable und SmartChart) die Daten schon mit wenigen Einstellungen anzeigen können. Es werden beispielsweise auch bereits Filter- und Sortiermöglichkeiten angeboten.

Diese technischen Voraussetzungen benötigen wir, um die App zu erstellen:1. Ein SAP BW System, empfehlenswert ist SAP BW 7.4

Es funktioniert selbstverständlich auch mit älteren Versionen wie z. B. SAP BW 7.3. Nur die Art und Weise, wie man einen OData Service für ältere Versionen baut, ist anders. In SAP BW 7.4 ist dies ganz einfach, man muss nur eine Option setzen. Kontaktieren Sie uns gerne, wenn Sie eine ältere Version als SAP BW 7.4 implementiert haben.

2. Wir benötigen das SAP NetWeaver Gateway: es ermöglicht die Verbindung mit dem OData Service.3. Zu guter Letzt: eine Entwicklungsumgebung. Wir nutzen die SAP Web IDE oder alternativ das Eclipse HANA Studio.

In unserem Beispiel werden wir die SAP Web IDE verwenden. Mehr Informationen von SAP hierzu finden Sie hier.

Auf die SAP Web IDE greift man z. B. über das Hana Cloud Plattform Cockpit zu, unter dem Menüpunkt Services.

Für diese drei Komponenten benötigen Sie normalerweise keine zusätzlichen Lizenzen.

Ganz im Gegenteil zu SAP BusinessObjects: wenn Sie damit in SAP Fiori ein neues Dashboard bauen wollen, fallen zusätzliche Kosten an.

Falls Sie das SAP NetWeaver Gateway noch nicht konfiguriert haben oder es noch gar nicht benutzen, kann ebenfalls ein Mehraufwand entstehen.

Bei Fragen dazu stehen wir Ihnen gerne zur Seite!

https://www.sap.com/developer/topics/sap-webide.html

https://account.hanatrial.ondemand.com/cockpit

http://inspiricon.de/kontakt/




SCHRITT 1: BASIS FÜR DIE NEUE SAP FIORI APPLIKATION1. Melden Sie sich in Web IDE an.2. Unter Workspace legen Sie ein neues Projekt an:

3. Als Projekt-Template wählen wir New SAPUI5 Application:

Über den Button Next gelangen wir in den nächsten Schritt der Konfiguration.




4. Nun vergeben wir einen Projektnamen. Der Rest ist für den Moment noch nicht relevant.5. Als nächstes legen wir unseren ersten View an – das wird auch der einzige View in unserer Applikation sein,

denn wir wollen ja nur beispielhaft zeigen, wie man eine Applikation erstellt: 6. Mit dem Button Finish finalisieren wir den View und die Applikation wird erstellt.

Das Template, das wir ausgewählt haben, ist ein leeres Template. Das bedeutet, es wurde zwar eine SAP Fiori Applikati-on generiert, die gestartet werden kann, aber es wird noch nichts außer dem Titel angezeigt, wenn man sie startet.

Die Komponenten werden wir jetzt manuell hinzufügen.




SCHRITT 2: APPLIKATION-KOMPONENTEN HINZUFÜGENDen ODataService, den wir hierfür benötigen, haben wir schon im Vorfeld gebaut.

Details hierzu erhalten Sie gerne direkt bei uns!

Im Vorfeld sollte das BW System in der SAP Hana Cloud Plattform definiert werden. Das kann man im Hana Cloud Platform Cockpit unter Destinations umsetzen:

http://inspiricon.de/kontakt/




1. Da wir Daten aus einem SAP BW Datensystem laden möchten, müssen wir auch den Service, der uns diese Daten liefert, in unserem Projekt anlegen (New – OData Service):

2. Im Service-Katalog kann man nun das entsprechende Backend-System auswählen. In unserem Beispiel ist es das Inspiricon-WS.

3. Zurück zu unserem Service: Wir suchen unseren Service nach dem Namen auf. Wenn Sie den Service aufklappen, sehen Sie bereits die Datensets, die von diesem Service zurück geliefert werden. In unserem Fall ist das ein einziges Datenset, nämlich das, das von der Query geliefert wird.




4. Wenn wir nun das Datenset aufklappen, sehen wir auch die einzelnen Datenfelder:

Es ist wichtig, dass wir uns den Namen des Datensets merken. Denn diesen Namen müssen wir später auch in der Smart Komponenten angeben, damit unsere Komponenten „wissen“, welche Daten in der Komponente angezeigt werden sollen.

Auch einige Feldnamen sollten wir uns merken. Dann können wir diese Felder standardmäßig beim Öffnen der Applikation anzeigen lassen (z. B. als Default-Spalten der Tabelle).

5. Als nächstes müssen Sie die Buttons Next und Finish klicken – damit ist der Service im Projekt angelegt Ob der Service wirklich da ist, können Sie überprüfen, indem Sie die Datei manifest.json öffnen und dann auf Data Sources klicken:




SCHRITT 3: DAS DATENMODELL ANLEGEN Im nächsten Schritt erzeugen wir ein Datenmodell. Das Datenmodell „befiehlt“ der Applikation, wie sie mit diesem Service umgehen muss.1. Klicken Sie unter dem Reiter Models auf das Plus. Nun können Sie Ihren Daten-Service auswählen. Wichtig hierbei

ist, dass Sie den Haken bei Set as default model for the application setzen. Denn dadurch werden automatisch alle Komponenten an dieses Modell angebunden. D. h. wir müssen keine zusätzlichen Anbindungen programmieren. Diesen Vorgang schließen Sie mit einem Klick auf den Button OK ab.

2. Bei den Anbindungen müssen Sie auf folgende Einstellungen achten: Operation Mode: Server Sagt uns, wo gewisse Operationen (Filter, Sortieren etc.) ausgeführt werden, ob im Client – also der Fiori Appli-kation – oder im Backend. Wir empfehlen die Einstellung Server, denn dann wird die Sortierung auf dem Server gemacht und nicht in der UI. Besonders bei großen Datenmengen erzielt man so eine bessere Performance.

Binding Mode: TwoWay Das Datenmodell muss sich mit mehreren Komponenten synchronisieren.

3. Schließen Sie diese Aktion über den Button Save oben links ab (Wolke-Symbol).




SCHRITT 4: DEN VIEW KONFIGURIEREN 1. Nun können wir unseren View mit Komponenten ausstatten. Unser View ist Main.view.xml. Hier werden wir jetzt eine

Tabellenkomponente aufnehmen. In der View Komponente definieren wir die Attribute des Views und die Libraries, in denen die Komponente enthalten ist, die wir in unserer Applikation verwenden. Für unser Beispiel werden wir die sogenannten Smart Komponenten aus SAPUI5 verwenden. Diese Komponenten bieten komplexe Funktionalitäten sowie vielfältige Konfigurationsmöglichkeiten. Ersetzen Sie den Quellcode der Datei Main.view.xml mit folgendem Quellcode:

<core:View xmlns:core="sap.ui.core"

xmlns="sap.m"

xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"

xmlns:smartTable="sap.ui.comp.smarttable"

xmlns:smartChart="sap.ui.comp.smartchart"

xmlns:l="sap.ui.layout"

xmlns:sl="sap.ui.comp.navpopover"

xmlns:m="sap.m"

xmlns:html="http://www.w3.org/1999/xhtml"

xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"

controllerName="Webinar.controller.Main"

height="100%">

<smartTable:SmartTable id="smarttable"

entitySet="TBI_02_R33Results"

tableType="AnalyticalTable"

enableAutoBinding="true"

smartFilterId="smartFilterBar"

initiallyVisibleFields="TBI_DDIV,TBI_CN,A0EP63AIXTZ46C634DXM6OMRGR"

header="SalesData"

showRowCount="true"

useExportToExcel="false"

useVariantManagement="false"

useTablePersonalisation="true"

demandPopin="false"

editable="false">

<smartTable:layoutData>

<FlexItemData growFactor="2"/>

</smartTable:layoutData>

</smartTable:SmartTable>

</core:View>




In diesem Quellcode definieren wir in dem <core:View> Tag alle UI Libraries, die wir verwenden werden (auch die Filter- und Chart-Komponenten werden schon importiert, auch wenn wir sie noch nicht verwenden). Innerhalb des Tags <core:View> folgt dann die Definition unserer SmartTable.

2. Sehr wichtig sind auch die Attribute des SmartTables. Der SmartTable wird automatisch angebunden, hier müssen Sie nichts tun. Allerdings muss auch die Tabelle wissen, welches Datenset sie aus dem Model konsumieren muss. Wir nutzen das vorhin gemerkte Datenset „TBI_02_R33Results“, dies wird im Attribut entitySet angegeben.

3. Weiterhin müssen Sie den Tabellentyp angeben. UI5 unterstützt mehrere Tabellentypen: ResponsiveTable, Analytical-Table (das nutzen wir, denn wir wollen uns analytische Daten anschauen), GridTable oder TreeTable. Diese Tabelle ist für Desktop und Tablet optimiert, d. h. auf mobilen Geräten ist die Darstellung (noch) nicht optimal, für unser Beispiel jedoch ausreichend. Für eine mobil optimierte Tabelle müssen Sie ResponsiveTable auswählen. Beachten Sie folgende Einstellungen: Achten Sie darauf, dass das Attribut enableAutoBinding=“true” gesetzt wird. initiallyVisibleFields=“TBI_CN, TBI_CITY”: gibt an, welche Spalten initial gezeigt werden (diese Werte haben wir uns vorhin beim Anlegen des Services gemerkt). Relevant wäre natürlich für den Benutzer sowohl Merkmale als auch Kennzahlen anzugeben.

die anderen Attribute beziehen sich auf gewissen Felder oder Funktionen, die in der Smart Table an- oder ausgeschalten werden sollen.

4. Klicken Sie nun auf den Run Button (grüner Pfeil) in der Leiste oben, um sich die Applikation anzeigen zu lassen:




Die Daten wurden erfolgreich aus dem Backend geladen.

5. Über das Settings-Icon (Zahnrad oben links) gelangen wir zu den Settings. Dort können wir die Tabellenansicht konfigurieren.

6. Über Columns, Sort, Filter und Group lassen sich weitere Einstellungen vornehmen.

Ein großer Pluspunkt der SAP Fiori Smart Komponente: der User kann „live“, also während der Nutzung, die App noch nach seinen Wünschen konfigurieren.




SCHRITT 5: DIE FILTERKOMPONENTE HINZUFÜGEN1. Damit wir unsere Tabelle einfacher filtern können, wollen wir jetzt oberhalb der Tabelle Filterfunktionen ergänzen. Dazu

müssen wir die SmartFilterBar Komponente hinzufügen. Der Quellcode für unsere Main.view.xml Datei ist folgender:


xmlns="sap.m"






xmlns:m="sap.m"




height="100%">

<m:VBoxfitContainer="true">

<smartFilterBar:SmartFilterBar id="smartFilterBar"

entitySet="TBI_02_R33Results">

</smartFilterBar:SmartFilterBar>







header="SalesData"

showRowCount="true"




demandPopin="false"

editable="false">





</m:VBox>

</core:View>




Wir benötigen eine eindeutige ID und ein entitySet. Das entitySet ist das gleiche wie bei der SmartTable. Die ID ist sehr wichtig, weil dadurch die beiden Komponenten (SmartTable und SmartFilterBar) verbunden werden

und sie sich so automatisch synchronisieren. Die ID müssen wir also auch unter dem Attribut smartfilterId eintragen (smartfilterId=“smartFilterBar”).

2. Die beiden Komponenten haben wir in einen Layout-Container gepackt, in eine sogenannte VBox. VBox steht für Vertical Alignment Box und bedeutet, dass meine Komponenten vertikal ausgerichtet werden.

3. Nun starten wir die Applikation wieder und sehen, dass es oberhalb der Tabelle nun die Schaltfläche Filters gibt.4. Nun können wir die gewünschten Filter auswählen:

Über die Schaltflächen OK und Go wird die Selektion aktiviert.




Die Ansicht kann jetzt durch Filter angepasst werden:

5. Wenn Sie möchten, dass diese beiden Filterfelder schon standardmäßig angezeigt werden, müssen Sie das in der Konfiguration der SmartFilterBar festlegen:

Wenn wir nun die Applikation wieder starten, sind die Filtermöglichkeiten Country und City schon zu sehen.




SCHRITT 6: DEN SMARTCHART HINZUFÜGEN1. Der Quellcode für das SmartChart ähnelt dem der SmartTable. Wir fügen den Code in der Konfiguration unter

dem SmartTable Code ein. Das ist der Quellcode der Main.view.xml, nachdem wir die Chart Komponente aufnehmen:


xmlns="sap.m"






xmlns:m="sap.m"




height="100%">

<m:VBoxfitContainer="true">

<smartFilterBar:SmartFilterBar id="smartFilterBar"

entitySet="TBI_02_R33Results">

<smartFilterBar:controlConfiguration>

<smartFilterBar:ControlConfiguration

key="TBI_CN"visibleInAdvancedArea="true">

</smartFilterBar:ControlConfiguration>

<smartFilterBar:ControlConfiguration

key="TBI_CITY"visibleInAdvancedArea="true">

</smartFilterBar:ControlConfiguration>

</smartFilterBar:controlConfiguration>

</smartFilterBar:SmartFilterBar>







header="SalesData"

showRowCount="true"




demandPopin="false"

editable="false">








<smartChart:SmartChart



height="100%"



useChartPersonalisation="true"

header="SalesChart"

showFullScreenButton="true"

selectionMode="Multi"

showChartTooltip="true"

showDrillBreadcrumbs="false"

showDetailsButton="false"

showDrillButtons="true"

showSemanticNavigationButton="false">

<smartChart:layoutData>


</smartChart:layoutData>

</smartChart:SmartChart>

</m:VBox>

</core:View>

2. Für die korrekte Ausführung der SmartChart sind die Semantic Annotations zwingend notwendig. Das erklären wir im nächsten Schritt.




SCHRITT 7: ANNOTATIONS ANLEGENSemantic Annotations sind zusätzliche Informationen in einem OData Service, die uns weitere Details zu unseren Daten liefern.1. Unser OData Service liefert diese Annotations nicht mit, allerdings können wir das in der Web IDE anlegen.

Dazu benötigen wir einen neuen Folder, diesen nennen wir annotations:

2. Im Folder Annotations legen wir als nächstes eine Annotation File an:




Jede Annotation ist an einen Service gebunden, deshalb müssen wir den jeweils gewünschten Service auswählen:

3. Mit Klicks auf die Buttons Next und Finish wird die Datei erzeugt.4. Überprüfen können wir das über manifest.json. Im Reiter Data Sources sehen wir die neue Annotation, die mit unserer

Datenquelle verlinkt ist:




5. Mit Doppelklick auf annotation.xml gelangen wir in den visuellen Editor der Annotations.

6. Mit Klick auf das +-Zeichen (s. oben) müssen wir eine Chart-Annotation anlegen. Das ist im Prinzip die Info, dass man diese Daten zur Visualisierung in einem Chart verwenden kann.




7. Nun können wir mehrere Attribute setzen. Wir beginnen mit der ChartType, also der Art der Visualisierung. Wir wählen hierzu das Balkendiagramm (Column) aus:

Damit wir später auch Daten sehen, müssen Sie eine Kennzahl (Measures) sowie eine Dimension (Dimensions) angeben. Für Kennzahl und Dimension muss zunächst noch ein Item angelegt werden. Im Item können Sie dann den Attributsnamen angeben:




8. Speichern Sie nun und rufen Sie die Applikation abermals auf. Das Sales Chart wird jetzt mit angezeigt:

9. Auch das SmartChart lässt sich bequem während der Laufzeit anpassen. Dazu stehen uns u. a. diese Möglichkeiten

zur Verfügung: Grafikart ändern, z. B. in Kuchendiagramm usw. Das Databinding ändern, z. B. statt Country die Division anzeigen lassen.

DIE BEISPIEL-APP IST NUN FERTIG GESTELLT!Bei weiteren Fragen rund um SAP Fiori stehen unsere Experten gerne für Sie zur Verfügung.

Michael [email protected]+49 7031 714 660 0

Weiterführende Links: Beispiele für UI5 API für AnalyticalTable Analytical Table Example Annotation Modeler Annotation UI Vocabulary

Andrei [email protected]+49 7031 714 660 0

https://sapui5.netweaver.ondemand.com/explored.html

https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.table.AnalyticalTable.html

https://sapui5.hana.ondemand.com/explored.html#/sample/sap.ui.comp.sample.personalization.example5/preview

https://help.hana.ondemand.com/webide/frameset.htm?fe8ba75588964d3bbfc5c1bf96b04d1e.html

https://wiki.scn.sap.com/wiki/display/EmTech/OData+4.0+Vocabularies+-+SAP+UI

In 7 Schritten zu Ihrer ersten SAP Fiori App -...

Documents

Transcript of In 7 Schritten zu Ihrer ersten SAP Fiori App -...