Skip to Content

Change from a mock server to live OData service for TechEd

test
0 %
Change from a mock server to live OData service for TechEd
Details
// 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 the 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: Update the project settings

You need to update the project settings to enable SAP Fiori features for the project. To do so, right-click on the project, and select Project Settings from the menu.

project settings option in menu

Select Project Types under the Project section.

project settings option in menu

Click the Selected checkbox next to the SAP Fiori Project Type to enable Fiori type-specific behavior. Click Save to save the changes.

project settings option in menu
Log on to answer question
Step 3: 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 4: 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

On the Model Selection page of the wizard, leave the default Use default model option selected. Click Next.

next highlighted

On the Confirmation page, click Finish.

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

Open the metadata file for the new OData service by opening the webapp, then the localService, and finally the te2018lotteryapp 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 6: Change the Component file

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

location of Component file

You need to update the navigation properties to match the new entity name of Sets instead of ToysSet.

places to update in Component file

Change the word ToysSet to Sets in line 18.

changes in Component 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.

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.

binding parameter for the bar chart and table

In the oBindingParameters variable, Change the value of path from PartOf to Parts and entitySet from ToysSet to Sets.

binding parameter change to Parts and Sets

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