我曾經(jīng)于2014年10月到2016年5月工作于SAP CRM Fiori應(yīng)用的開發(fā)團(tuán)隊(duì), 我所在的團(tuán)隊(duì)負(fù)責(zé)下列這8個(gè)Fiori應(yīng)用的維護(hù)和持續(xù)開發(fā):

• My Opportunities
• My Tasks
• My Appointments
• My Leads
• My Notes
• Simulate Sales Pipeline
• Track Sales Pipeline

在這不到兩年的開發(fā)工作里，我在使用SAP UI5的過程中遇到各種各樣的問題，我都把它們一一記錄了下來。還有一些問題來源于我的好奇心，比如看到了一些UI效果，想知道它背后是怎么實(shí)現(xiàn)的；又比如觀察到了一些系統(tǒng)的看起來有點(diǎn)怪的行為，我想知道它究竟是確實(shí)就是這樣設(shè)計(jì)的，還是說我觀察到的其實(shí)是bug。另外一類問題是同樣的應(yīng)用，在系統(tǒng)A的行為是a，在系統(tǒng)B的行為是b。作為強(qiáng)迫癥患者，我總是要通過調(diào)試的方式搞清楚原因。對(duì)于這種我自己給自己提的問題，弄清楚答案之后我也記錄了下來，以備將來哪一天又會(huì)用到。

---

1. Explore the com.sap.ui5.resource.ResourceServlet

我們?cè)诒镜刈鯢iori開發(fā)時(shí)，經(jīng)常通過這樣的方式引入U(xiǎn)I5的庫文件。我剛接觸UI5時(shí)，就問過自己一個(gè)問題: 這個(gè)sap-ui-core.js在這里是通過相對(duì)路徑引入的。當(dāng)Fiori應(yīng)用在本地的服務(wù)器比如Tomcat啟動(dòng)時(shí)，到底是從哪個(gè)位置加載的該文件？

https://blogs.sap.com/2014/12/04/explore-the-comsapui5resourceresourceservlet/

2. My small experience about how to find the exact line position which causes “undefined is not a function” error

Partner比較容易遇到的問題: 實(shí)施了Fiori，或者在標(biāo)準(zhǔn)Fiori應(yīng)用上做了一些二次開發(fā)，打開應(yīng)用時(shí)白屏，Chrome的開發(fā)工具里有一些報(bào)錯(cuò)信息，但是不知道該如何定義到具體哪一行代碼引起的錯(cuò)誤。

ttps://blogs.sap.com/2014/12/11/my-small-experience-about-how-to-find-the-exact-line-position-which-causes-undefined-is-not-a-function-error/

3. Why my formatter does not work? A trouble shooting example to know how it works

UI5 formatter的原理講解, 和排錯(cuò)最佳實(shí)踐。

https://blogs.sap.com/2015/01/03/why-my-formatter-does-not-work-a-trouble-shooting-example-to-know-how-it-works/

4. Something about negative cache error

關(guān)于這種negative cache錯(cuò)誤信息的處理。

https://blogs.sap.com/2015/06/03/something-about-negative-cache-error/

5. An sample of My Opportunity application extension – hide a given tab in detail page

如何通過擴(kuò)展(extension)的方式修改標(biāo)準(zhǔn)Fiori應(yīng)用，例如隱藏某個(gè)tab:

https://blogs.sap.com/2015/06/03/an-sample-of-my-opportunity-application-extension-hide-a-given-tab-in-detail-page

6. Cannot open CRM My Opportunity application – how to trouble shoot

看到這種錯(cuò)誤消息 Could not open app. Try again later的排錯(cuò)處理。請(qǐng)注意這個(gè)錯(cuò)誤消息是在UI5一個(gè)非常通用的異常處理分支里拋出來的，換言之，有各種各樣的可能性會(huì)造成這個(gè)錯(cuò)誤，本文介紹的只是眾多種可能的原因之一。但是排錯(cuò)的思路是通用的。

https://blogs.sap.com/2015/06/03/cannot-open-crm-my-opportunity-application-how-to-trouble-shoot/

7. Implementation detail – how a field is hidden in runtime by view modification

