Fiori für ABAP - Excel Upload
Du möchtest über Excel Daten in deine Fiori Anwendung importieren und nicht unbedingt die komplette Logik im Backend entwickeln? Schauen wir uns den Spreadsheet Importer und die Funktion an.
Inhaltsverzeichnis
In diesem Artikel schauen wir uns an, wie wir den Spreadsheet-Import von Marian Zeis in unsere Anwendung implementieren, um damit einen sehr leichten Weg zu haben, neue Datensätze automatisiert über Excel-Sheets anzulegen.
Einleitung
Bisher haben wir in unserer Sales App Datensätze vor allem manuell angelegt oder über eine Klasse generiert. Dabei ging es immer um die initiale Generierung von Items und nicht um die Wartung oder das Hinzufügen von Items während der Standardnutzung. Um unseren Anwendern nun eine Funktion zur Verfügung zu stellen, mit der sie massenhaft neue Einträge anlegen können, wollen wir einen Excel-Upload in unserer Anwendung bereitstellen. Dabei werden wir auf das Open-Source-Projekt für den Spreadsheet-Importer zurückgreifen und dieses in unserer Anwendung implementieren, um uns einen großen Implementierungsaufwand zu sparen.
Spreadsheet Importer
Wieso verwenden wir eigentlich dieses Plugin für die Implementierung eines Excel-Uploads? Könnten wir dazu nicht einfach einen Upload-Button in unserer Anwendung erzeugen, die Excel-Datei hochladen und die Implementierung in unserer Action im RAP-Objekt durchführen? Grundsätzlich ist dies möglich. Es erfordert aber einen höheren manuellen Aufwand, das Excel-Sheet zu zerlegen und für die Strukturen vorzubereiten, dementsprechend aufwendig ist auch das Nachrichtenhandling. Eine einfachere Variante kann dabei eine wiederverwendbare Komponente (Reuse Component) sein, die wir einfach implementieren und die dann den vorhandenen Standard nutzt.
Dabei nimmt der Importer die eigentliche Excel-Datei entgegen, lädt sie im Frontend hoch und validiert sie im ersten Schritt. Danach werden die Standard-CRUD-Operationen in unserem RAP-Objekt aufgerufen und die Datensätze übergeben. So können Fehlermeldungen direkt an das Frontend zurückgegeben werden, ohne dass wir überhaupt weitere Implementierungen vornehmen müssen. Weiterhin bekommen wir auch Funktionen geschenkt, wie einen Preview, Validierungslogiken und Einstellmöglichkeiten.
Vorraussetzung
Damit wir die Komponente in unserer Anwendung einbinden können, müssen wir ein zentrales Deployment durchführen. Aktuell befinden wir uns in einem Szenario, in dem wir auf einem SAP BTP ABAP Environment arbeiten. Die Komponente steht aktuell nicht zur Verfügung, und wir müssen diese über eine sogenannte Carrier-App bereitstellen. Das sorgt dafür, dass eine Anwendung mit der Komponente im System vorhanden ist, die wir dann später zur Laufzeit einbinden können und das nicht nur in einer einzigen Anwendung, sondern über verschiedene Anwendungen hinweg. Damit ist die Wiederverwendbarkeit innerhalb des Systems gegeben.
Wie du die Carrier-App erstellst, auf das System deployst und später auch wieder updatest, findest du in der technischen Dokumentation des Spreadsheet-Importers. Grundsätzlich ist die Dokumentation so gut geschrieben, dass man dieser problemlos folgen kann, um die Komponente zur Verfügung zu stellen und up-to-date zu halten.
Erweiterung
Steht die Carrier-App dann im System zur Verfügung, können wir mit der eigentlichen Einbindung in unsere eigene App fortfahren. Dazu findest du Details im folgenden Abschnitt der technischen Dokumentation.
Bibliothek
Im ersten Schritt müssen wir wieder die manifest.json erweitern, dieses Mal nicht die "libs", sondern einen neuen Knoten unter "sap.ui5". Dabei fügen wir, wenn noch nicht vorhanden, die componentUsages hinzu und dort den Spreadsheet-Importer mit der entsprechenden Versionsnummer. Die Versionsnummer ist abhängig von der deployten Version in deiner Carrier-App. Das heißt, du kannst dort mehrere Versionen zur Verfügung stellen, die Version, die du verwenden willst, gibst du an dieser Stelle an.
"componentUsages": {
"spreadsheetImporter": {
"name": "cc.spreadsheetimporter.v1_6_0"
}
},
Hier noch ein Beispiel, wo wir unsere Komponente eingefügt haben. Dabei findest du im oberen Teil die dependencies, wo wir auch die anderen UI5-Libraries eingefügt haben. Und darunter haben wir die componentUsages eingefügt für den Spreadsheet-Importer. Grundsätzlich ist die Reihenfolge egal, wir könnten es auch ganz oben im Knoten einfügen.
Button
Dazu greifen wir im ersten Schritt auf das Guided Development zu. Wir finden für den List Report einen Guide "Add Custom Action to a Page Using Extensions". Diesen Guide verwenden wir, um unsere Tabelle um einen Upload-Button zu erweitern.
Der Guide ist relativ einfach aufgebaut, wir müssen allerdings sehr viele Parameter eingeben. Im oberen Teil geben wir die eigentliche Seite an, die wir erweitern wollen, dann geben wir den Namen der Controller-Datei ein und die Funktion, die aufgerufen werden soll, wenn der Button geklickt wird. Im mittleren Bereich fügen wir die Entität hinzu, die erweitert werden soll, in diesem Fall die Sales-Entität unseres Objektes. Dann müssen wir noch Parameter zur eigentlichen Action mitgeben. Die Action soll sich an der Tabelle befinden (das ist eine Default-Einstellung), der Buttontext soll "Upload File" heißen. Der Rest kann soweit Standard bleiben. Über den blauen Button "Insert Snippets" fügst du dann die neue Action hinzu. Dabei wird die manifest.json automatisch erweitert und die Action dort definiert. Entsprechend wird auch ein neues Controller-File im Extension-Ordner (ext) angelegt.
Implementierung
Danach müssen wir den eigentlichen Code für die Action implementieren. Dabei gibt es bereits ein Template, welches in der Dokumentation ausgeliefert wird. Hierbei solltest du beachten, dass deine Funktion auf "async" stehen sollte, da unsere Funktionen Asynchronität benötigen. Den Code kannst du eigentlich eins zu eins übernehmen, hier musst du nur die Table-ID entsprechend anpassen. Der erste Teil der Table-ID ist der Namespace und unsere App-ID, gefolgt von der eigentlichen Seite, wo die Erweiterung durchgeführt wird. Im mittleren Teil musst du dann für die Tabelle noch den Namen der Entität ergänzen. Der Rest kann soweit gleichbleiben. Grundsätzlich sollte das später im Test auffallen, wenn die ID nicht korrekt ist.
this.editFlow.getView().setBusyIndicatorDelay(0);
this.editFlow.getView().setBusy(true);
this.spreadsheetUpload = await this.editFlow.getView()
.getController()
.getAppComponent()
.createComponent({
usage: "spreadsheetImporter",
async: true,
componentData: {
context: this,
tableId: "swh.test.zbsglobalsales::SASaleList--fe::table::SASale::LineItem-innerTable"
},
});
this.spreadsheetUpload.openSpreadsheetUploadDialog();
this.editFlow.getView().setBusy(false);
Deployment
Um die Anwendung nun testen zu können und die eigentliche Implementierung des Buttons zu überprüfen, müssen wir ein Deployment durchführen. Die Komponente ist aktuell nur im Launchpad testbar und nutzbar. Hier findest du in der technischen Dokumentation noch weitere Informationen, wie du auch ein Testen innerhalb der Preview durchführen könntest. Der Einfachheit halber machen wir das hier aber direkt im System.
Test
Nach dem Laden der Anwendung sollte nun der Button zur Verfügung stehen und die Funktionalität eingerichtet sein. Klickst du auf den Button, sollte sich nun ein Popup öffnen und du eine erste Version des Spreadsheet-Importers sehen. Ist dies nicht der Fall, solltest du noch einmal deine Konfiguration überprüfen oder in die Console schauen, ob Fehler enthalten sind.
Template
Über den "Download Template"-Button können wir ein erstes Excel-Template herunterladen und dieses dann mit Testdaten befüllen. Bereits im Excel-Sheet sind erste Dummy-Daten enthalten, diese sind aber keine echten Daten, sondern sollen nur zur Veranschaulichung des Formats dienen. Für unseren Test würden wir zwei neue Datensätze anlegen wollen.
Preview
Dann können wir die Dateien über den Laden-Button auswählen und sie im Pop-up zur Verfügung stellen. Du solltest nun einen entsprechenden Status erhalten, dass wir die erste Datei hochgeladen haben und alles zur Verfügung steht.
Über den "Show Preview"-Button können wir nun sehen, welche Daten aus der Excel-Datei geladen wurden. Hier können wir erste Rückschlüsse ziehen: Wurde die richtige Anzahl an Datensätzen hochgeladen und wurden auch die korrekten Daten aus dem Excel-Format übernommen? Grundsätzlich zur Validierung sehr praktisch.
Upload
Wir können nun mit dem eigentlichen Upload der Daten starten. Nach dem Klick auf den Upload-Button wird ein Progress Indicator gezeigt, der die Anzahl der hochzuladenden Einträge anzeigt. Nach dem Upload erhalten wir eine entsprechende Nachricht und sollten uns wieder in der Liste befinden, außer es sind natürlich entsprechende Fehlermeldungen aufgetreten.
In der aktuellen Einstellung des Controls werden die Datensätze angelegt, und zwar als Draft. Wir finden im unteren Bereich nun zwei neue Einträge im Draft, die wir nun editieren müssen, um sie dann speichern zu können. Damit wird das Thema Fehlermeldungen und Handling wieder ganz normal vom RAP Objekt übernommen.
Einstellungen
Im Bereich der Einstellungen findest du noch weitere Optionen, die wir vornehmen können. Diese Einstellungen nimmst du innerhalb des Codes vor, welchen wir oben eingeführt haben. Zum Beispiel gibt es eine Option, um die Entitäten auch direkt aktiv anzulegen. Das heißt, wir legen nicht erst einen Draft an, sondern aktivieren sie auch direkt im Anschluss, solange zumindest keine Fehlermeldungen vorhanden sind. Ein Blick in die Einstellungen lohnt sich auf jeden Fall, hier kann man sehr viel am Control und dem Verhalten anpassen.
Vollständiges Beispiel
Die gespeicherten Ressourcen zu unserer Anwendung findest du in unserem GitHub Repository. Damit kannst du in Zukunft alle Anpassungen an der Fiori App mit nachvollziehen oder die Ressourcen für ein Deployment nutzen. Die aktuellen Änderungen findest du in diesem Commit wieder.
Fazit
Mit einer gewissen Vorarbeit kannst du im Anschluss sehr einfach Upload-Buttons in deiner Anwendung generieren. Diese sind sehr einfach erstellt und es gibt verschiedene Einstellungsmöglichkeiten, um den Excel-Upload entsprechend anzupassen. Damit kannst du Massendaten in deine Anwendung laden, ohne den Aufwand einer manuellen Implementierung in ABAP oder in JavaScript durchführen zu müssen.
Weitere Informationen:
Spreadsheet Importer
