ui5-typescript-walkthrough

Step 25: Remote OData Service

So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.

 

---

In the real world, data often resides on remote servers and is accessed via an OData service. We will add a data source configuration to the manifest and replace the JSONModel type for our invoice model with the publicly available Northwind OData service to visualize remote data. You will be surprised how little needs to be changed in order to make this work!

---

Preview

^{>Products from the OData invoices test service are now shown within our app}

A real-time preview utilizing data from the OData remote service is currently unavailable in this setup. However, we assure you that it will work on your local machine as long as you avoid making any mistakes. So, give it a try and see the results for yourself!

To download the solution for this step as a zip file, just choose the link here: 📥 Download Solution for Step 25.

---

UI5 Tooling

In this step, we want to use the publicly available Northwind OData service located at https://services.odata.org/V2/Northwind/Northwind.svc/. Therefore, our URI points to the official Northwind OData service. In order to avoid cross-origin resource sharing, the typical procedure is to use a proxy in UI5 Tooling and maintain only a path in the URI property of the data source of our app.

A bunch of proxy solutions are available from the UI5 community as UI5 Tooling custom middleware extensions.

In this tutorial we’ll use ui5-middleware-simpleproxy.

---

Install Proxy Server

Open a new terminal window in your app root folder and execute npm i -D ui5-middleware-simpleproxy to install this package as a new development dependency in your package.json.

---

ui5.yaml

We now configure the ui5-middleware-simpleproxy in the ui5.yaml file, so the proxy is used with the UI5 Tooling when serving the app.

We schedule the simpleproxy middleware after the compression middleware, right after the livereload middleware. The mountPath property configures which URLs will be caught by the proxy. The configuration/baseUri property stores the real server address.

specVersion: '3.0'
metadata:
  name: "ui5.walkthrough"
type: application
framework:
  name: OpenUI5
  version: "1.129.0"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: themelib_sap_horizon
builder:
  customTasks:
  - name: ui5-tooling-transpile-task
    afterTask: replaceVersion
    configuration: 
      transformAsyncToPromise: true
server:
  customMiddleware:
  - name: ui5-tooling-transpile-middleware
    afterMiddleware: compression
    configuration: 
      transformAsyncToPromise: true  
  - name: ui5-middleware-simpleproxy
    afterMiddleware: compression
    mountPath: /V2
    configuration:
      baseUri: "https://services.odata.org"

---

manifest.json

As a next step we need to update our manifest.json file, so the remote OData service can be instantiated by the component.

In the sap.app section of the descriptor file, we add a data source configuration. With the invoiceRemote key, we specify a configuration object that allows automatic model instantiation. We specify the type of the service (OData) and the model version (2.0).

In the models section, we replace the content of the invoice model. This key is still used as model name when the model is automatically instantiated during the component initialization. However, the invoiceRemote value of the dataSource key is a reference to the data source section that we specified above. This configuration allows the component to retrieve the technical information for this model during the start-up of the app.

{
	...
	"sap.app": {
		...
    "applicationVersion": {
            "version": "1.0.0"
    },		
		"dataSources": {
			"invoiceRemote": {
				"uri": "V2/Northwind/Northwind.svc/",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0"
				}
			}
		}
	},
	...
	"sap.ui5": {
		...	
		"models": {
            "i18n": {
                ...
            },
			"invoice": {
				"dataSource": "invoiceRemote"
			}
		},
    "resources": {
        "css": [
          {
            "uri": "css/style.css"
          }
        ]
    } 		
  }
}

Our component now automatically creates an instance of sap.ui.model.odata.v2.ODataModel according to the settings we specified above, and makes it available as a model named invoice. When you use the invoiceRemote data source, the ODataModel fetches the data from the real Northwind OData service. The invoices we receive from the Northwind OData service have identical properties as the JSON data we used previously (except for the status property, which is not available in the Northwind OData service).

📝 Note:
If you want to have a default model on the component, you can change the name of the model to an empty string in the descriptor file.

Automatically instantiated models can be retrieved by calling this.getModel in the component. In the controllers of component-based apps you can call this.getView().getModel() to get the automatically instantiated model. For retrieving a named model you have to pass on the model name defined in the descriptor file to getModel, that is, in the component you would call this.getModel("invoice") to get our automatically generated invoice model that we defined in the descriptor.

As our app is now bound to a remote OData service, we do not need the invoices.json file anymore, so you can delete it.

 

---

Next: Step 26: Mock Server Configuration

Previous: Step 24: Sorting and Grouping

---

Related Information

OData Home Page

API Reference: sap.ui.model.odata.v2.ODataModel

First-Aid Kit

NPM Package: ui5-middleware-simpleproxy

This site is open source. Improve this page.