By Jim Jaquet
After running your app with mock data, learn how to switch it to a live OData service
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.
As mentioned above, the four files file to be changed are:
Component.jsneo-app.jsonmetadata.xmlMaster.view.xml (required because there is a slight difference between the models)Open Component.js in Web IDE, and search for serviceConfig in the metadata definition.
Update the two fields under serviceConfig (name and serviceUrl) to point to the ES5 Gateway service document and save your edits.
| Field Name | Value |
|---|---|
name |
GWDEMO |
serviceUrl |
/destinations/Gateway_SAPES5/sap/opu/odata/IWBEP/GWDEMO |
Open the neo-app.json file, paste in the additional route definition below to point to the ES5 Gateway and save your edits.
{
"path": "/destinations/Gateway_SAPES5",
"target": {
"type": "destination",
"name": "Gateway_SAPES5"
},
"description": "DevCenter Gateway"
},
To display the metadata document used by the service, open a browser tab to the service document URL and add $metadata to the end (if prompted to log in, use your ES5 Gateway user ID and password).
https://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO/$metadata>
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:
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 ES5 Gateway rather than your mock data.
