Understanding the SAP WEB IDE auto generated code for view navigation

[markus_deuter]

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

[markus_deuter]

Hi Lisi,
thank you very much for answering and sharing the video. It is really interesting. Instead of following your recommendations to watch from 35:00 to 50:00 I watched the full video. 🙂 So I learned a lot a new features. SAP Web IDE team is doing a really good job and supplies us a lot of new features but sometimes it is not possible to follow all the goodies right in time.

> I'm sorry to hear that you could't find instructions for this scenario in our documentation. We will review and update it if needed.

New features a sometimes a little bit confusing. If I’m confused, I try to get information e.g. by Google. Then sometimes old information will be presented. There is the demo kit, the Web IDE doc at sap.help in several versions and the change from none to full-stack version. So my old bookmarked links must be updated. Many videos are available … sometimes with old procedures how to do something. I will better now always check official documentation first.

> Both the Layout Editor and XML code editor […] can be used productively.

This was my hope. Of course, both editors can be used. But I’m interested was other experienced power user are going to use.

Question: what versions of SAPUI5 library will be supported by WebIDE ?

As I already explained we have to use 1.36.11. In summer 2018 I spent some time for training in Walldorf. Most of the training member where even using older version. So I’m not alone. I think many customers cannot follow the development of SAPUI5 right in time … of course I wish to upgrade asap. What is the SAP strategy to support old versions by Web IDE ?

Now about my question and your video:

At 34:45 the Prodducts view is already created. So it is unclear for me, how the view is set to entity set “/ProductSet”. This will be displayed at 35:37 in this way:

If I try to set this by the search help, I will be led to the following dialog with up to 3 options:

This dialog is one origin of my troubles. Whenever I set first or second option, some “bad code” will be inserted in my views XML.

Before:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="com.test.ZTEST.controller.Main" displayBlock="true"><App xmlns="sap.m" id="idAppControl">...

After:

<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="com.test.ZTEST.controller.Main" displayBlock="true" 
 xmlns:NS1="" NS1:xmlns:cd="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
<App xmlns="sap.m" id="idAppControl">...

… followed by the layout editors crash “Unable to open <viewname> with the layout editor”.

The sequence

xmlns:NS1=""

is not valid say other editors like Microsoft XML notepad. After I delete this auto-code I can go on with my work.

Then at 38:21 a list object will be added. The list inherits the entity set from the view … I guess. But where is this information stored ?! O.k. I have to do this by search help and choosing option no. 3 manually like in 38:24.

Last but not least I tried to link main and details view via the story board by this dialog:

When I set navigation by storyboard and this dialog, it works. (I had to clear all my navigations and routing in manifest.json and

auto-codes in the controllers)
When I set navigation by “Events/navigate to”, it doesn’t work. Perhaps I still do something wrong. I spent many time this week for analysis but I cannot find the difference. When you use the second way, no variable oContext will be set. Then the navigation will fail like this:

Implementing navigation is a little bit confusing. Using the storyboard is not self-explain, I think.
Do you have a deeper idea why my way fails ?

Thank you very much again.

Best regards, Markus

P.S. others might say: let's implement this manually ... but I'm a little bit lazy in the meantime 🙂 IDE should better do that ...