UI5 View extension原理講解: 通過下圖的View extension將id為salesTeam的tab的visible屬性設(shè)置為false, 在運(yùn)行時(shí)就不會(huì)顯示出這個(gè)tab了。但這一切是怎么工作的？

https://blogs.sap.com/2015/06/12/implementation-detail-how-a-field-is-hidden-in-runtime-by-view-modification/

8. How to hide dynamically created UI fields via extension for My Opportunity application

UI5的View extension只能隱藏或者顯示那些靜態(tài)UI元素，即design time時(shí)就已經(jīng)定義在View里的元素。對(duì)于運(yùn)行期通過JavaScript代碼動(dòng)態(tài)創(chuàng)建的UI元素則無能為力。

本文介紹了對(duì)于后者如果需要?jiǎng)討B(tài)控制其隱藏還是顯示的實(shí)現(xiàn)方法。

https://blogs.sap.com/2015/06/17/how-to-hide-dynamically-created-ui-fields-via-extension-for-my-opportunity-application/

9. An example of End to End extension on CRM Fiori application

Fiori端到端的擴(kuò)展流程詳解。這是2015年專門為一個(gè)歐洲的Fiori實(shí)施伙伴寫的。一個(gè)很常見的Fiori擴(kuò)展需求：出于業(yè)務(wù)需要，客戶在標(biāo)準(zhǔn)的數(shù)據(jù)庫表里需要增加新的字段，這些字段需要暴露到Fiori上，能夠通過Fiori進(jìn)行增刪查改。

這是一個(gè)端到端的擴(kuò)展，即底層數(shù)據(jù)庫表，OData模型，OData服務(wù)實(shí)現(xiàn)，和Fiori 標(biāo)準(zhǔn)UI都必須逐一擴(kuò)展。這個(gè)教程分4篇文章，鏈接如下：

https://blogs.sap.com/2015/06/18/an-example-of-end-to-end-extension-on-crm-fiori-application-part1/

10. ?CRM Fiori Application – how is image maintained and displayed in Fiori UI

Fiori圖片顯示原理介紹

https://blogs.sap.com/2015/06/19/crm-fiori-application-how-is-image-maintained-and-displayed-in-fiori-ui/

11. A Test on Fiori OData request Synchronous mode VS Asynchronous mode

UI5的OData讀的API有個(gè)參數(shù), 指定按照同步或異步的方式讀取數(shù)據(jù)。這個(gè)參數(shù)會(huì)對(duì)應(yīng)用產(chǎn)生什么樣的影響呢？

https://blogs.sap.com/2015/06/19/a-test-on-fiori-odata-request-synchronous-mode-vs-asynchronous-mode/

12. Fiori Busy Dialog – when is it opened and closed

我一度沉迷于Fiori這個(gè)美輪美奐的花瓣式動(dòng)畫效果，很想知道它的實(shí)現(xiàn), 就自己調(diào)試了一把:

https://blogs.sap.com/2015/06/24/fiori-busy-dialog-when-is-it-opened-and-closed

13. Fiori Icon logic

這又是我剛接觸Fiori時(shí)問自己的問題之一: 為什么我在源碼里寫了一個(gè)sap-icon://add的字符串，運(yùn)行期它就被渲染成了一個(gè)加號(hào)？

https://blogs.sap.com/2015/06/27/fiori-icon-logic/

14. Another potential reason for Fiori timeout error

這是我負(fù)責(zé)處理過的一個(gè)標(biāo)準(zhǔn)Fiori應(yīng)用的超時(shí)問題。把我折騰慘了，有的用戶能夠重現(xiàn)，有的不能。我花了很長時(shí)間同時(shí)調(diào)試這兩個(gè)用戶，發(fā)現(xiàn)程序執(zhí)行流沒有任何差異。我?guī)缀跻罎⒘?#xff0c;最后發(fā)現(xiàn)問題的根源原來是。。。。。。被隊(duì)友坑了。

https://blogs.sap.com/2015/07/02/another-potential-reason-for-fiori-timeout-error/

15. Fiori擴(kuò)展教程

