Niklas Nebeling
21. Juli 2020

Wie Sie eine Excel-Datei vom SAP-Backend zu SAPUI5 transportieren

SAP IDoc

Arbeiten Sie im SAP- System mit eigens generierten Excel-Dateien und wollen in Zukunft auf SAPUI5 / Fiori umsteigen? Dann werden Sie wahrscheinlich früher oder später vor der Herausforderung stehen, diese Excel-Dateien aus dem Backend in das SAPUI5-Frontend zu transportieren. Dieser Artikel zeigt anhand eines praktischen Beispiels, wie Sie eine solche Excel erst zerlegen, dann per OData-Funktionsimport übermitteln und anschließend in JavaScript wieder zusammensetzen können.

Im Backend werden wir die ABAP Library abab2xlsx verwenden, im Frontend die Community Edition der JavaScript Library SheetJS.

Schritte im DDIC und der SEGW

Als Erstes wird im DDIC eine Struktur erstellt, die später als Rückgabetyp für einen OData Function Import dienen wird. Diese Struktur benötigt mindestens ein Feld für den Dateinamen und ein weiteres String-Feld für die in das Format Base64 konvertierte Excel-Datei.

DDIC Struktur für OData Rückgabetyp

DDIC Struktur für OData Rückgabetyp

Anschließend wird in der SEGW in einem OData-Service ein komplexer Typ angelegt, in dem die zuvor erstellte Struktur als ABAP-Strukturtyp angegeben wird.

SEGW Komplexer Typ für Excel-Datei

SEGW Komplexer Typ für Excel-Datei

Als Nächstes legen wir in unserem Service einen Funktionsimport an. Dieser kann später aus SAPUI5 aufgerufen werden und schickt dann eine Excel-Datei an das Frontend. Als Rückgabetyp hat dieser unseren zuvor angelegten komplexen Typ. Sie können für den Funktionsimport natürlich auch noch Parameter definieren, allerdings verzichten wir hier aus Gründen der Einfachheit darauf.

SEGW Funktionsimport

SEGW Funktionsimport

Anschließend speichern und Laufzeitobjekte erzeugen.

Unser Whitepaper zum Thema Anwendungsentwicklung mit SAPUI5 und Gateway

Whitepaper: Anwendungsentwicklung mit SAPUI5 und Gateway

Erfahren Sie hier alle Vorteile von SAPUI5 und Gateway.

Implementierung der ABAP-Methoden

Bevor wir den Funktionsimport nun implementieren, zuerst ein Blick auf die Hilfsklasse, welche im Rahmen dieses Beispiels eine Excel-Datei erzeugt und in das passende Format konvertiert. Wie Sie selbst Ihre Excel-Datei erzeugen, ist natürlich Ihnen überlassen. Der Fokus liegt hier auf der Konvertierung.

Die Klasse besitzt eine statische Methode namens “GET_EXCEL_DATA” mit folgenden Rückgabeparametern:

Rückgabewerte der Methode, welche die Excel erzeugt und konvertiert

Rückgabewerte der Methode, welche die Excel erzeugt und konvertiert

Der Quelltext der Methode sieht folgendermaßen aus:

Quelltext der Methode, welche die Excel erzeugt und konvertiert

Quelltext der Methode, welche die Excel erzeugt und konvertiert

Zuerst wird ein Excel-Objekt der Library abab2xlsx erzeugt, anschließend sollte dieses natürlich befüllt werden. Ist dies geschehen, wird mit Excel-Writer dieses Objekt in das Format XString konvertiert. Anschließend wird der Funktionsbaustein “SCMS_BASE64_ENCODE_STR” genutzt, um den XString in einen String des Formats Base64 zu konvertieren. Beide Rückgabewerte unserer Methode werden befüllt.

Nun wird der Funktionsimport implementiert, hierzu navigieren wir in die DPC_EXT-Klasse unseres OData-Services und redefinieren dort die Methode “/IWBEP/IF_MGW_APPL_SRV_RUNTIME~EXECUTE_ACTION” , falls dies nicht bereits geschehen ist.

