Jerry的Fiori原創文章合集
我曾經於2014年10月到2016年5月工做於SAP CRM Fiori應用的開發團隊, 我所在的團隊負責下列這8個Fiori應用的維護和持續開發:javascript
- My Opportunities
- My Tasks
- My Appointments
- My Leads
- My Notes
- Simulate Sales Pipeline
- Track Sales Pipeline
在這不到兩年的開發工做裏，我在使用SAP UI5的過程當中遇到各類各樣的問題，我都把它們一一記錄了下來。還有一些問題來源於個人好奇心，好比看到了一些UI效果，想知道它背後是怎麼實現的；又好比觀察到了一些系統的看起來有點怪的行爲，我想知道它到底是確實就是這樣設計的，仍是說我觀察到的實際上是bug。另一類問題是一樣的應用，在系統A的行爲是a，在系統B的行爲是b。做爲強迫症患者，我老是要經過調試的方式搞清楚緣由。對於這種我本身給本身提的問題，弄清楚答案以後我也記錄了下來，以備未來哪一天又會用到。java
1. Explore the com.sap.ui5.resource.ResourceServletnode
咱們在本地作Fiori開發時，常常經過這樣的方式引入UI5的庫文件。我剛接觸UI5時，就問過本身一個問題: 這個sap-ui-core.js在這裏是經過相對路徑引入的。當Fiori應用在本地的服務器好比Tomcat啓動時，究竟是從哪一個位置加載的該文件？android
https://blogs.sap.com/2014/12/04/explore-the-comsapui5resourceresourceservlet/ios
2. My small experience about how to find the exact line position which causes 「undefined is not a function」 errorchrome
Partner比較容易遇到的問題: 實施了Fiori，或者在標準Fiori應用上作了一些二次開發，打開應用時白屏，Chrome的開發工具裏有一些報錯信息，可是不知道該如何定義到具體哪一行代碼引發的錯誤。數據庫
3. Why my formatter does not work? A trouble shooting example to know how it works瀏覽器
UI5 formatter的原理講解, 和排錯最佳實踐。服務器
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:
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了。但這一切是怎麼工做的？
8. How to hide dynamically created UI fields via extension for My Opportunity application
UI5的View extension只能隱藏或者顯示那些靜態UI元素，即design time時就已經定義在View裏的元素。對於運行期經過JavaScript代碼動態建立的UI元素則無能爲力。
本文介紹了對於後者若是須要動態控制其隱藏仍是顯示的實現方法。
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圖片顯示原理介紹
11. A Test on Fiori OData request Synchronous mode VS Asynchronous mode
UI5的OData讀的API有個參數, 指定按照同步或異步的方式讀取數據。這個參數會對應用產生什麼樣的影響呢？
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上。
16. How to quickly locate the code error in application which causes UI stop to load
案例分析: 當加載Fiori應用出現白屏時，必定是某個地方的JavaScript文件執行出錯了。
本文介紹瞭如何快速找到引發錯誤的JavaScript代碼的準確位置。
17. why there are always multiple read operations after BATCH operation is done successfully
Partner提的問題：爲何SAP發佈的標準Fiori應用，在UI上作了某個操做後，從Chrome開發工具裏觀察到有三個如出一轍的HTTP請求發到後臺？
18. How to remove the blue background color of Edit button in footer toolbar
真實的客戶需求。默認的編輯按鈕具備藍色的背景色。有個客戶不太喜歡，但願經過View擴展的方式將其移除。
最後但願實現這樣的效果。
若是想把背景色改爲其餘顏色，也是能夠的：
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顯示的日期格式不一致?
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時，咱們常常須要找到準確的拋出這些對話框的代碼位置。
https://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框架代碼自學教程
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/04/10/enable-crm-service-order-application-with-edit-functionality/
若是想支持粗昂見功能，參考這篇文章:
38. An example of Fiori Globalization implementation – the logic of amount value truncation
爲何來自後臺同一個值，有的UI控件顯示的是1880，有的控件卻顯示2K? 本文向您揭祕。
39. An example of Fiori Globalization implementation – the number format mistery
強迫症患者看到這個差別，又得進行一番調試搞清楚具體在哪行JavaScript代碼形成的這種顯示差別了。
40. Do you understand the logic of HTTP 200 OK and HTTP 304 Not Modified
揭祕爲何一樣是HTTP請求，有的收到回覆是200，有的是304？
41. My understanding about how object page in Smart Template is rendered
Smart Template框架的渲染原理介紹
42. How to inject your own XML view into application generated by Smart Template
本文介紹如何在Smart Template框架生成的View(紅色區域)裏嵌入開發人員設計的自定義View(藍色區域)。
43. An example of how to find back button implementation on Smart Template generated application
介紹Smart Template生成的應用裏，這個後退按鈕的實現原理。
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工具中學到的知識。
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抱怨的行爲是窗口沒能正確顯示出應用的名稱:
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實現部分。
50. How is JavaScript code in OData offline plugin delegated to native Java code in Android
SAP Offline OData Plugin的原理介紹之二。以Android平臺爲例，介紹前臺JavaScript代碼是如何被投遞到後臺Java代碼去的。
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按鈕。爲何？
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上。
57. An example of how cross distribution chain status is updated via draft handling in Fiori application
介紹S/4HANA裏Draft handling的實現原理。
58. How to find the backend storage table field for a field in Fiori UI
在SAPGUI裏運行的應用，若是咱們想知道一個字段的值是存在哪張數據庫表的哪一個字段，只須要按F1，在彈出的對話框裏便可找到。
到了Fiori裏，咱們仍然有相似的需求，可是F1已經無法用了。本文介紹如何找到Fiori UI上某個字段對應的後臺存儲。
59. Useful Chrome Tool chrome://net-internals to monitor http request detail
介紹Chrome這個Net Internals工具的用途。
要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼:
- 1. Jerry的Fiori原創文章合集
- 2. Jerry的ABAP原創技術文章合集
- 3. Jerry的WebClient UI 42篇原創文章合集
- 4. Jerry的CRM Middleware(中間件)文章合集
- 5. Jerry的經過CDS view + Smart Template 開發Fiori應用的blog合集
- 6. 文章的原創
- 7. 原創文章
- 8. 僞原創文章技巧（如何提高僞原創文章的原創度）
- 9. 僞原創文章提高原創方法（高原創度的僞原創文章怎麼做）
- 10. seo僞原創文章優化（怎麼找可以做僞原創的文章）
- 更多相關文章...
- • Scala Set(集合) - Scala教程
- • C# 集合（Collection） - C#教程
- • ☆技術問答集錦（13）Java Instrument原理
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
-
每一个你不满意的现在，都有一个你没有努力的曾经。