CRM WebClient UI里的兩個(gè)標(biāo)準(zhǔn)字段Sales Office和Sales Group沒有暴露在CRM Fiori的My Opportunities UI上。

這個(gè)教程介紹了如何一步步將這兩個(gè)標(biāo)準(zhǔn)字段放到Fiori UI上。

https://blogs.sap.com/2015/07/11/step-by-step-to-expose-sales-office-and-sales-group-to-my-opportunity-part1/

16. How to quickly locate the code error in application which causes UI stop to load

案例分析: 當(dāng)加載Fiori應(yīng)用出現(xiàn)白屏?xí)r，一定是某個(gè)地方的JavaScript文件執(zhí)行出錯(cuò)了。

本文介紹了如何快速找到引起錯(cuò)誤的JavaScript代碼的準(zhǔn)確位置。

https://blogs.sap.com/2015/07/16/how-to-quickly-locate-the-code-error-in-application-which-causes-ui-stop-to-load/

17. why there are always multiple read operations after BATCH operation is done successfully

Partner提的問題：為什么SAP發(fā)布的標(biāo)準(zhǔn)Fiori應(yīng)用，在UI上做了某個(gè)操作后，從Chrome開發(fā)工具里觀察到有三個(gè)一模一樣的HTTP請(qǐng)求發(fā)到后臺(tái)？

https://blogs.sap.com/2015/07/23/why-there-are-always-multiple-read-operations-after-batch-operation-is-done-successfully/

18. How to remove the blue background color of Edit button in footer toolbar

真實(shí)的客戶需求。默認(rèn)的編輯按鈕具有藍(lán)色的背景色。有個(gè)客戶不太喜歡，希望通過View擴(kuò)展的方式將其移除。

最后希望實(shí)現(xiàn)這樣的效果。

https://blogs.sap.com/2015/08/26/how-to-remove-the-blue-background-color-of-edit-button-in-footer-toolbar/

如果想把背景色改成其他顏色，也是可以的：

https://blogs.sap.com/2015/09/23/how-to-change-the-background-color-of-button-in-footer-area/

19. Step by Step to consume HANA Query view in CRM Fiori

在CRM Fiori應(yīng)用里消費(fèi)HANA Studio里創(chuàng)建的Query view

https://blogs.sap.com/2015/08/27/step-by-step-to-consume-hana-query-view-in-crm-fiori/

20. How to monitor the control registration and deregistration

排錯(cuò)需求：需要監(jiān)控某個(gè)UI控件的初始化和析構(gòu)的準(zhǔn)確時(shí)間點(diǎn)，來跟蹤一些代碼bug。

https://blogs.sap.com/2015/10/01/how-to-monitor-the-control-registration-and-deregistration/

21. Regarding Edm.DateTime in Fiori application

處理一個(gè)客戶ticket時(shí)的學(xué)習(xí)筆記。UI上我們看到的Closing Date是Oct 3, 2015.

從Chrome里看到的數(shù)據(jù)源是/Date(1443830400000)/。從/Date(1443830400000)/到Oct 3, 2015,背后發(fā)生了什么？

https://blogs.sap.com/2015/10/01/regarding-edmdatetime-in-fiori-application/

22. How to trouble shoot field binding issue

字段綁定是一個(gè)常見的容易出錯(cuò)的地方，即我們給控件指定了綁定，但是該控件在渲染出來的UI上什么也沒顯示。本文介紹了排錯(cuò)方法。

https://blogs.sap.com/2015/10/01/how-to-trouble-shoot-field-binding-issue/

23. More details of DatePicker

處理客戶ticket的學(xué)習(xí)筆記，關(guān)于DatePicker這個(gè)控件的實(shí)現(xiàn)細(xì)節(jié)。

https://blogs.sap.com/2015/10/09/more-details-of-datepicker/

日期格式的講解專門放在另一篇文章:

https://blogs.sap.com/2015/10/14/dateformat-in-datepicker-control/

24. Some refacting examples with the help of Function.prototype

看了UI5源代碼里對(duì)Function.prototype使用后出于學(xué)習(xí)目的的一些模仿:

