RestModel for SAP UI5

RestModel for SAP UI5

What?

You may ask yourself: REST in SAPUI5? Don’t we normaly use OData and maybe JSON to load external data? Well, by using the RestModel for SAPUI5, consuming RESTful-Webservices can be done easily.

Why?

Sometimes we have the requirement to build UI5 Apps without using OData-Service as a backend service. However, the UI5 Framework is mainly built to use the OData-protocol to consume data. You can see this on how well SAP has integrated the ODataV2– and ODataV4-Model into the UI5 Framework. But what do you do if you don’t have an ODataService? You could use following approaches.
  • JSONModel.loadData(……)
    • With the .loadData-method you can load external data into a JSONModel and process it there.
  • $.ajax(….)
    • By using ajax and jQuery you can send asynchonous requests. Basically all known UI5-models use ajax to process data.
However, these solutions are not always the , as we say in Austria, ‚yellow from the egg‘, especially because the JSONModel is more tailored to store and process local data. Because of these problems we have created the RestModel based on the HTTP-client axios . For example, we use the RestModel next to the ODataModel in our CloudDNA OData-Plugin.

How?

The RestModel uses the axios-client to make HTTP-calls against a RESTful-webservice. Axios is an HTTP-client for browsers and node.js developed by Matt Zabrieskie as an open-source-project under the MIT-licence. The RestModel extends the already extensive axios-client and tailores it to an UI5 environment, eg. for the mapping between Destinations and self-definded access-point in the applications neo-app.json file. Following functionalities are provided:

CRUD – the basics

  • create – POST to send data,
  • read – GET to get data,
  • update – PUT to change data,
  • remove – DELETE to delete data
The CRUD-methods of the RestModel are syntactically similiar to the ODataModel-CRUD-Methods. This was done so that working with the RestModel seems familiar and already accustomed. A RestModel-read could look like the following code snippet:

this._oModel.read("/Customer", {
     success: function (oData) {
         oCodeEditor.setValue(JSON.stringify(oData, null, "\t"));
     }.bind(this)
});
This seems to be an ODataModel-Read on the first sight. But here we have an instance of the RestModel.
this._oModel = new RestModel({
    url: "<myservice.com/api>",
});
By using the RestModel-instance you can send REST-calls like you would send ODataModel-Calls including headers and parameters. The result of a request can be processed by using callbacks or by making use of the Promise-concept. By using Promises you can take advantage of the features of the Promise-concept in Javascript. The returned data can then be stored in a JSONModel and be bound against a View.

Additionally- the ’special treats‘

  • bearerTokenLogin – storage of a bearer token for login-purposes
  • setXCSRFTokenHandling – Cross-Site-Ressource-Forging handling
  • ….
The RestModel provides additional features like the support of a bearer-token-login, as fas as the REST-service supports it. X-CSRF-tokenhandling is also supported in the RestModel. A fetch-request will be sent and the returned X-CSRF-Token will be set as a request parameter for further requests. This should be known when working with file-uploads in UI5.  

Open-Source?

The RestModel is provided as an open-source project and can be cloned at github, where it is updated and provided with new features. Planned features are eg. the storage of requested data in a model alike to the ODataModel to provide similiar features, like binding and view-triggered-requests. We would be glad to have motivated contributors to our github project so that together we can make the best out of the RestModel.

Everything clear

As said in our guideline

– From Devs – For Devs –

  the RestModel should be an improvement for developers from developers. So if you need to use REST-services in your UI5-App, the RESTModel seems to be the right for you. A detailed view incl. documentation can be found at the github-repository of the RestModel. We’d be glad to get constructive criticism and suggestions on how to enhance the RestModel, so don’t hesitate to comment down below laughing

 
RestModel für SAP UI5 einfach erklärt

RestModel für SAP UI5 einfach erklärt

RestModel für SAPUI5 kennenlernen

Herzlich willkommen bei unserem Blog zum Thema RestModel für SAPUI5.

Zuerst beantworten wir Ihnen die gängigsten W-Fragen! Wenn Sie noch weitere Fragen zum Thema RestModel für SAPUi5 haben hinterlassen einfache ein Nachricht!

Was? RestModel in SAPUI5?

Sie fragen sich vielleicht: 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.

 

Inhaltsverzeichnis

  • Warum RestModel im SAPUI5?
  • Wie benutzen Sie das RestModel im SAPIU5?
  • Wie heissen die CRUD- Basics im Restmodel für SAPUI5?
  • Schmankler für Restmodel im SAPUI5
  • Ist das RestModel Open-Source?

Warum RestModel im SAPUI5?

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 merken Sie 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önnen Sie 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 entwickeln wir ein RestModel auf Basis des HTTP-Clients axios.

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

Wie benutzen Sie das RestModel für SAPUI5?

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 kann nun auf den bereits umfangreichen axios-Client aufbauen 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:

Wie heissen die CRUD – Basics im RestModel?

  • 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 könnnen Sie  zB. ein RestModel-Read folgendermaßen absenden:


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 Sie jetzt in gewohnter ODataModel-Manier Rest-Calls absetzen. 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.  Dies kennen Sie 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

 

UI5 Media Entity Journey | OData- Part 4

UI5 Media Entity Journey | OData- Part 4

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:

    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!wink

    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.