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.

For reference, the service document URL you will use is: https://sapes4.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO

To provide access to the service, you will need create a destination in SAP Cloud Platform. Open a browser window to your SAP Cloud Platform Cockpit, click on Destinations, then New Destination. Enter the field values and Additional Properties below and click Save.

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 Cloud Platform and commit the project to Git. If you aren’t sure how to do this, refer to the two tutorials below:

• SAP Cloud Platform Deployment tutorial (but select your current project not northwind)
• Commit the code to Git following the Git Tutorial

As mentioned above, the four files file to be changed are:

• Component.js
• neo-app.json
• metadata.xml
• Master.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 ES4 Gateway service document and save your edits.

Open the neo-app.json file, paste in the additional route definition below to point to the ES4 Gateway and save your edits.

{
  "path": "/destinations/Gateway_SAPES4",
  "target": {
    "type": "destination",
    "name": "Gateway_SAPES4"
  },
  "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 ES4 Gateway user ID and password).

https://sapes4.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:

1. 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 SAP Cloud Platform.