https://blogs.sap.com/2015/10/13/some-refacting-examples-with-the-help-of-functionprototype/

25. Language related topic for DatePicker

DatePicker控件多語言的支持:

https://blogs.sap.com/2015/10/15/language-related-topic-for-datepicker/

26. How to dynamically change the formatOption of control in the runtime via debugging

為什么上下兩個(gè)field顯示的日期格式不一致?

https://blogs.sap.com/2015/10/19/how-to-dynamically-change-the-formatoption-of-control-in-the-runtime-via-debugging/

27. Contact Support button display logic in Fiori

為什么有的系統(tǒng)Fiori出錯(cuò)后, 錯(cuò)誤提示里能看到Contact Support的按鈕，

而有的系統(tǒng)看不到？作為強(qiáng)迫癥患者，一定用通過調(diào)試的方式搞清楚原因。

https://blogs.sap.com/2015/10/19/contact-support-button-display-logic-in-fiori/

28. Two types of popup Dialogs in Fiori

Fiori里兩種彈出對(duì)話框的實(shí)現(xiàn)原理。在處理ticket時(shí)，我們經(jīng)常需要找到準(zhǔn)確的拋出這些對(duì)話框的代碼位置。

ttps://blogs.sap.com/2015/10/23/two-types-of-popup-dialogs-in-fiori/

29. A Tutorial how I do self-study on a given Fiori control and UI5 framework code behind

我的UI5框架代碼自學(xué)教程

https://blogs.sap.com/2015/10/26/a-tutorial-how-i-do-self-study-on-a-given-fiori-control-and-ui5-framework-code-behind/

30. An useful Chrome extension – UI5 Inspector

一個(gè)有用的Chrome擴(kuò)展應(yīng)用: UI5 Inspector

https://blogs.sap.com/2015/12/19/an-useful-chrome-extension-ui5-inspector/

31. Use Fiddle to make modifications on framework js file

Fiddle的另類用途:

ttps://blogs.sap.com/2016/01/18/use-fiddle-to-make-modifications-on-framework-js-file/

32. Currency example – how Smart field works

Smart field工作原理介紹。SAP help上關(guān)于Smart field的定義:

Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios. One important building block of smart controls is the SmartField control that, depending on the OData metadata defined, allows you to renders other controls and, for example, define fields with certain attributes based on the metadata.

XML View中的一個(gè)定義例子:

運(yùn)行時(shí)效果如圖：

https://blogs.sap.com/2016/03/14/currency-example-how-smart-field-works/

33. 具有value help的Smart field原理介紹

https://blogs.sap.com/2016/03/15/smart-field-with-value-help/

34. 具有超鏈接的Smart field原理介紹

https://blogs.sap.com/2016/03/15/smart-field-with-smart-link/

35. Chrome Development Tool tips used in my daily work

我在用Chrome開發(fā)工具排錯(cuò)時(shí)積累的一些使用小技巧

https://blogs.sap.com/2016/03/15/chrome-development-tool-tips-used-in-my-daily-work/

36. How SmartTable works

Smart table工作原理介紹

https://blogs.sap.com/2016/03/16/how-smarttable-works/

37. Create a CRM Service Order Fiori application within a couple of minutes

利用Smart Template框架快速搭建一個(gè)Fiori應(yīng)用, 該應(yīng)用支持搜索，并且從搜索結(jié)果能跳轉(zhuǎn)到明細(xì)頁面。這個(gè)搜索和跳轉(zhuǎn)的功能都不需要通過JavaScript開發(fā)的方式實(shí)現(xiàn)。

https://blogs.sap.com/2016/03/31/create-a-crm-service-order-fiori-application-within-a-couple-of-minutes/

如果想在明細(xì)頁面里支持編輯功能，請(qǐng)參考這篇文章：

https://blogs.sap.com/2016/04/10/enable-crm-service-order-application-with-edit-functionality/

如果想支持粗昂見功能，參考這篇文章:

https://blogs.sap.com/2016/05/24/access-the-odata-service-exposed-by-your-cds-view-via-smart-business-tile-in-s4hana-system/

