使用调试的方式搞清楚SAP UI5应用标题的更改方式

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的原创文章，请关注公众号"汪子熙":

使用调试的方式搞清楚SAP UI5应用标题的更改方式相关推荐

SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 应用开发教程之五十一 - 如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用
本教程的前一步骤,我们介绍了如何使用 Cordova 将已经开发好的,能够在 PC 端运行的 SAP UI5 应用,构建并打包成 apk 文件,以便像 Android 原生应用一样,安装到安卓移动设备 ...
SAP UI5 应用开发教程之四十九 - 如何在桌面电脑端调试运行在手机上的 SAP UI5 应用试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
如何以 mock server 的方式本地启动 SAP UI5 应用，使它不连接服务器端 OData 服务
我们在做 SAP UI5 开发时,在视图逻辑没有开发完毕时,往往不希望连接服务器端的 OData 服务进行联调,而仅仅连接本地端的测试数据. 本文介绍如果启动本地 mock server,将 SAP ...
如何将自开发的SAP UI5应用以tile的方式配置到SAP Fiori Launchpad里
使用一个具有Business Role SAP_CORE_BC_EXT的用户登录S/4HANA: 在Custom Catalog Extensions tile里搜索需要配置到SAP Fiori La ...
SAP Spartacus 页面标题的更改机制 - 谁动了我的页面标题？
我的Spartacus应用里,页面标题是Mystore: 为何最后页面渲染出来,title变成了homepage? 通过调试的方式来找原因: Spartacus-storefront.js里的set方 ...
SAP UI5 应用开发教程之六十七 - 基于 OData V4 的 SAP UI5 List-Detail(列表-明细)布局的实现方式试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 图片显示控件 Avatar 的使用方式介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
SAP UI5 应用指定主题 theme 的几种方式和其优先级
您可以在引导程序中.使用 URL 参数或使用方法 sap.ui.getCore.applyTheme 等多种方式,来定义 SAP UI5 应用程序使用哪个主题. 初始主题可以硬编码在应用程序中(在加载 ...

使用调试的方式搞清楚SAP UI5应用标题的更改方式

使用调试的方式搞清楚SAP UI5应用标题的更改方式相关推荐

最新文章

热门文章