Präambel

Simplifier-Apps sind im Grunde UI5 / Fiori Apps und vollständig kompatibel mit UI5 Runtime, die auf Fiori Gateway Servern installiert ist.

Die folgende Richtlinie behandelt den Prozess zum Exportieren der App aus Simplifier und zum Importieren des Quellcodes in das ABAP Repository.

Voraussetzungen

• HTTPS – Der SAP Fiori Gateway Server sollte die Fiori Apps über eine sichere HTTP-Verbindung zum Client bereitstellen. Eine reine HTTP-Verbindung funktioniert in modernen Browsern nicht.
• CORS-Konfiguration: Die Simplifier CORS-Konfiguration sollte mit dem Hostnamen des SAP Fiori Gateways Servers erweitert werden, um die Ressourcennutzung zwischen Simplifier und SAP zu ermöglichen
• SAP-Berechtigungen: Für das Hochladen der Simplifier App benötigen Sie die folgenden Berechtigungsobjekte, die Ihrem Benutzer zugewiesen sind: S_DEVELOP, S_ICF_ADM, S_TCODE, S_TRANSPRT, S_CTS_ADMI und S_CTS_SADM
• ABAP Workbench Transport – Bereiten Sie einen ABAP Workbench Request vor, falls Sie ihn transportieren möchten, und notieren Sie die ID für die spätere Eingabe.

Cross-Origin Resource Sharing (CORS) ist ein HTTP-Header-basierter Mechanismus, der es einem Server ermöglicht, andere Ursprünge (Domäne, Schema oder Port) als seine eigenen anzugeben, von denen ein Browser das Laden von Ressourcen zulassen sollte. (Weitere Informationen)

1 CORS-Konfiguration vorbereiten

Simplifier selbst handhabt keine CORS- oder Proxy-Konfiguration – Sie müssen den SAP-Hostnamen direkt in Ihren Proxy einfügen.

In unserem Beispiel verwenden wir Traefik2 als HTTP(S) Proxy

1.1 Finden Sie den SAP-Hostnamen heraus, der von Ihren Clients verwendet wird

• Öffnen Sie Ihr Fiori Launchpad im Browser
• Zeigen Sie die Webseiten-URL in Ihrem Browserfenster an

Beachten Sie den öffentlichen Hostnamen und fügen Sie diesen zur CORS-Richtlinie hinzu

Access-Control-Allow-Origin

Der Antwortheader Access-Control-Allow-Origin gibt an, ob die Antwort für Ihr entsprechendes SAP-System freigegeben werden kann.

In unserem Beispiel ändern wir die Traefik-Konfiguration und fügen den SAP-Hostnamen am Anfang hinzu (die Reihenfolge spielt keine Rolle)

accessControlAllowOriginList = ["https://sapid405.simplifier.io", "https://yourSimplifierHost", "ionic://localhost"]

Nach dem Neustart des Proxy zum Neuladen der neuen Konfiguration ist die Sicherheitskonfiguration abgeschlossen.

2 – Simplifier App exportieren

Um den Simplifier App Quellcode zu exportieren, müssen Sie die entsprechende App öffnen und auf die App-Eigenschaften klicken:

Wählen Sie im Eigenschaftsdialog das Symbol App herunterladen und die Zielplattform “Self Hosted Web Application”

Drücken Sie Herunterladen, um den aktuellen Quellcode als ZIP-Datei zu exportieren.

Extrahieren Sie die ZIP-Datei in einen neuen Ordner – in diesem Beispiel ist es C:\TEMP\ui5

3 – Anwendung in das SAP Repository importieren

Um den Import zu starten, melden Sie sich im SAP GUI an und starten Sie den Report /UI5/UI5_REPOSITORY_LOAD mit der Transaktion SA38.

Klicken Sie auf die grüne Schaltfläche Ausführen in der linken oberen Ecke

Bestimmen Sie einen SAP-Anwendungsnamen – er beginnt normalerweise mit dem Z- oder Y-Namensraum und enthält keine Leerzeichen oder Sonderzeichen.

Wählen Sie den Unterordner www, in dem die ZIP-Datei zuvor extrahiert wurde.

Die Quelldateien werden hochgeladen, wie Sie im folgenden Protokoll sehen. Klicken Sie auf das Detail-Symbol in der linken oberen Ecke, um den Vorgang abzuschließen.

Füllen Sie die Beschreibung aus und weisen Sie einen Paketnamen und eine ABAP Workbench Request ID zu, wenn Sie sie später transportieren möchten.

4 – Anwendung testen und ausführen

Um die Anwendung zu starten, starten Sie SE80 und wählen Sie den Namen Ihrer hochgeladenen UI5 BSP-Anwendung aus und klicken Sie auf Testen, um sie im Browser zu öffnen.

Sie sehen die endgültige App im Browser: