In Fiori launchpad, the page title will display default value “Home”. When I click a given tile to enter an UI5 application, the page title is changed for example from “Home” to “My Tasks”.
Today I am dealing with an incident that once I have entered one application, the page title is not displayed correctly, see below error screenshot:
In order to fix this issue, I need to know exactly which line has changed the value of page title. Since I don’t have any clue why page title becomes like this when I enter the erroneous application, so my thought is if I can test with an application where the page title works correctly, and if I can find out the line of code for title value assignment, then I can set breakpoint on that line and debug back with erroneous application.
Thanks to the power of Chrome development tool, I can finish trouble shooting in a quite efficient way.
First step, Identify which html tag holds the value of page title. Open Chrome development tool, click Elements tab and locate the tag “title”. Change its value and the change will refresh in browser immediately. This proves the fact that it is title tag which holds page title.
Then right click this title element, choose “Break on…” and mark all three options.
Now go back from application to launchpad by clicking back button, break point is triggered.
Navigate back to an application where page title display works. So it is Shell.controller.js who is responsible to change page title with variable sTitle. Now my task is to find out how variable sTitle is filled.
Go back to an outer callstack frame, sTitle comes from one attribute of object oMetadata. So where is oMetadata filled?
In line 892, now I understand: the oMetadataConfig comes from metadata configuration defined in Fiori application:
And this is i18n.properties file:
For a complete blog list of how I use Chrome development tool in my daily work, please find it from this blog: Chrome Development Tool tips used in my daily work.
要获取更多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
SAP UI5入门级资料
sap ui5表单例子,使用sap ui5创建表单
讲解SAPUI5如何搭建,如何开发应用。 说明,文档为英文 内容如下: SAPUI5 Overview Runtime Resources Programming Applications SAPUI5 Developer Studio Creating a SAPUI5 Project Resource Handling / ...
SAP UI5 OVERVIEW 简单介绍UI5
SAPUI5 详细讲解
sap ui5通用组件例子,常用组件的使用例子
SAPUI5-Training
本篇为大家介绍SAPUI5开发环境配置步骤 以上安装完成之后,就可以进行SAPUI5的开发
Tutorial to Develop a SAPUI5 Application with oData Access.sap ui5使用odata进行数据的交互
SAP_UI5_Reference_for_SAP_HANA_en
sap ui5表格例子,教你如何使用表格进行数据的显示和绑定
sap ui5工具栏例子,工具栏的交互,布局,使用
SAP开发 将UI5程序打包成安卓APP的方法及详细的过程步骤
SAP官方UI框架,丰富的组件库,适用于混合型APP开发
本文档描述了如何搭建SAP Fiori应用程序的开发环境,应用程序开发语言为SAPUI5。
Installation Guide UI development toolkit for HTML5
Fiori的方式开发响应式SAPUI5应用程序