38. An example of Fiori Globalization implementation – the logic of amount value truncation

為什么來自后臺(tái)同一個(gè)值，有的UI控件顯示的是1880，有的控件卻顯示2K? 本文向您揭秘。

https://blogs.sap.com/2016/04/11/an-example-of-fiori-globalization-implementation-the-logic-of-amount-value-truncation/

39. An example of Fiori Globalization implementation – the number format mistery

強(qiáng)迫癥患者看到這個(gè)差異，又得進(jìn)行一番調(diào)試搞清楚具體在哪行JavaScript代碼造成的這種顯示差異了。

https://blogs.sap.com/2016/04/11/an-example-of-fiori-globalization-implementation-the-number-format-mistery/

40. Do you understand the logic of HTTP 200 OK and HTTP 304 Not Modified

揭秘為什么同樣是HTTP請(qǐng)求，有的收到回復(fù)是200，有的是304？

https://blogs.sap.com/2016/04/21/do-you-understand-the-logic-of-http-200-ok-and-http-304-not-modified/

41. My understanding about how object page in Smart Template is rendered

Smart Template框架的渲染原理介紹

https://blogs.sap.com/2016/05/03/my-understanding-about-how-object-page-in-smart-template-is-rendered/

42. How to inject your own XML view into application generated by Smart Template

本文介紹如何在Smart Template框架生成的View(紅色區(qū)域)里嵌入開發(fā)人員設(shè)計(jì)的自定義View(藍(lán)色區(qū)域)。

https://blogs.sap.com/2016/05/03/how-to-inject-your-own-xml-view-into-application-generated-by-smart-template/

43. An example of how to find back button implementation on Smart Template generated application

介紹Smart Template生成的應(yīng)用里，這個(gè)后退按鈕的實(shí)現(xiàn)原理。

https://blogs.sap.com/2016/05/04/an-example-of-how-to-find-back-button-implementation-on-smart-template-generated-application/

44. More detail about Bootstrap script tag

剛學(xué)UI5時(shí)我對(duì)這個(gè)sap-ui-bootstrap字符串很好奇，去掉或者改成其他的值可以么？

https://blogs.sap.com/2016/05/15/more-detail-about-bootstrap-script-tag/

45. A small tip I learn from UI5 Diagnostics tool - a practice of AOP programming

我從這個(gè)UI5 Diagnostics工具中學(xué)到的知識(shí)。

https://blogs.sap.com/2016/05/16/a-small-tip-i-learn-from-ui5-diagnostics-tool-a-practice-of-aop-programming/

46. Build Chart and Table representation via Analytics Path Framework

APF使用介紹:

https://blogs.sap.com/2016/05/21/build-chart-and-table-representation-via-analytics-path-framework/

47. A quick way to find which code has changed the UI5 application page title by debugging

一個(gè)ticket的處理記錄。

Fiori應(yīng)用的正常行為，是點(diǎn)擊一個(gè)Tile后，瀏覽器會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的應(yīng)用頁面，并且窗口顯示該應(yīng)用的名稱。

我接到的ticket抱怨的行為是窗口沒能正確顯示出應(yīng)用的名稱:

https://blogs.sap.com/2016/05/26/a-quick-way-to-find-which-code-has-changed-the-ui5-application-page-title-by-debugging/

48. UI5 debug flag and Local Storage – how is your setting persisted?

這個(gè)選項(xiàng)勾上之后，關(guān)掉瀏覽器再打開仍然生效。它的值保存在本地什么位置？

https://blogs.sap.com/2016/06/25/ui5-debug-flag-and-local-storage-how-is-your-setting-persisted/

49. How is OData request routed to Offline data store by Odata offline plugin

SAP Offline OData Plugin的原理介紹之一, 主要介紹JavaScript實(shí)現(xiàn)部分。

https://blogs.sap.com/2016/08/04/how-is-odata-request-routed-to-offline-data-store-by-odata-offline-plugin/

50. How is JavaScript code in OData offline plugin delegated to native Java code in Android

SAP Offline OData Plugin的原理介紹之二。以Android平臺(tái)為例，介紹前臺(tái)JavaScript代碼是如何被投遞到后臺(tái)Java代碼去的。