Dort rufen wir im Falle unseres Funktionsimportnamens “GetExcel” die statische Methode auf und speichern deren Rückgabewerte in einer Variable vom Typ unserer DDIC-Struktur. Danach wird der Rückgabetyp der EXECUTE_ACTION-Methode “er_data” durch die Methode “copy_data_to_ref” befüllt.

Implementierung des Funktionsimports

Implementierung des Funktionsimports

Was im Frontend zu tun ist

Nun werfen wir einen Blick ins Frontend zu SAPUI5, wir benutzen in diesem Beispiel die Entwicklungsumgebung SAP Web IDE.

Als Erstes wird die Library SheetJS als Datei benötigt, diese können Sie hier herunterladen. Anschließend muss diese in SAPUI5 als Ressource bekannt gemacht werden. Dafür erstellen wir im Hauptordner unserer App einen Ordner “util” und legen die Datei dort ab.

Ablage der Library-Datei

Ablage der Library-Datei

Jetzt muss die Datei noch in der manifest.json als JavaScript-Ressource bekannt gemacht werden.

Angeben der Library-Datei als JS-Ressource in der manifest.json

Angeben der Library-Datei als JS-Ressource in der manifest.json

Im JavaScript-Controller unserer SAPUI5-App müssen wir der Library nun ein Alias geben, um im Coding Zugriff auf diese zu haben.

Bekanntmachen der Library im JS-Controller

Bekanntmachen der Library im JS-Controller

Zu guter Letzt nun die JavaScript-Methode, welche den OData-Funktionsimport aufruft und aus dessen Rückgabewert die Excel-Datei wieder zusammensetzt und als Browser-Download ausgibt:

JavaScript-Methode zum Zusammensetzen der Excel

JavaScript-Methode zum Zusammensetzen der Excel

Es werden die beiden Funktionen read und writeFile der Library SheetJS verwendet. Read liest den vom Funktionsimport zurückgegebenen Base64 String ein, konvertiert diesen in wieder in eine Excel-Datei und speichert diese in der Variablen wb (für “workbook”). WriteFile gibt dann diese Excel-Datei unter Angabe des Dateinamens als Download im Browser aus. ACHTUNG: das Alias “XLSX” muss im Coding groß geschrieben werden, sonst erkennt der Compiler es nicht.

Die Option “CellDates: true” wurde hier zusätzlich verwendet, da mit Excel-Dateien gearbeitet wurde, die Datumsfelder beinhalteten und diese Datumsfelder sonst nach dem Zusammensetzen eine falsche Formatierung aufwiesen.

SAPUI5 Entwicklercoaching

Technisches Coaching für Ihre Mitarbeiter in dem Thema SAPUI5. Wir besprechen mit Ihnen Ihre Herausforderungen und erarbeiten gemeinsam Lösungsansätze!

Ich hoffe, dieses kleine Tutorial konnte Ihnen weiterhelfen. Falls Interesse besteht, lasse ich einen zweiten Beitrag folgen, der zeigt, wie Sie Excel-Dateien in SAPUI5 hochladen und von dort an das Backend schicken können.

Bei Fragen, Verständnisproblemen oder Anmerkungen sind Sie herzlich dazu eingeladen, einen Kommentar dazulassen. Ich werde mein Bestes geben, Ihnen bei Ihrem individuellen Problem zu helfen.



Das könnte Sie auch interessieren

Häufig sollen in das SAP Portal Dateien eingebunden werden, die auf einem anderen Server liegen und dort auch aktualisiert werden. Die Dateien dann jeweils manuell von diesem anderen Server herunterzuladen […]

weiterlesen

"Cards" sind ein inzwischen verbreitetes Mittel zur benutzerfreundlichen Strukturierung von Informationen nach jeweiligem Kontext - also für meinen aktuellen Standort "Hauptbahnhof in Stuttgart" oder für mein Interesse "Ergebnisse von Armina […]

weiterlesen

„Erst dübeln, dann grübeln“ – keine gute Methodik für kosteneffiziente IT-Projekte mit zufriedenen Nutzern. Wenn erst am Ende des Wasserfallmodells festgestellt wird, dass die Endanwender Probleme mit dem neuen User […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Kontaktieren Sie uns!
Alexander Koessner-Maier
Alexander Kössner-Maier Kundenservice