UI5 Media Entity Journey Teil 4

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. Sie werden über die offiziell training.sap.com . Melden Sie sich bitten zuerst an, danach wählen sie Österreich und Deutschland aus um alle Termine zu sehen.

 Falls sie noch mehr darüber wissen wollen, bieten wir diesen  Blog interessante Trainings:

• HOUI5 – Hands-on Foundation zur Entwicklung von SAPUI5 Applikationen
• HOFIO – Hands-on Deep Dive zur Entwicklung von SAP Fiori Oberflächen
• WDECPS – SAP Cloud Platform Security Eine ganzheitliche Betrachtung

Inhalt UI5 Media Entity Journey :

Im vierten Teil der Blogserie erweitern wir die UploadCollection um eine Download-Funktion.

Schritt 4 – File Download

Nachdem wir nun die Upload-Funktionalität fertig haben, möchten wir unsere Files auch downloaden können. Deshalb müssen wir noch ein paar Änderungen vornehmen.

Hilfreiche Links:

• SAPUI5 API Reference
• Unsere Knowledge-Base
• Download im Detail

View anpassen

Um die UploadCollection Downloadfähig zu machen, müssen wir ein paar Anpassungen machen.

1. Zuerst den List-Modus der UploadCollection auf MultiSelect umstellen.
   1. Wenn wir den Modus auf MultiSelect ändern, können wir danach mehrere Items, die heruntergeladen werden sollen, auswählen.
2. Toolbar einfügen.
   1. Zunächst erweitern wir die Standart-Toolbar der UploadCollection um einen Button. Danach können wir damit die selektierten Items herunterladen. Dieser soll, sofern keine Items ausgewählt sind, disabled sein.
3. Das UploadCollectionItem erweitern.
   1. Die Property url des UploadCollectionItems wird mit einer formattierten URL befüllt, die auf den URL-Parameter $value des jeweiligen Files zeigt.

<UploadCollection id=“main_uploadcollection“ items=“{/FileSet}“ beforeUploadStarts=“onBeforeUploadStarts“ change=“onUploadChange“

mode=“MultiSelect“ selectionChange=“onUploadSelectionChange“>

<toolbar>

<OverflowToolbar>

<ToolbarSpacer/>

<Button id=“main_downloadbtn“ text=“{i18n>btn.download}“ press=“onDownloadPress“ type=“Transparent“ enabled=“false“/>

<UploadCollectionToolbarPlaceholder/>

</OverflowToolbar>

</toolbar>

<items>

<UploadCollectionItem url=“{path: ‚Fileid‘, formatter: ‚.formatUrl‘}“ documentId=“{Fileid}“ fileName=“{Filename}“ mimeType=“{Mimetype}“

enableEdit=“false“ enableDelete=“false“ visibleDelete=“false“ visibleEdit=“false“/>

</items>

</UploadCollection>

Controller bearbeiten

Bevor es richtig losgeht programmieren wir den Formatter aus, den wir im url-Parameter verwenden. Dieser Formatter gibt einen String zurück, der die URL unseres Models plus URI unseres Files plus dem URL-Parameter $value beinhaltet. Mit dieser URL kann das File heruntergeladen werden.

Anschließend benötigen wir noch den Eventhandler für den Button. Dieser Handler sucht sich alle selektierten UploadCollectionItems heraus und übergibt diese an die downloadItem-Funktion der UploadCollection.

Zu guter Letzt fehlt noch der SelectionChange-Eventhandler. Dieser bewirkt das aktivieren und deaktivieren des Download-Buttons wenn Items bzw. keine Items ausgewählt wurden.

formatUrl: function (sFileid) {

                                            let sUrl = this.getView().getModel().sServiceUrl;

                                            sUrl += „/“ + this.getView().getModel().createKey(„FileSet“, {

                                                           Fileid: sFileid

                                            });

                                            sUrl += „/$value“;

                                            return sUrl;

                              },

                              onDownloadPress: function (oEvent) {

                                            let oUploadCollection = this.getView().byId(„main_uploadcollection“),

                                                           aSelectedItems = oUploadCollection.getSelectedItems();

                                            for (var i = 0; i < aSelectedItems.length; i++) {

                                                           oUploadCollection.downloadItem(aSelectedItems[i], true);

                                            }

                              },

                              onUploadSelectionChange: function (oEvent) {

                                            let oUploadCollection = oEvent.getSource(),

                                                           oButton = this.getView().byId(„main_downloadbtn“);

                                            if (oUploadCollection.getSelectedItems().length > 0) {

                                                           oButton.setEnabled(true);

                                            } else {

                                                           oButton.setEnabled(false);

                                            }

                              },

Testen

Wenn nun alle Änderungen korrekt übernommen wurden, können danach die Files entweder einzeln per Klick auf den Namen oder per Mehrfachselektion heruntergeladen werden.

Zusammenfassung

Wir sind fertig!

Im letzen Schritt haben wir unser UploadCollection-Projekt fertig gemacht , nun können Files rauf- und runterladen.

Nochmals alles von Anfang an:

1. Wir erstellen uns DDIC-Objekte zur Speicherung und zum Anzeigen von unseren Files.
2. Danach konfigurieren wir einen OData-Service mit einer MediaEntity und redefinieren die STREAM-Methoden.
3. Ausserdem erstellen wir eine UI5-App und binden die UploadCollection ein und laden Files per OData-Service hoch.
4. Wir laden Files per downloadItems-Funktion der UploadCollection herunter.

Ich bedanke mich für das Lesen unseres Blogs über MediaHandling mit der UploadCollection. Es würde mich freuen, wenn man sich wieder auf einem neuen Blog sieht.

Falls Fragen zu diesen einzelnen Schritten auftreten, können sie gerne in den Kommentaren gestellt werden.