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 with CREATE and READ.
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? This blog is written in my free time and not as part of my daily work.
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
note: if you download the repository from github via "download zip" the project files are in a sub-folder but the SAP Web IDE doesn't like this. - Import the "north" file which is contained in the repository into the destination in the HCP account cockpit.
- advice: 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!
>> 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.
Outlook
The best practices application uses only the CREATE and READ operations from the CRUD-able Northwind service. The OData Model has the the two functions: remove for DELETE and update for UPDATE.
UPDATE & DELETE
For updating and deleting you need to send the request to the specific URLs like /Products(1). UPDATE needs a payload like in the create example, but without the Navigation properties for Category and Supplier - you find this in the AddProduct.controller.js. A DELETE doesn't need a payload. A successful update/delete returns 204 with no content!
Here you find some payload examples, due to our SAPUI5 OData Model we don't need those odata.metadata or odata.type.
Once I have figured out the best way to handle the UPDATE and DELETE operations including the corresponding views/fragments - I will update the copied app, plan contributing back to OpenUI5 and update this blog post or create a follow up. Or maybe in the meantime a pull request in my repo arrives? 😉
Update 1: working minimal update
So I tried to update two properties of the product, the name and the description. It was very important to use the merge = true for the update, otherwise I lost my relations to the category and the supplier. I found the hint for this in the OData operations webpage under "Updating Entries" -> the second example.
I did not use the two way binding of the OData Model. I had to play around with the Model Data so that it fitted my needs meaning getting and setting data. The sap.ui.getCore().byId() is also not something which makes me really happy, for two fields in my standalone app it is ok. Maybe two-way-binding could help here.
Anyways, a minimal working solution with room for improvement - I'll keep you posted!
The latest change is in in the master.
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:
- SCN: Lightweight HTML5 apps and Git on SAP HANA Cloud Platform by rui.nogueira
- openSAP: Next Steps in SAP HANA Cloud Platform also by rui.nogueira
- SAP Managed Tags:
8 Comments