https://blogs.sap.com/2016/08/04/how-is-javascript-code-in-odata-offline-plugin-delegated-to-native-java-code-in-android/

51. How is OData offline store opened in Android platform

SAP Offline OData Plugin的原理介紹之三。介紹了Android平臺(tái)上OData離線存儲(chǔ)打開的實(shí)現(xiàn)。

https://blogs.sap.com/2016/08/05/how-is-odata-offline-store-opened-in-android-platform/

52. Step by step to run your Fiori application locally on NodeJS

用nodejs啟動(dòng)Fiori應(yīng)用

https://blogs.sap.com/2016/12/20/step-by-step-to-run-your-fiori-application-locally-on-nodejs/

如果想用nodejs啟動(dòng)本地launchpad，然后再通過點(diǎn)擊tile訪問你的應(yīng)用也是可以的。

https://blogs.sap.com/2016/12/20/how-to-put-your-fiori-application-into-local-launchpad-via-nodejs/

53. How is old SAP GUI transaction embedded into Fiori launchpad

S/4HANA里很多貌似Fiori的應(yīng)用其實(shí)它們并不是用原生的UI5技術(shù)實(shí)現(xiàn)的，而只是SAPGUI的ABAP應(yīng)用包了一層Fiori的外殼。本文介紹這種仿Fiori應(yīng)用的原理。

https://blogs.sap.com/2016/12/21/how-is-old-sap-gui-transaction-embedded-into-fiori-launchpad/

54. Why Adapt UI button is visible in some system but missing in some other system

在S/4HANA的Fiori UI上，用戶可以點(diǎn)擊Adapt UI進(jìn)入U(xiǎn)I Adaptation模式來對(duì)UI的布局做微調(diào)。但是在有些系統(tǒng)上，看不見這個(gè)Adapt UI按鈕。為什么？

https://blogs.sap.com/2016/12/29/why-adapt-ui-button-is-visible-in-some-system-but-missing-in-some-other-system/

55. Fiori launchpad page server side configuration

介紹S/4HANA Fiori Launchpad服務(wù)器端的配置原理。

https://blogs.sap.com/2016/12/29/fiori-launchpad-page-server-side-configuration/

56. Why my extension field does not appear in Available Fields list for extension

S/4HANA的FioriUI上用工具創(chuàng)建了一個(gè)新的擴(kuò)展字段:

但是想將其配置到UI上時(shí)，從”可用字段”的下拉列表里查找不到該擴(kuò)展字段，無法添加到UI上。

https://blogs.sap.com/2016/12/30/why-my-extension-field-does-not-appear-in-available-fields-list-for-extension/

57. An example of how cross distribution chain status is updated via draft handling in Fiori application

介紹S/4HANA里Draft handling的實(shí)現(xiàn)原理。

https://blogs.sap.com/2017/01/04/an-example-of-how-cross-distribution-chain-status-is-updated-via-draft-handling-in-fiori-application/

58. How to find the backend storage table field for a field in Fiori UI

在SAPGUI里運(yùn)行的應(yīng)用，如果我們想知道一個(gè)字段的值是存在哪張數(shù)據(jù)庫表的哪個(gè)字段，只需要按F1，在彈出的對(duì)話框里即可找到。

到了Fiori里，我們?nèi)匀挥蓄愃频男枨?#xff0c;但是F1已經(jīng)沒法用了。本文介紹如何找到Fiori UI上某個(gè)字段對(duì)應(yīng)的后臺(tái)存儲(chǔ)。

https://blogs.sap.com/2017/01/06/how-to-find-the-backend-storage-table-field-for-a-field-in-fiori-ui/

59. Useful Chrome Tool chrome://net-internals to monitor http request detail

介紹Chrome這個(gè)Net Internals工具的用途。

https://blogs.sap.com/2017/02/06/useful-chrome-tool-chromenet-internals-to-monitor-http-request-detail/

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)”汪子熙”或者掃描下面二維碼:

總結(jié)

以上是生活随笔為你收集整理的Jerry的Fiori原创文章合集的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。