Die UI5-Media-Entity Journey – Part 3
In dieser 4-Teiligen Blogreihe erfahren Sie alles nötige, um Media-Entity-Handling in SAP UI5 laut gängigen Best-Practice-Erfahrungen zu implementieren.
Einen tieferen Einblick in verschiedenste Themen gibt es in unseren Kursen bei Die Entdecker, die offiziell über training.sap.com angeboten werden.
Für diesen Blog interessante Trainings:
Inhalt
Im dritten Teil der Blogserie erstellen wir eine SAPUI5-App und integrieren die sap.m.UploadCollection.
Schritt 3 – File Upload
Wir erstellen nun eine SAPUI5 Applikation über die SAP WebIDE. Des weiteren binden wir den OData-Service ein, den wir in Schritt 2 erstellt haben, um Files zu speichern und anzuzeigen,
Hilfreiche Links:
Voraussetzungen
- Zugang zur SAP Web IDE
- Ein korrekt eingerichteter Cloud Connector mit dazugehöriger Destination in der SAP CP
App erstellen
Wir wechseln in die SAP WebIDE und legen per Create Project from Template ein neues SAPUI5 Projekt an.
Nennen wir sie ZDemoFile im Namespace at.demo.file und benutzen als Default-View eine View mit dem Namen Main.
Da wir nur eine View anzeigen und keine Navigation haben, benötigen wir nicht eine weitere View als Navigationscontainer.
Im i18n.properties-File kann noch der Titel der Page angepasst werden.
OData-Service hinzufügen
Sobald die App nun erstellt ist, kann per rechtsklick ein neuer OData-Service hinzugefügt werden. Hier bitte die Voraussetzungen oben beachten.
Wir suchen, sobald wir die richtige Destination ausgewählt haben, unseren Service und setzen diesen als Default-Model für unsere App.
UploadCollection implementieren
Als 1. Schritt implementieren wir die UploadCollection samt UploadCollectionItem.
Diese beiden Controls befinden sich im sap.m.-Standartnamensraum und können daher ohne Alias definiert werden.
Wir definieren folgende Properties für die Upload Collection:
- items=“{/FileSet}“
- Zeigt auf unser EntitySet.
- beforeUploadStarts=“onBeforeUploadStarts“
- Eventhandler für das Event welches aufgerufen wird, bevor der Upload beginnt.
- change=“onUploadChange“
- Eventhandler, der zieht sobald ein File zum Upload ausgewählt wird.
Und für das UploadCollectionItem
- documentId=“{Fileid}“
- fileName=“{Filename}“
- mimeType=““{Mimetype}
<UploadCollection id=“main_uploadcollection“ items=“{/FileSet}“ beforeUploadStarts=“onBeforeUploadStarts“ change=“onUploadChange“><UploadCollection id=“main_uploadcollection“ items=“{/FileSet}“ beforeUploadStarts=“onBeforeUploadStarts“ change=“onUploadChange“> <items> <UploadCollectionItem documentId=“{Fileid}“ fileName=“{Filename}“ mimeType=“{Mimetype}“ enableEdit=“false“ enableDelete=“false“ visibleDelete=“false“ visibleEdit=“false“/> </items> </UploadCollection>
Sobald die App nun gestartet wird, sehen wir das in Schritt 2 hochgeladene File.
Controller bearbeiten
Wir wechseln nun in den Main-Controller.
Dort implementieren wir die beiden Eventhandler uns setzten die Upload-URL für die UploadCollection.
Zuerst speichern wir uns in der onInit-Funktion unsere UploadCollection und setzen die Upload-URL. Diese setzt sich aus der Service-URL unseres Models und dem Entity-Set FileSet zusammen.
In der onUploadChange-Funktion behandeln wir den XCSRF-Header. Dieser ist für Cross-Site-Resource-Forging zuständig und muss gesetzt werden. Das ODataModel bietet mit der Funktion getSecurityToke() die Möglichkeit, sich ein solches XCSRF-Token zu generieren lassen. Dass muss anschließend noch als HeaderParameter gesetzt werden.
In der onBeforeUploadStart-Funktion muss der Slug-Header gesetzt werden. Den Filenamen bekommen wir über das Event-Objekt heraus.
sap.ui.define([
„sap/ui/core/mvc/Controller“,
„sap/m/UploadCollectionParameter“
], function (Controller, UploadCollectionParameter) {
„use strict“;
return Controller.extend(„at.demo.file.ZDemoFile.controller.Main“, {
oFileUploader: null,
onInit: function () {
this.oFileUploader = this.getView().byId(„main_uploadcollection“);
this.oFileUploader.setUploadUrl(this.getView().getModel().sServiceUrl + „/FileSet“);
},
onUploadChange: function (oEvent) {
let oCSRFHeader = new UploadCollectionParameter({
name: „x-csrf-token“,
value: this.getView().getModel().getSecurityToken()
});
this.oFileUploader.removeAllHeaderParameters();
this.oFileUploader.addHeaderParameter(oCSRFHeader);
},
onBeforeUploadStarts: function (oEvent) {
let oHeaderSlug = new UploadCollectionParameter({
name: „slug“,
value: oEvent.getParameter(„fileName“)
});
oEvent.getParameters().addHeaderParameter(oHeaderSlug);
},
});
});
.
Upload testen
Sobald nun der Controller passt, kann die Upload-Funktionalität getestet werden.
Mit Hilfe des Hochladen-Buttons kann jetzt einen Daten geuploadet werden. Die UploadCollection zeigt anschließend das hochgeladene File in der Liste an. Solle es nicht angezeigt werden, kann dem mit einem Refresh auf das Model oder die Items-Aggregation abhilfe geschafft werden.
Zusammenfassung
Alles klappt
In diesem Schritt haben wir die Upload-Funktion für unsere Media-Entity implementiert. Aber nur der Upload führt noch nicht zum Ziel, denn wir möchten ja auch downloaden können.
Dies geschieht in Schritt 4, wo wir die UploadCollection um die Download-Funktion erweitern.
Falls Fragen zu diesen einzelnen Schritten auftreten, können sie gerne in den Kommentaren gestellt werden.
Recent Comments