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.
Step 1: Perform Gateway Service sign up
The live service you will use is the ES5 Gateway service (https://sapes5.sapdevcenter.com/
). 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://sapes5.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO
Step 2: Create destination in SAP Cloud Platform Cockpit
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.
Field Name |
Value |
Name |
Gateway_SAPES5 |
Type |
HTTP |
Description |
DevCenter Gateway |
URL |
https://sapes5.sapdevcenter.com |
Proxy Type |
Internet |
Authentication |
BasicAuthentication |
User |
<Your ES5 Gateway user> (e.g. p12345678) |
Password |
<Your ES5 Gateway password> |
Step 3: Add additional properties
Add three Additional Properties fields by clicking on the New Property button once for each property.
Field Name |
Value |
WebIDEEnabled |
true |
WebIDESystem |
gateway |
WebIDEUsage |
odata_gen |
Step 4: Deploy to SAP Cloud Platform Cockpit
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:
Step 5: Make required changes
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.
Step 6: Point to the ES5 Gateway service document
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 |
Step 7: Add route definition
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"
},
Step 8: Review metadata document
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
.
Step 9: Check entity type
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.
Step 10: Get collection name
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
.
Step 11: Replace page contents
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:
Step 12: Open master view and find list element
- Open the
view/Master.view.xml
file, and locate the List
element.
Step 13: Change the items attribute
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
).
Step 14: Save and run
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.
Step 15: Commit your files and push to Git
You should now commit and push your edits to Git and redeploy the app to SAP Cloud Platform.
Next Steps