Creating a Web Application Using the SAPUI5 Framework (8)

Continuing the topic from the previous post, I’d like to draw your attention to another way of connecting an OData service to a SAPUI5 application, as well as demonstrate the use of a control that can make the user’s waiting time—while a backend request is being processed—a bit more "interactive", so to speak.

In the SAP WebIDE project structure, there is an inconspicuous file that plays a significant role in configuring how your application operates. This file is called manifest.json.

See: Descriptor for Applications, Components, and Libraries

To define the path to the OData service you want to call, you need to specify the dataSources attribute under the sap.ui namespace:

"dataSources": {
            "zdemo_app": {
                "uri": "/sap/opu/odata/SAP/ZDEMO_APP1_SRV/",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0"
                }
            }
        }

Controller source code to read the required attribute from manifest.json:

onInit: function() {
            var sServiceUrl = this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").dataSources["zdemo_app"].uri;
            var OdataModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
            var oModel = new sap.ui.model.json.JSONModel();
            var sPath = "/PersonSet";
 
            OdataModel.read(sPath, {
                success: function(oData, response) {
                    oModel.setData(oData);
                }
            });
            this.getView().setModel(oModel, "person");
        }

See: getOwnerComponent

Deploy, run.

You can enhance the user experience during OData service loading by using the BusyDialog element to visualize the wait time.

Updated controller source code:

onInit:function (){
                this._oBusyDialog = new sap.ui.core.BusyIndicator.show(0);
                var sServiceUrl = this.getOwnerComponent().getMetadata().getManifestEntry("sap.app").dataSources["zdemo_app"].uri;
                var OdataModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
                var oModel = new sap.ui.model.json.JSONModel();
                var sPath = "/PersonSet";
               
                OdataModel.read(sPath, {
                    success: function(oData, response) {
                    if (this._oBusyDialog) {
                        sap.ui.core.BusyIndicator.hide();
                    }
                    oModel.setData(oData);
               
                }.bind(this)
                });
               this.getView().setModel(oModel, "person");
           
            }

Deploy, run.

At the moment the data is being loaded, a so-called "busy" indicator will appear.