RestModel für SAP UI5

RestModel für SAP UI5

Was?

Sie fragen sich vieleicht: RestModel in SAPUI5? Verwenden wir nicht normalerweise OData oder laden uns Daten in ein JSONModel?

Nun, mit dem RestModel für SAPUI5 lassen sich ganz leicht RESTful-Webservices konsumieren.

Warum?

Es gibt immer wieder die Anforderung, UI5 Apps zu bauen, die keinen OData-Service als Backend-Service benutzen. Jedoch ist das SAPUI5 Framework darauf ausgelegt, mit OData zu kommunizieren. Dies merkt man direkt an der tollen Integration der ODataV2(OData in seiner reinsten Form) und ODataV4(es ist noch Luft nach oben)-Models.

Jetzt kann es jedoch sein, dass überhaupt kein OData-Service zur Verfügung steht, sondern nur ein RESTful-Webservice. Standartmäßig könnte man dieses Problem folgendermaßen lösen:

  • JSONModel.loadData(……)
    • Mit der .loadData-Methode des JSONModels könnte man einen GET-Request auf eine externe Ressource abschicken.
  • $.ajax(….)
    • Per ajax und jQuery lassen sich asynchrone Requests per Javascript losschicken. Im Grunde verwenden die bekannten UI5-Models im Hintergrund ajax-Calls.

Jedoch sind beide Lösungen nicht immer die optimalsten, vor allem da zB. das JSONModel eher als client-seitiges Model darauf ausgelegt ist, lokale Daten zu speichern.

Deshalb haben wir ein RestModel auf Basis des HTTP-Clients axios entwickelt.

Bei uns findet es auch Anwendung in unserem CloudDNA OData-Plugin.

Wie?

Das RestModel benutzt den axios-Client, um HTTP-Calls gegen einen RESTful-Webservice abzuschicken. Axios ist ein HTTP-Client für Browser und node.js, der von Matt Zabriskie als Open-Source Projekt unter der MIT-Lizenz angeboten wird. 

Das RestModel baut nun auf den bereits umfangreichen axios-Client auf und schneidert die Funktionalitäten auf UI5-Ansprüche zu. So z.B. das Mapping von Destinations auf selbstdefinierbare Zugriffspunkte in der neo-app.json.

Folgende Funktionen stehen zur Verfügung:

CRUD – Die Basics

  • create – POST um Daten wegzuschicken,
  • read – GET um sich Daten zu holen
  • update – PUT um Daten zu verändern
  • remove – DELETE um Daten zu löschen

Die CRUD-Funktionen des RestModels ähneln sich syntaktisch den ODataModel-CRUD-Funktionen. Dies wurde aus einem speziellen Grund so gewählt: Die Verwendung des RestModels soll sich gewohnt anfühlen.

So wird zB. ein RestModel-Read folgendermaßen abgesendet:



this._oModel.read("/Customer", {
     success: function (oData) {
         oCodeEditor.setValue(JSON.stringify(oData, null, "\t"));
     }.bind(this)
});

Dies sieht im 1. Moment aus wie ein Read des ODataModels.
Jedoch steht hier eine Instanz des RestModels dahinter.


this._oModel = new RestModel({
    url: "<myservice.com/api>",
});

Mit dieser RestModel-Instanz und dem dahinterliegenden axios können jetzt in gewohnter ODataModel-Manier Rest-Calls abgesetzt werden. So werden die CRUD-Methoden plus Parameter und Header unterstützt.

Das Resultat eines Requests lässt sich entweder über Callback-Funktionen oder auch per Promise abarbeiten. Somit ist man nicht mehr auf Success- und Error-Callback gebunden, sondern kann auf das Javascript Promise-Konzept zugreifen. Die zurückgelieferten Daten können z.B. in ein JSONModel geladen werden und an die View gebunden werden.

Zusätzlich – Die ‚Schmankerl‘

  • bearerTokenLogin – Speichern eines Bearer-Tokens
  • setXCSRFTokenHandling – Cross-Site-Ressource-Forging Handling
  • ….

Das RestModel bietet noch weitere nützliche Features an. So gibt es zB. die Unterstützung eines Bearer-Token Logins, sofern der Webservice diesen anbietet.

Ebenfalls kann das X-CSRF-Token gespeichert und als Request-Header für alle weiteren Requests gesetzt werden.  Dieses kennt man als UI5-Entwickler besonders aus dem File-Upload Gebiet.

Open-Source?

Das RestModel ist natürlich Open-Source und kann auf github geklont werden. Dort wird es immer mit neuen Updates versorgt und korrigiert.

So kommen in Zukunft neue Features hinzu, wie zB. die Speicherung der angeforderten Daten per Model, so dass ein Binding betrieben werden kann und Daten per View geladen werden können.

Ebenfalls würden wir uns über die Mitarbeit anderer Entwickler an diesem Open-Source-Projekt freuen, um das bestmögliche aus dem RestModel herauszuholen.

Alles klar

Getreu unserem Leitfaden

-Von Entwickler – Für Entwickler-

 

sollte das RestModel besonders Entwickler in UI5-Umfeld nützlich sein.

Wer also auf REST-Services zugreifen möchte und mit den ODataModel-Methoden vertraut ist, für den ist das RestModel interessant und sicherlich eine Erleichterung bei REST-Calls.

Einen detailierteren Einblick mit Dokumentation gibt es auf der github-Repository-Seite des RestModels.

Wir freuen uns über konstruktive Kritik und Anregungen und falls Fragen bestehen, zögern Sie nicht und kommentieren Sie unterhalb laughing

 

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.