You will learn
Now that you have set up a Destination in the SAP Cloud Platform (HCP) cockpit, you will connect that destination to your local application.
Once the datasource has been defined, configure the local application to use the data.
Now that you have set up a Destination in the SAP Cloud Platform (HCP) cockpit, you will connect that destination to your local application.
Web IDE If you don’t have the Web IDE open, follow these steps: Enable and open the SAP Cloud Platform Web IDE
There are three steps to connect the OData service to your application.
mainfest.json
file.In a previous tutorial the OData test service called “Northwind” was set up for all SAP Cloud Platform applications. Next, this specific application must connect to that “Destination”.
Open the webapp/mainfest.json
file, by double clicking on the file.
To open a folder in the Web IDE, just click on the folder icon. It will expand to show the contents.
.
If you open the file, and you get a code editor (and not the form editor shown below), click the Descriptor Editor link at the bottom of the page. This will change to the Code Editor.
Click the Data Sources tab at the top of the screen.
Click the + icon next to the Define OData services for the application and… box.
From the Sources list, choose Service URL. Then choose the following:
Drop-down Box | Northwind ODATA Service |
URI | /V2/Northwind/Northwind.svc |
Click the Test button to test the service. If the data is correct, you should see this screen appear. Click Next to continue.
On the Confirmation Screen, do not select Overwrite. Click on Finish.
Now that the application has a connection to the “Northwind” destination, the next step is to create a data object (called a “model”). This object acts as the interface between the data coming from the web and the rest of the code in the application.
There are two ways to create a model: in the JavaScript code, or by using the mainfest.json
file. Adding the model to the manifest.json
file will set one up automatically.
NOTE To create the model directly in JavaScript, read the model help documentation.
Open the manifest.json
file, and select the Models link at the top of the screen:
Click the + button to create a new model.
In the New Model dialog box, select the following:
Model Name | (leave blank) |
Model Source | Select Data Source |
Dropdown |
Northwind.svc |
Set as default model for the application | checked |
Then click the OK button to accept.
In the next screen, modify the Binding Mode
property (on the lower right hand side). Click the arrow, and select Default
as the binding mode.
The finished model screen will look like this. Click Save to save this file.
If your file name has a * next to it, the file has not been saved. This can cause problems when you run your application. Make sure all your files are saved before you run!
Test your application by clicking on RUN
A new browser window will open. The screen should look like this:
Next, check to make sure the browser is receiving the data. The web page will receive the data, but nothing will appear on the screen. (We will set up the screen display in the next few tutorials).
To check the data, use the browser tools and view the data coming from the server.
Why are we using Google Chrome? Google chrome has built in development tools that make it easy to debug and work with web pages. If you are not using Google Chrome, download it now.
Right click on the web page, and choose Inspect
The inspector will appear. Click on the Network tab to view the network traffic for the application.
To view all the network traffic, reload the page.
The network traffic will appear as the page is loading…
What about the red text? Several files will appear in red. This is normal, as we have not set up that part of the application.
Scroll down until you find the $metadata item.
NOTE Typing in
metadata
to the filter box in upper right corner will make it easy to find the correct row.
Click on $metadata, then click the Preview tab.
This will show you the data coming from the server to the browser. If you see this, the data is working. You are ready to move on to the next step of the tutorial.
Missing a file? If the list of files doesn’t match the picture, you may have used the wrong template when you created the project. Delete the project, and start the Create a new project tutorial again.
$metadata file not listed? This means one of the files in your project is incorrect. Check the files, and make sure no red X marks appear in the left hand column. These indicate a problem with the file syntax. Check the pictures carefully.
The Northwind
system does not appear in the drop down box. This can happen when the Web IDE is “out of sync” with the server. Reload the Web IDE (by clicking the reload button in your browser). You will come back to the same place, and you can start the steps to create a new OData service again.
Don’t forget to save your files! If a file name has a * next to it, the file isn’t saved.
Updated 10/04/2017
Contributors Provide Feedback
15 Minutes.