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. <<

/wp-content/uploads/2015/03/deployed_659908.png

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).

north_config.PNG

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:

/wp-content/uploads/2015/03/neoappjson_659930.png

Usage in Component.js:

/wp-content/uploads/2015/03/componentjs_659931.png

HCP HTML5 applications

If the above lines have confused you and you want to learn about this stuff I can recommend you:

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Joao Sousa

    Will the two-way binding make automatic commits to the backend?

    It certainly helps with the getId problem which explicitly connects the view to the model, but I wouldn’t want it to keep making oData calls at every change.

    (0) 
  2. Rahul Singh Parihar

    Hello Denise, I followed the same steps as you mentioned but while running your application Web Ide is throwing error ” Run Configuration are not configure properly” Can you please guide what I can do to resolve this issue.

    (0) 
    1. Denise Nepraunig Post author

      Hello Rahul, I think this has to do with the new “run configurations”. In the SAP Web IDE click on a file in you project, go to the Menu “Run -> Run Configurations”. Then press the “New Run Configuration” button and after that click save.

      /wp-content/uploads/2015/03/run1_668981.png/wp-content/uploads/2015/03/run2_668982.png

      (0) 
  3. San G

    Hi Denise,

    Thank you for your blog, I have developed an application with master detail template, but when we get data with Entity set, in my service get entity set method triggered twice, example Master list or if i assign entity set to Combo box these all getting triggered twice.

    Any Idea? or is it common?

    Cheers,

    San.

    (0) 

Leave a Reply