My UI5 debugging tips and experience collection – how to resolve UI5 issues through debugging by yourself
- Chrome development tool
- UI5 inspector
- Deal with “blank screen issue”
- UI5 field formatter
- Negative cache
- Control registration and deregistration
- Fiori flower animation
- Fiori Icon logic
- Find out the origin of suspicious HTTP roundtrips
- Date Picker
- Contact support button behavior
- Two types of popup Dialog in Fiori
- Fiori globalization – amount display truncation logic
- An example of Fiori Globalization implementation – the number format mystery
- HTTP 200 OK and HTTP 304 Not Modified
- An example of how to find back button implementation on Smart Template generated application
- FullScreenPageRoutes in Component.js
- An easy way to find location where Unique id of UI5 control is created
- More detail about Bootstrap script tag
- A small tip I learn from UI5 Diagnostics tool – a practice of AOP programming
- Another reason of empty screen issue and how I analyze the issue
- Why Adapt UI button is visible in some system but missing in some other system
- Open your SAP GUI transaction in Fiori launchpad
- Why sometimes my OData request is cancelled automatically
- How ABAP syntax highlight is implemented in “WebIDE” launched via browser
- How does UI5 AutoGrowing list work
- LAST BUT NOT THE LEAST – Tutorial how I do self-study on a given Fiori control and UI5 framework code behind
Updated on 2017-10-13 after I am working on Cloud for Customer for three months
Three years ago I wrote a blog Six kinds of debugging tips to find the source code where the message is raised in ABAP forum, trying to summarize my ABAP debugging experience by using a concrete example.
Chrome development tool
All the blogs mentioned here are written based on Chrome development tool. I can hardly imagine my life without it. It is so necessary to know and master how this tool can aid we Fiori developers to debug code swiftly and efficiently. I have listed all the tips how I leverage this tool in my daily work in this blog: Chrome Development Tool tips used in my daily work.
UI5 inspector in one of my favorite Chrome extension I use every day. See how to install it from this blog: An useful Chrome extension – UI5 Inspector.
Deal with “blank screen issue”
So the essential thing is to find out the exact line of SAP application code or your own enhancement which causes the trouble, so you can report incident to SAP application or fix your own code. There is an example in this blog My small experience about how to find the exact line position which causes “undefined is not a function” error to demonstrate the trouble shooting tip.
See this blog How to quickly locate the code error in application which causes UI stop to load for another example.
UI5 field formatter
In Fiori UI the field formatter is widely used in XML view.
The frequently asked questions accordingly are:
- why my field formatter is not called at all?
- why I have specified formatter, and I can also see response is back from backend in Chrome development tool, why still finally I see empty UI field?
You can find answer to those questions as long as you understand how formatter works under the hood. You can read this blog Why my formatter does not work? A trouble shooting example to know how it works to know more.
Even if you don’t use any formatter, it is still useful if you understand the logic of data binding. See the explanation of data binding logic I learned via debugging from this blog How to trouble shoot field binding issue.
“Error: found in negative cache” – this error message found in console is always accompanied with the error dialog below.
If you know clearly about its meaning, you can then avoid it. See Something about negative cache error for detail.
Control registration and deregistration
Junior Fiori developers define control in XML view, bind control to a given model field. In the runtime the field displays value contained in model field correctly. That’s all. They know nothing about why this data binding works as expected. They know nothing about the life-cycle management of control done by UI5 framework. As a result when tricky issues emerge, they don’t know how to proceed. They may complain there is no documentation to discuss about this topic.
Now, you can research this stuff by yourself via debugging. See this blog How to monitor the control registration and deregistration which contains my approach to study control life-cycle management by debugging framework code.
Another related blog: How to find the location where control id is created in the runtime.
How to dynamically change UI behavior via debugging
As a SAP developer, during my incident support life, usually I have to debug directly in customer system since the reported issue could not be reproduced in our internal system. Sometimes I find suspicious code which causes the issue, I would like to verify such as “If I chance the source code XXXX to code YYYY, the issue may be resolved”. Of course I could not directly change UI code in customer system, however thanks to Chrome development tool, I can change the code loaded in Chrome development tool temporarily to finish my verification.
For example, I have a two DatePicker field with formatOptions set as style: long.
I need to change it to “style: medium” for verification purpose in the customer system. See this blog How to dynamically change the formatOption of control in the runtime via debugging for detail.
Fiori flower animation
As a Fiori developer or user you probably see this animation every day.
Have you ever thought about how it is implemented? You can read this blog Fiori Busy Dialog – when is it opened and closed to know how I find answer by debugging.
Fiori Icon logic
When I write the following code for the first time, I am curious about how the string “sap-icon://add” can finally be converted to a “+” icon in UI. If you have the same curiosity as me, see this blog Fiori Icon logic.
Find out the origin of suspicious HTTP roundtrips
This is a real question asked by one Australia customer by incident. Customer challenges SAP that why there are always three HTTP read roundtrips every time a given appointment is successfully saved.
And this blog why there are always multiple read operations after BATCH operation is done successfully contains my reply to the customer 🙂
These blogs below are related to the UI5 control Date Picker. They are written after I have resolved some customer incidents with this control involved.
- Regarding Edm.DateTime in Fiori application
- More details of DatePicker
- DateFormat in DatePicker control
- Language related topic for DatePicker
Contact support button behavior
One day I was confused by the fact that I could see “Contact Support” in the error dialog in some system while in some other system the button is gone.
I cannot help figuring it out via debugging: Contact Support button display logic in Fiori.
Two types of popup Dialog in Fiori
The appearance of popup dialog normally is a sign to end user that something wrong occurs ( error popup dialog ) or some operation has been done ( info / success dialog ). A normal use case is to find out exactly in which line the popup dialog is raised. See this blog Two types of popup Dialog in Fiori.
Fiori globalization – amount display truncation logic
Have you even observed and asked yourself why 1880 USD in detail page is displayed as 2K USD in master list?
You are sure that it is framework which does this for you, but you don’t know in which code the task is done. See this blog An example of Fiori Globalization implementation – the logic of amount value truncation to find answer.
An example of Fiori Globalization implementation – the number format mystery
Can you explain the reason of this display format difference?
If not, see this blog to find answer: An example of Fiori Globalization implementation – the number format mystery.
HTTP 200 OK and HTTP 304 Not Modified
This question is also asked by one of our customer. They have performance issue using Fiori solution and they are monitoring the resource loading performance in Chrome development tool and notice this behavior: for some resource, response is HTTP 200 while for others HTTP 304.
Although this blog Do you understand the logic of HTTP 200 OK and HTTP 304 Not Modified contains mostly the debugging in ABAP backend, it still contains the tips to observe HTTP request and response in Chrome development tool, which is essential part to answer customer’s doubt.
An example of how to find back button implementation on Smart Template generated application
Suppose you want to debug the back button implementation, where you should set breakpoint? The application displayed below is automatically generated by Smart Template, so it is then not possible for you to check controller source code in application folder since the whole UI code is now owned by template. I use the approach to quickly identify the location of source code which handles click event, I call it “tentative search”: An example of how to find back button implementation on Smart Template generated application.
FullScreenPageRoutes in Component.js
In CRM Fiori application you can find the definition of fullScreenPageRoute in file Component.js. If you don’t know why it is needed and how it works in the runtime, you can read this blog An example to learn how fullScreenPageRoutes works in full screen application via debugging.
An easy way to find location where Unique id of UI5 control is created
Would you like to figure out how those IDs are generated? See this blog for answer.
More detail about Bootstrap script tag
Do you really know the detail of this tag? Can I change this id of this tag to other value like id=”helloword”, does it still work? Find answer from this blog.
A small tip I learn from UI5 Diagnostics tool – a practice of AOP programming
Have you even used this tool provided by UI5 activated via Ctrl+Alt+Shift+S? Have you even heard of AOP programming? Read this blog for more detail.
Another reason of empty screen issue and how I analyze the issue
Why “Adapt UI” button is available in some system but missing in some other system
Compare the two screenshots below which are caught via the same user but in different system. Feel confused about this behavior? You can debug yourself to find out the root cause. See detail from this blog.
Open your SAP GUI transaction in Fiori launchpad
Would you like to directly open the traditional SAP GUI transaction in Fiori launchpad now? Sounds impossible? See this blog about how I find out the secret and see this blog for step by step guide.
Why sometimes my OData request is cancelled automatically
Do you know the reason why sometimes your OData request is cancelled by UI5 framework automatically? If you would like to learn more about this cancellation logic, you can read my blog for detail.
Some of my other blogs regarding UI5 debugging
How to find UI element binding path which is not statically defined in XML view
How ABAP syntax highlight is implemented in “WebIDE” launched via browser
Would you like to know how ABAP syntax highlight is implemented in the browser? Try to debug to figure it out by yourself by following this blog.
How does UI5 AutoGrowing list work
When you scroll down the table in S/4HANA Fiori application built by Smart Template,
the list will automatically grow: more data will be fetched from backend. Would you like to figure out how it works? See this blog.
LAST BUT NOT THE LEAST – Tutorial how I do self-study on a given Fiori control and UI5 framework code behind
Normally a Fiori application consists of various controls provided by UI5 library. If you just want to use a certain control and make it work in your application, it is enough for you to just go through the control API document, play it around in UI5 demokit. But if you meet with issues with the control, or you would like to know how the control is manipulated by UI5 framework to write a more robust and more efficient application, it is then inevitable that you need to dive into the UI5 framework source code.
Thus I write this tutorial, using the more simple button control for example, to illustrate how to thoroughly understand this control, together with the involved framework code in an step-by-step way.
The building blocks of this tutorial:
Part 1 UI5 module lazy load mechanism
Part 3 Native html event VS UI5 semantic event
Part 7 Implementations for different binding mode: OneWay, TwoWay, OneTime
Part 9 Control internationalization support
Part 10 Button control in XML view
Part 11 Button control and its underlying DOM node
More to be added as long as I have resolved new incidents with debugging…
Great Blog!!!! Very Useful and saved lot a explore time. 🙂
one of the best blogs i have read - well done
Jerry - excellent contributions to the community!
Very Helpful. Thank you for the blog.