When you want to learn how to develop a SAPUI5/OpenUI5 application with the master-detail pattern, then you should read the "Application Best Practices" guide - aka TDG (the definitive guide). The famous Northwind OData service also provides a version with CRUD support, which is used in the best practices application.
The intention of this blog post is to provide you a quick start solution. I was fiddling around with the example in the SAP Web IDE this weekend - so why not share the project with the necessary setup?
To get the application quickly up an running you need the application itself which is on on the openui5 github at src/sap.m/test/sap/m/demokit/tdg and you would need to setup a kind of proxy to access the OData service.
So I have prepared everything:
To quickly get the best practice application up and running:
- Grab the zip file from my github repository and import it into the SAP Web IDE
- Import the "north" file which is contained in the repository into the destination in the HCP account cockpit.
- optional: adapt the "serviceUrl" in the Component.js to get your own session key: (S(sapuidemotdg))
(session key described in "preparing" section of the best practice guide at the very end)
After this steps you have a fully functional application connected to a real backend with CRUD support!
>> To quickly have a look at the application you can access the mocked example hosted by SAPUI5. <<
A little bit more help needed?
You need a bit more help with SAP Web IDE? May this quickly tinker around guide by me helps and the SCN space of SAP Web IDE.
Or maybe you need a bit more infos about the destination and where to find it.
SAP internally I will work together with Christiane Kurz too keep the best practice application up to date in my github repo.
Due to the latest version of the app from github it could happen that the code in the documentation is not up to date - but the big parts of the app are the same.
Do not try to open the views/fragments with the Layout-Editor. Namespaces, fragments and comments are not supported in the actual trial version of the SAP Web IDE.
TOC:
The magic behind the curtain
Destination service
The Problem: Same Origin Policy
When you are developing web applications you know that you normally can access only resources from your own server (same origin policy). When testing for yourself you could disable web security for Chrome (--disable-web-security) or in Eclipse deploying a servlet to act as a proxy.
But we want to develop in the cloud - so the SAP HANA Cloud platform is here to help us with its "destination service". It behaves like a proxy when you are accessing the resource.
Solution: North Destination
The destination looks like this - you can just import the "north" file from my repository. (I did not name it northwind because you may have this connection already set up).
neo-app.json aka "Application Descriptor File"
This file must be located in the root folder of our application in the SAP Web IDE and is also contained in my github repository.
To put it in very simple words: with this file you create a connection between the destination "north" and your application. It also adresses the sapui5 resources.
You can learn more about this file in the HCP documentation: neo-app.json.
Declaration in neo-app.json:
Usage in Component.js:
HCP HTML5 applications
If the above lines have confused you and you want to learn about this stuff I can recommend you: