Skip to Content

Change from a mock server to live OData service for TechEd

0 %
Change from a mock server to live OData service for TechEd
// Explore More Tutorials

Change from a mock server to live OData service for TechEd

Connect to a live backend system for your application

You will learn

Change your data source from a mock server created by BUILD to a live OData service. It is important to know how to configure a connection to the backend of an application, which you will learn here.

Step 1: Reopen SAP Web IDE

When you create a new destination in SAP Cloud Platform, SAP Web IDE must be updated to get the latest information. Refresh or close and re-open your SAP Web IDE.

Log on to answer question
Step 2: Add the OData service

You need to add the OData service to your application. Right click on the project name. Select New > OData Service.

new OData service path
Log on to answer question
Step 3: Select the service

The OData service wizard will pop up. On the Data Connection page, select Service URL from the Sources options.

data connection source selection

In the drop down, select Toys OData service for TechEd Frontend app.

data connection service selection

Enter / for the relative URL and click Test. If you configured your destination and OData connection properly, you will see a list of entities in the OData service, which include Sets and Parts.

testing the service

Click Next if your data is correct.

next highlighted

Leave Overwrite existing OData service connections unchecked. Click Finish.

finish highlighted on confirmation screen
Log on to answer question
Step 4: Validate the data source

Open the metadata file for the new OData service by opening the webapp, then the localService, and finally the te2017frontend folders.

folder structure to find data folder

Double click on the metadata.xml file to open it. Copy the NavigationProperty element in the XML under the entity SetsType.

element to copy from metadata file
Paste in the NavigationProperty element in the text box below.
Step 5: Change the Component file

Locate the Component.js file under the webapp folder. Double click to open the file.

location of Component file

Two updates need to be made to this file to switch from the Mock Data to the Live Data service. Locate the server initialization line and the navigation properties variable. You want to remove the server.init() line as this initializes the mock server. Additionally, you need to update the navigation properties to match the new entity name of Sets instead of ToysSet.

places to update in Component file

Comment out server.init() on line 14 by adding 2 forward slashes (//) to the beginning of the line.

Change the word ToysSet to Sets in line 18.

changes in Component file

SAVE your changes.

Log on to answer question
Step 6: Change the manifest file

Open the manifest.json file also located in the webapp folder.

SAP Web IDE defaults to the Description Editor. You will need to be in the Code Editor. To change to the Code Editor, locate the toolbar on the bottom of the screen. Click Code Editor in the toolbar.

change from description editor

You will know you are in the Code Editor because the file is all code. If you see tabs and input fields, you are still in the Description Editor. Make sure your screen matches the screenshot below.

what the code editor looks like

Locate the dataSources array in the manifest file. You have added a new data source called te2017frontend when you added the OData service in the earlier steps. You want to make this your main data service.

data sources highlighted in manifest file

Rename main to localservice.

Rename te2017frontend to main.

new data source names in manifest file

SAVE your changes.

Log on to answer question
Step 7: Update the Master view

Open the Master view, or the view ending with _S0.

master view location in files

The items binding in the List control needs to be updated to match the new entity name.

area to change highlighted in master view

Change /ToysSet to /Sets.

updated master view

SAVE your changes.

Log on to answer question
Step 8: Update the Detail controller

Open the Detail controller, or the controller ending in _S1.

detail controller location in file

The expand parameter needs to be updated to match the new entity description. There are 2 instances of PartOf in the controller file. Both need to be updated.

value that needs to be changed in controller

In the handleRouteMatched function, find the oParams variable. Change the value of expand from PartOf to Parts.

expand parameter change to Parts

Towards the bottom of the onInit function, right before the onAfterRendering function, there is a reference to the expanded entity name that needs to be updated. In the oBindingParameters variable, Change the value of path from PartOf to Parts.

binding parameter change to Parts

SAVE your changes.

Log on to answer question
Step 9: Validate your initialization function

Copy the code from your onInit function in the Detail (S1) controller. Paste it in the box below.

Paste in your onInit function.

Next Steps

Back to top