UI Erweiterungen für die C4C mittels SAP SCP Services

Autor: Said Moshref | Veröffentlicht: 24.04.2020

Im Rahmen von UI Erweiterungen in SAP Cloud for Customer (C4C) stößt man oftmals an die Grenzen der dort vorgesehenen Möglichkeiten. Als Entwickler hat man zwar die Möglichkeit über die PDI kundenindividuelle Anwendungen zu implementieren oder zu erweitern, aber zumeist sind auch dort die Grenzen schnell erreicht.

SAP hat aber zuletzt hierzu eine Architektur aufgezeigt, mittels der man diese Grenzen überwinden kann. Im Prinzip handelt es sich dabei um eine Kombination aus den Bestandteilen der vorhandenen SAP SCP Services.

Dies sind die wesentlichen Bestandteile:

  • SCP Identity Provider (Authentifizierung)
  • SAP WebIDE (Entwicklung der Fiori App)
  • SAP Cloud Platform Integration (Daten Integration)
  • SAP Cloud Connector (Verbindung nach on-Prem System *optional*)
  • SAP Cloud Platform Application (Hosting der App)

Aus diesen Komponenten kann man eine nahezu grenzen- und nahtlos übergehende Applikation erstellen, die man z.B. in einem Cloud for Customer System einbinden kann. Bezeichnet werden diese Applikationen als „Side by Side Extension“.

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 1: Überblick der Komponenten einer „Side by Side Extension

Mittels dieser Side by Side Extension könnte man z.B. einen bestehenden synchronen ERP SOAP Webservice erstellen, der den Dokumentenfluss im ERP in einem C4C System als Baumstruktur anzeigt. Genau dies wir nun exemplarisch aufgebaut.

Beispiel für die Integration des Dokumentenflusses

Zunächst wird der Endpunkt eines solchen SOAP Service über den Cloud Connector als Ressource freigeben. Dadurch können anschließend autorisierte Dienste z.B. die SAP Cloud Plattform Integration (SCPI) den Dienst aufrufen.

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 2: Endpunktfreigabe für SOAP Service

Der freigebende SOAP Service wird in der SCPI von einem iFlow aufgerufen. Der Endpunkt des iFlows, also der Aufruflink der nach der Verarbeitung des iFlows den SOAP Webservice aufruft, wird über die Destination von der SAP UI5 App gesteuert

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 3: Hinterlegung der Destination in er SAP UI5 App

Die UI5 App entnimmt aus dem eigenen GET Aufrufparamter die Verkaufsbeleg ID und verarbeitet sie im iFlow Aufruf.

var SalesOrderID = jQuery.sap.getUriParameters().get(„SalesOrderID“);

Das Ergebnis dieses Aufrufs wird dann in der App transformiert und an die UI5 Tree Komponente weitergegeben. Die UI5 App wird dabei in der C4C über einen URL Mashup aufgerufen.

Bei der Einstellung des URL Mashup’s muss ein passendes Port Binding ausgewählt werden. Für dieses Beispiel wird daher der „Document Information“ Port ausgewählt. Über diesen Port können Verkaufsbelegparameter empfangen und übergeben werden. Für unser Beispiel ist die externe Verkaufsbeleg Nummer interessant, da diese auch im ERP existiert und damit der Belegfluss identifizieren kann.

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 4: Definition der Parameterbindung
CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 5: Anforderungsparameter mit Parameterbindung

Die UI5 App entnimmt aus dem eigenen GET Aufrufparamter die Verkaufsbeleg ID und verarbeitet sie im iFlow Aufruf.

var SalesOrderID = jQuery.sap.getUriParameters().get(„SalesOrderID“);

Das Ergebnis dieses Aufrufs wird dann in der App transformiert und an die UI5 Tree Komponente weitergegeben. Die UI5 App wird dabei in der C4C über einen URL Mashup aufgerufen.

Bei der Einstellung des URL Mashup’s muss ein passendes Port Binding ausgewählt werden. Für dieses Beispiel wird daher der „Document Information“ Port ausgewählt. Über diesen Port können Verkaufsbelegparameter empfangen und übergeben werden. Für unser Beispiel ist die externe Verkaufsbeleg Nummer interessant, da diese auch im ERP existiert und damit der Belegfluss identifizieren kann.

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 6: Ablauf der Einbindung des Mashups in die Verkaufsbeleg Ansicht

Die Authentifizierung der App wird jetzt mit Hilfe von Single Sign On vom Identity Service Provider durchgeführt, so dass die Session des aktuellen SSO C4C User für den Aufruf des Mashup verwendet werden kann. Somit muss sich der User nicht erneut Authentifizieren und erhält dadurch einen nahtlosen Übergang von C4C zu der SCP UI5 App.

CX Blogartikel: SAP SCP UI5 Apps über einen Mashup in C4C einbinden. Abb. 7: Ergebnis: Darstellung des DocFlow

Was ist bei einer solchen App noch zu berücksichtigen:

  • Zwecks möglichen Click Jacking Attacken muss in der Index.html der SAP Ui5 App der Parameter „data-sap-ui-frameOptions=“allowed“ oder „trusted“ ergänzt werden. Bei letzterer Option muss dann auch noch ein Whitelist Service bereitgestellt werden.
  • Der angemeldete SSO User muss natürlich in der SCP der Rolle für das ausführen der App zugewiesen sein.

 Fazit

Die Side By Side Extension ist eine hilfreiche Architektur, mittels der man sehr viele Anforderungen abdecken kann. So kann man z.b. auch Core Data Service im S/4 Hana System entwickeln (oder ein bestehendes verwenden) und diesen in C4C publizieren. Mehr noch könnte man Daten aus anderen On-Prem Systemen oder auch Cloud Systemen beziehen und in C4C einbetten.

Der Blog hat Ihnen gefallen und Sie wollen gerne direkt per E-Mail benachrichtigt werden, wenn der nächste Artikel erscheint? Gerne geben wir Ihnen Bescheid!

Profilbild_Ansprechpartner-CX-Clog_Managing-Consultant-SAP-CX_Wolfgang-Baldt

Haben Sie Fragen?

Unser Managing Consultant SAP CX, Wolfgang Baldt, ist Ihr Ansprechpartner zu allen Themen rund um den Blog. Treten Sie in Kontakt mit ihm.

Profilbild_Ansprechpartner-CX-Clog_Managing-Consultant-SAP-CX_Wolfgang-Baldt

Haben Sie Fragen?

Unser Managing Consultant SAP CX, Wolfgang Baldt, ist Ihr Ansprechpartner zu allen Themen rund um den Blog. Treten Sie in Kontakt mit ihm.