After running your app with mock data, learn how to switch it to a live OData service
You will learn
The previous two tutorials introduced a scenario where app development was going to precede the availability of an OData service. To work in parallel with the service development, you created an OData model (which would have been based on Design Thinking sessions with the users) and then built your SAPUI5 app based on that model. You also were able to run it against the SAP Web IDE mock data server. This tutorial will show you how to configure your finished application to run against a live service.
Converting an app built on mock data to a live service requires editing only two files if there is perfect agreement between the OData models (the one you created by hand, and the model in the final service). For completeness, the metadata model in the app project should also be updated (but it is not downloaded to the client or used when the app runs). In this tutorial, you will make a third required change to show how to accommodate a less than perfect alignment between the models.
The live service you will use is the ES4 Gateway service. To begin, please follow the steps in the Gateway Service sign up tutorial, and then continue with step 2 below.
To provide access to the service, you will need create a destination in HCP. Open a browser window to your HCP Cockpit, click on Destinations, then New Destination. Enter the field values and Additional Properties below and click Save.
<Your ES4 Gateway user> (e.g. p12345678)
<Your ES4 Gateway password>
Add three Additional Properties fields by clicking on the New Property button once for each property.
To establish a baseline for the source code you have written so far, you will deploy it to SAP HANA Cloud Platform and commit the project to Git. If you aren’t sure how to do this, refer to the two tutorials below:
At the top of the page, note that the Namespace is GWDEMO.
Scroll down a bit and you will see the SalesOrder EntityType with a structure that is consistent with the SalesOrder EntityType in the OData model you created.
In the same page, search for EntitySet Name= to find the name assigned to the GWDEMO.SalesOrder EntityType. The name of the collection is SalesOrderCollection.
Since you have the metadata displayed, copy the contents of the entire page from the opening <edmx.Edmx> element to the closing </edmx.Edmx> tag and replace the contents of the model/metadata.xml file in your project and save your edits.
Note: do not include the first line of the web page that starts with “This XML file…”
While updating this file is not necessary for the app to run, it should be done for future reference.
Your metadata.xml file should now look like this:
Open the view/Master.view.xml file, and locate the List element.
In the List element, the items attribute points to the primary collection (displayed in the “master” list of the app). It currently points to SalesOrders which is the name you assigned when you created your OData model. Change the items attribute to the collection name used in the final data model (from step 10 above: SalesOrderCollection).
Save all your changes, select the index.html file and run the app. The data displayed is now sourced from the ES4 Gateway rather than your mock data.
You should now commit and push your edits to Git and redeploy the app to HCP.