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,
I could only see an empty screen. However in another system B, the followup navigation works correctly.
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 ).
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:
However in system A, S5.controller.js is not there. So this hint should be used as a breakthrough for finding root cause.
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.
Then you can set breakpoint and start debugging.
Step4. Debug in both systems simultaneously to compare the difference
In this line the expected navigation target is parsed from route configuration.
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.
(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
And when I debug in system A, I find I enter the ELSE branch:
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.
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.
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关推荐
Jerry 也是从 SAP UI5 菜鸟一路走过来,深知只有 ABAP 开发背景的开发者,向 SAP UI5 开发领域转型的不易,因此我在业余时间设计了这份适合 SAP UI5 初学者的学习教程,把开发一个完整的 SAP UI5 应用的流程,拆分成...
SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档
Getting Started with SAPUI5
讲解SAPUI5如何搭建,如何开发应用。 说明,文档为英文 内容如下: SAPUI5 Overview Runtime Resources Programming Applications SAPUI5 Developer Studio Creating a SAPUI5 Project Resource Handling / ...
SAP UI5入门级资料
sap ui5表单例子,使用sap ui5创建表单
SAP UI5 OVERVIEW 简单介绍UI5
SAPUI5 详细讲解
Tutorial to Develop a SAPUI5 Application with oData Access.sap ui5使用odata进行数据的交互
sap ui5通用组件例子,常用组件的使用例子
本篇为大家介绍SAPUI5开发环境配置步骤 以上安装完成之后,就可以进行SAPUI5的开发
SAPUI5-Training
SAP_UI5_Reference_for_SAP_HANA_en
sap ui5工具栏例子,工具栏的交互,布局,使用
sap ui5表格例子,教你如何使用表格进行数据的显示和绑定
SAP开发 将UI5程序打包成安卓APP的方法及详细的过程步骤
本文档描述了如何搭建SAP Fiori应用程序的开发环境,应用程序开发语言为SAPUI5。
SAP官方UI框架,丰富的组件库,适用于混合型APP开发
Installation Guide UI development toolkit for HTML5
SAP UI5作为前端开发框架,使用SAP Gataway开发后端OData Service