Understanding the SAP WEB IDE auto generated code for view navigation

Hi developers, first of all I wish you all a happy new year 2019. :-)

Currently I’m trying to understand auto generated code of full stack WEB IDE.I started with SAPUI5 half a year, so I’m still a beginner but experienced in ABAP, Java since many years.

Note: I checked already the walkthrough lessons of the SAPUI5 demo kit. So my first apps run always with pure manually generated code. Here I’m focusing on view navigation aspects. For example: let’s build an easy two-views app with a master and a details view (without a SAPUI% template). No problem …

Now I tried to work with WEB IDE’s layout editor more and more and try to generate apps code semi-automatic. I would expect, that a IDE always should assist you while the developing phase. Coding of navigation part can be a little bit tricky if you think about list items and creation of routings, targets and many more. This can be supported and handled better by an IDE automatically.

My experience is that starting with the layout editor is a little bit unusual but after some days you can speed up more and more creating code very simple. No deeper manual coding of e.g. XML sequences and the object attributes.

Then I tried to understand using features to implement view navigation. Perhaps others of you have the same problems like me. I didn’t found any good instructions for this, so I used my proven trial & error method but now I failed. :-) Perhaps you can guide me better …

I already checked WEB IDE Developer Guide athttps://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US

And many more but always solutions like “How to implement navigation by manual entered code”.

My first step was creation of a two-views app with layout editor without any navigation code. This app includes a main view and a detail view. I know that there is a special template, but I want to understand creating this by myself. There is also included a tiny ODATA service to have some data example to play with.

The only thing I have changed or added manually were these lines in index.html:

data-sap-ui-theme="sap_bluecrystal"

data-sap-ui-bindingSyntax="complex"

After this the app was started with mock up option and worked well … except the navigation of course.

Then I tried to implement a smooth navigation.

Requirement:

• Click on the object list item causes a jump to the details view with binding of the clicked data
• Click on the back navigation causes a jump back to the main view
• Click on the push button navigates simply to the details view without any binding

My way was like this:

First of all I want to realize a simple navigation by button to understand the difference to the item selection.

I selected the button object, changed to “Events” and used “Navigate To” feature on the “Press” event.

In a next step WEB IDE presented the following dialog. I choose “Data binding = None”. Then I save this step.

The result: the navigation by button works.

Then let us do the next step to complete the navigation.

I select the object “object list item”, go to the “Events” and add a navigation by the feature “Navigate to” at “Press” event in the same way like above but the dialog now will be set to “Data binding = Propagate current context”. Is this the right way ? I’m not sure about this. Then my app fails with the following error

Then I did an analysis: the error happens in line 47 because of:oContext = undefined

Note: lines 49-51 were inserted by myself to do a deeper analysis.

Then I realized, that WEB IDE added a lot of code into Main.view.xmls, Detail.view.xml and manifest.json.

Maintenance of routing/targets in manifest.json is clear. But now we have some “additionalData” elements. Handling of Routes in Manifest editor is also unclear. How to handle the yellow elements ?

SAP Web IDE gave me no tips about these features. Attached you can find the project archive with these navigation steps.

Then I tried different thing to fix the code. After some backwards and forward changes with WEB IDE the code looked like below. This was also a generated code sequence and not entered manually, unfortunately this empty XML attribute knocked out the layout editor completely.

Now my questions:

a) are there any manuals or videos for a better instruction how to handle the layout editor ?And perhaps a special section about new features an technics ?

b) how reliable is the automatic generated code ? Or let me ask better: is using this auto-code recommended or is it better to develop own code ? Ok, WEB IDE improves more and more … but where are we standing today ? Still in development or is layout editor already working for this. Up to now some features are very helpful. Others seem to be unfinished, undocumented or under development. How do you do it best ?

c) is the code stable focusing a special version. I our ERP we have to run 1.36.11 because of technical aspects. I always reduce version level in my project settings / general / SAPUI5 / SAPUI5 versions to 1.36.11. Will this be considered while auto-code generation ? The above effects are currently not affected, I think.

d) what is the correct sequence click-by-click to implement navigation by layout editor ? Are there any errors in my way ? Do I have to implement some code manually after using the layout editor ?

Feel free to add more usability questions to WEB IDE. Let’s start a discussion …

Thank you for your interest and help.

Best regards, Markus