Fiori Master/Detail App mit Gateway-Anbindung über Cloud Connector

Mach mal eben schnell!

Um mal schnell eine Fiori-App zu implementieren, bietet die Web IDE in der SAP Cloud Platform die Möglichkeit, eine Fiori Master/Detail-App zu generieren. Diese Fiori App benötigt einen OData-Service, über welche die Daten aus dem Backend gelesen bzw. zurückgeschrieben werden. In häufig anzutreffenden Szenarien sind dies Services aus dem SAP ERP, die über das SAP Gateway als OData-Services bereitgestellt werden.

Im Gateway gibt es den Beispiel-OData Service GWSAMPLE_BASIC, der auf Basis des Enterprise Procurement Model (EPM) bereits die CRUDQ-Services für ein Datenmodell bestehend aus BusinessPartner, Contact, Product, SalesOrder und SalesOrderLineItem liefert.

OData Service GWSAMPLE_BASIC in Transaktion SEGW
OData Service GWSAMPLE_BASIC in Transaktion SEGW

Dieser Beispiel-OData Service kann genutzt werden, um schnell ein Master/Detail App mit Anbindung an ein lokales Gateway-System zu implementieren. Im SCN finden sich Beispiele, wie man GWSAMPLE_BASIC auf dem SAP Demo Gateway Server ES4 anbinden kann. Die Anbindung an ein lokales Gateway hat den Vorteil, dass man das Szenario einfach erweitern kann und man keine Integration mit einem “echten” Backend wie z.B. SAP ERP braucht. Die folgende Abbildung zeigt die Architektur des Szenarios.

Szenario Architektur
Szenario Architektur

In diesem Beitrag beschreibe ich die notwendigen Schritte, um das mal eben schnell zu implementieren.

Gateway Service hinzufügen

In Transaktion /IWFND/MAINT_SERVICE in der Toolbar den Button Add Service klicken.

Transaktion /IWFND/MAINT_SERVICE
Transaktion /IWFND/MAINT_SERVICE

Den GWSAMPLE_BASIC-Service anhand des Technical Service Names suchen und auf den Hyperlink klicken.

Service hinzufügen (1)
Service hinzufügen (1)

Im Popup den Service Name und Model Name ggf. anpassen. Der External Service Name GWSAMPLE_BASIC, unter der Service von der Fiori-App angesprochen wird, lässt sich nicht ändern.

Service hinzufügen (2)
Service hinzufügen (2)

System Alias hinzufügen

Button Add System Alias klicken.

System Alias hinzufügen (1)
System Alias hinzufügen (1)
System Alias hinzufügen (2)
System Alias hinzufügen (2)

Servicetest

Der Service ist nun über http erreichbar und kann über den Gateway Client (Transaktion /IWFND/GW_CLIENT) oder den Browser getestet werden. Die Url /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$metadata liefert die Metadaten des Service. Die SalesOrder-Liste ist über /sap/opu/odata/IWBEP/GWSAMPLE_BASIC/SalesOrderSet erreichbar.

Servicetest im SAP Gateway Client
Servicetest im SAP Gateway Client

 

Servicetest im Browser
Servicetest im Browser

 

Cloud Connector Konfiguration

Im Cloud Connector ist unter Cloud To On-Premise\Access Control  ein Mapping für das System anzulegen.

C loud Connector System Mapping
Cloud Connector System Mapping

Danach ist für dieses System Mapping die Resource freizugeben.

Cloud Connector Resourcefreigabe
Cloud Connector Resourcefreigabe

SAP Cloud Platform Destination

Die FioriApp benötigt eine Destination, um auf das im Cloud Connector definierte Gateway System zuzugreifen. Die Cloud Platform benutzt die Url sapid1http:80, um das richtige System im Cloud Connector zu ermitteln. Die Werte in der Url entsprechen dem Virtual Host und Virtual Port im Cloud Connector. In der Destination werden auch SAP-SystemId, Benutzername, Kennwort und Mandant für das Gateway hinterlegt.

Damit die Destination durch FioriApp benutzbar wird, muss zum einen die zusätzliche Property WebIDEEnabled aktibiert werden und zum anderem als WebIDEUsage odata_abap gesetzt werden. Der Wert odata_abap definiert die OData-Funktionalität eines SAP-Gateways.

SAP Cloud Platform Destination
SAP Cloud Platform Destination

Generierung der Fiori App

Für die Generierung der Fiori App ist die Web IDE zu starten und File\New\Project from Template auszuwählen.

Generierung der Fiori App - Template Selection
Generierung der Fiori App – Template Selection

Wenn die Verbindung zwischen Cloud Platform, Cloud Connector und Gateway System korrekt funktioniert, wird die gwsample_basic Destination und die auf dem System freigegebenen Odata-Services angezeigt.

Generierung der Fiori App – Data Connection
Generierung der Fiori App – Data Connection

Im Schritt Template Customization werden die EntitySets aus dem OData-Service an die Master- und Detail-View gebunden. In diesem Beispiel wird das SalesOrderSet für die Master-View und die SalesOrderItems für die Detail-View gebunden. Der GWSAMPLE_BASIC-Service bietet zahlreiche weitere Navigationsmöglichkeiten.

Generierung der Fiori App – Template Customization (1)
Generierung der Fiori App – Template Customization (1)

 

Generierung der Fiori App – Template Customization (2)
Generierung der Fiori App – Template Customization (2)

Geschafft!

Das war es schon! Die FioriApp lässt sich nun aus der Web IDE starten. Diese FioriApp kann nun nach Herzenslust auf Basis des GWSAMPLE_BASIC-Datenmodells erweitert werden.

Die fertige Fiori App
Die fertige Fiori App

 

Du interessierst dich für Fiori und hast Lust coole Projekte mit uns zu machen? Wir suchen dich! Schau doch mal in unserer Stellenbeschreibung vorbei.

Über den Autor

Rüdiger Lühr

Kommentar verfassen