Die UI5-Media-Entity Journey – Part 4

Die UI5-Media-Entity Journey – Part 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 bei Die Entdecker, die offiziell über training.sap.com angeboten werden.

Für 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

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:

    View anpassen

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

    1. Den List-Modus der UploadCollection auf MultiSelect umstellen.
      1. Wenn wir den Modus auf MultiSelect ändern, können wir mehrere Items, die heruntergeladen werden sollen, auswählen.
    2. Toolbar einfügen.
      1. Wir erweitern die Standart-Toolbar der UploadCollection um einen Button, mit dem wir die selektierten Items herunterladen können. 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

    Zuerst 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 die Files entweder einzeln per Klick auf den Namen oder per Mehrfachselektion heruntergeladen werden.

    Zusammenfassung

    Wir sind fertig!wink

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

    Nochmals alles von Anfang an:

    1. Wir erstellen uns DDIC-Objekte zur Speicherung und zum Anzeigen von unseren Files.
    2. Wir konfigurieren einen OData-Service mit einer MediaEntity und redefinieren die STREAM-Methoden.
    3. Wir erstellen 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 und 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.