我曾經于2014年10月到2016年5月工作于SAP CRM Fiori應用的開發團隊, 我所在的團隊負責下列這8個Fiori應用的維護和持續開發:

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

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

---

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

我們在本地做Fiori開發時，經常通過這樣的方式引入UI5的庫文件。我剛接觸UI5時，就問過自己一個問題: 這個sap-ui-core.js在這里是通過相對路徑引入的。當Fiori應用在本地的服務器比如Tomcat啟動時，到底是從哪個位置加載的該文件？

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比較容易遇到的問題: 實施了Fiori，或者在標準Fiori應用上做了一些二次開發，打開應用時白屏，Chrome的開發工具里有一些報錯信息，但是不知道該如何定義到具體哪一行代碼引起的錯誤。

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的原理講解, 和排錯最佳實踐。

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

關于這種negative cache錯誤信息的處理。

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

如何通過擴展(extension)的方式修改標準Fiori應用，例如隱藏某個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

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

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屬性設置為false, 在運行時就不會顯示出這個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只能隱藏或者顯示那些靜態UI元素，即design time時就已經定義在View里的元素。對于運行期通過JavaScript代碼動態創建的UI元素則無能為力。

本文介紹了對于后者如果需要動態控制其隱藏還是顯示的實現方法。

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端到端的擴展流程詳解。這是2015年專門為一個歐洲的Fiori實施伙伴寫的。一個很常見的Fiori擴展需求：出于業務需要，客戶在標準的數據庫表里需要增加新的字段，這些字段需要暴露到Fiori上，能夠通過Fiori進行增刪查改。

這是一個端到端的擴展，即底層數據庫表，OData模型，OData服務實現，和Fiori 標準UI都必須逐一擴展。這個教程分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有個參數, 指定按照同步或異步的方式讀取數據。這個參數會對應用產生什么樣的影響呢？

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這個美輪美奐的花瓣式動畫效果，很想知道它的實現, 就自己調試了一把:

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

13. Fiori Icon logic

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

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

14. Another potential reason for Fiori timeout error

這是我負責處理過的一個標準Fiori應用的超時問題。把我折騰慘了，有的用戶能夠重現，有的不能。我花了很長時間同時調試這兩個用戶，發現程序執行流沒有任何差異。我幾乎要崩潰了，最后發現問題的根源原來是。。。。。。被隊友坑了。

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

15. Fiori擴展教程

CRM WebClient UI里的兩個標準字段Sales Office和Sales Group沒有暴露在CRM Fiori的My Opportunities UI上。

這個教程介紹了如何一步步將這兩個標準字段放到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

案例分析: 當加載Fiori應用出現白屏時，一定是某個地方的JavaScript文件執行出錯了。

本文介紹了如何快速找到引起錯誤的JavaScript代碼的準確位置。

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發布的標準Fiori應用，在UI上做了某個操作后，從Chrome開發工具里觀察到有三個一模一樣的HTTP請求發到后臺？

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

真實的客戶需求。默認的編輯按鈕具有藍色的背景色。有個客戶不太喜歡，希望通過View擴展的方式將其移除。

最后希望實現這樣的效果。

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應用里消費HANA Studio里創建的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

排錯需求：需要監控某個UI控件的初始化和析構的準確時間點，來跟蹤一些代碼bug。

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

21. Regarding Edm.DateTime in Fiori application

處理一個客戶ticket時的學習筆記。UI上我們看到的Closing Date是Oct 3, 2015.

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

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

22. How to trouble shoot field binding issue

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

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

23. More details of DatePicker

處理客戶ticket的學習筆記，關于DatePicker這個控件的實現細節。

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源代碼里對Function.prototype使用后出于學習目的的一些模仿:

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

為什么上下兩個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

為什么有的系統Fiori出錯后, 錯誤提示里能看到Contact Support的按鈕，

而有的系統看不到？作為強迫癥患者，一定用通過調試的方式搞清楚原因。

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

28. Two types of popup Dialogs in Fiori

Fiori里兩種彈出對話框的實現原理。在處理ticket時，我們經常需要找到準確的拋出這些對話框的代碼位置。

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框架代碼自學教程

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

一個有用的Chrome擴展應用: 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上關于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中的一個定義例子:

運行時效果如圖：

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開發工具排錯時積累的一些使用小技巧

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框架快速搭建一個Fiori應用, 該應用支持搜索，并且從搜索結果能跳轉到明細頁面。這個搜索和跳轉的功能都不需要通過JavaScript開發的方式實現。

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

如果想在明細頁面里支持編輯功能，請參考這篇文章：

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

為什么來自后臺同一個值，有的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

強迫癥患者看到這個差異，又得進行一番調試搞清楚具體在哪行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請求，有的收到回復是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(紅色區域)里嵌入開發人員設計的自定義View(藍色區域)。

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生成的應用里，這個后退按鈕的實現原理。

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

剛學UI5時我對這個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

我從這個UI5 Diagnostics工具中學到的知識。

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

一個ticket的處理記錄。

Fiori應用的正常行為，是點擊一個Tile后，瀏覽器會跳轉到對應的應用頁面，并且窗口顯示該應用的名稱。

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

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?

這個選項勾上之后，關掉瀏覽器再打開仍然生效。它的值保存在本地什么位置？

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實現部分。

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平臺為例，介紹前臺JavaScript代碼是如何被投遞到后臺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平臺上OData離線存儲打開的實現。

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啟動Fiori應用

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

如果想用nodejs啟動本地launchpad，然后再通過點擊tile訪問你的應用也是可以的。

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的應用其實它們并不是用原生的UI5技術實現的，而只是SAPGUI的ABAP應用包了一層Fiori的外殼。本文介紹這種仿Fiori應用的原理。

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上，用戶可以點擊Adapt UI進入UI Adaptation模式來對UI的布局做微調。但是在有些系統上，看不見這個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服務器端的配置原理。

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上用工具創建了一個新的擴展字段:

但是想將其配置到UI上時，從”可用字段”的下拉列表里查找不到該擴展字段，無法添加到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的實現原理。

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里運行的應用，如果我們想知道一個字段的值是存在哪張數據庫表的哪個字段，只需要按F1，在彈出的對話框里即可找到。

到了Fiori里，我們仍然有類似的需求，但是F1已經沒法用了。本文介紹如何找到Fiori UI上某個字段對應的后臺存儲。

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這個Net Internals工具的用途。

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

要獲取更多Jerry的原創技術文章，請關注公眾號”汪子熙”或者掃描下面二維碼:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。