Skip to Content

Today I am working on another incident and I get to know another kind of reason which will lead to empty screen issue in UI.

My previous experience for potential reason of empty screen issue is, there must be some JavaScript execution error which causes the UI ceases to render.

The issue I am working on today: Say in system A when I try to create a follow up Opportunity based on a lead,

/wp-content/uploads/2016/06/clipboard1_984201.png

I could only see an empty screen. However in another system B, the followup navigation works correctly.

/wp-content/uploads/2016/06/clipboard2_981584.png

My issue analysis process

Step1. Check whether there are JavaScript error in console

During my past issue handling life, every time I find JavaScript error in console, I then realize the error is caused by the bug in our code, I fix the bug, then empty screen issue is gone. Unfortunately for this issue, there are not JavaScript error in console at all. All messages you see here is printed out via jQuery.sap.assert, which will not stop UI rendering.

Meanwhile I have also checked in system B where the navigation from Lead to Opportunity application works correctly with these same assertion message displayed. So the messages here should NEVER be considered as issue root cause.

Note: The screenshot of this blog with white background color are made from system A ( navigation DOES NOT work ), and the one with black background color from system B ( navigation works ).

/wp-content/uploads/2016/06/clipboard3_981585.png

Step2. Compare what resources have been loaded in both systems

In our system B, the creation page of Opportunity, S5.view.xml and S5.controller.js have been successfully loaded, which could be found in console tab:

/wp-content/uploads/2016/06/clipboard2_981584.png

However in system A, S5.controller.js is not there. So this hint should be used as a breakthrough for finding root cause.

/wp-content/uploads/2016/06/clipboard3_981585.png

Step3. Find out why S5.controller.js fails to be loaded in system A

You don’t know where to set breakpoint to start debugging? In system B where the navigation from Lead to Opportunity can work, type “S5.” in Network filter to filter the HTTP request to load S5.view.xml, then hover your mouse under column “Initiator”. Then the callstack to download this xml file is displayed. Just click any one of callstack frame and you will automatically reach the position of source code.

/wp-content/uploads/2016/06/clipboard4_981595.png

Then you can set breakpoint and start debugging.

 

/wp-content/uploads/2016/06/clipboard5_981599.png

Step4. Debug in both systems simultaneously to compare the difference

In this line the expected navigation target is parsed from route configuration.

/wp-content/uploads/2016/06/clipboard6_981600.png

Brief introduction on screenshot above:

1. route configuration is provided by application code Component.js or in manifest.json in higher UI5 version.

In Opportunity application, the route configuration is defined in Component.js.

/wp-content/uploads/2016/06/clipboard1_984201.png

2. The pattern with name “FollowupFromLead” in above picture has successfully matched to the input hash string: followupfromlead/Leads(guid’3440B5B1-73AE-1EE5-9DC6-FB90180B87AA’)/OPPT

/wp-content/uploads/2016/06/clipboard2_981584.png

/wp-content/uploads/2016/06/clipboard3_981585.png

And when I debug in system A, I find I enter the ELSE branch:

/wp-content/uploads/2016/06/clipboard5_981599.png

The warning message in console has already told us the root cause: It is application’s fault that it fails to provide a target UI to render.

/wp-content/uploads/2016/06/clipboard1_984201.png

Just compare the two Component.js in both systems and I find the root cause. There is a note which adds route “FollowupFromLead” which is missing in system A. Once the note is applied, the empty screen issue will be resolved.

/wp-content/uploads/2016/06/clipboard1_984201.png

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply