Jerry的WebClient UI 42篇原創文章合集

我要感謝CRM On Premise, 因為在這個產品上做開發讓我得以使用WebClient UI框架。有些朋友覺得這個SAP自己發明的基於HTML+ABAP的MVC框架，和現在流行的三駕馬車(Angular, React, Vue)相比顯得很笨重，也缺少一些他們認為現代UI框架必不可少的一些功能。

這個看法我個人不是完全認同，除了諸如React的Virtual DOM rendering和三駕馬車都支援的雙向繫結之外，很多這三個框架都支援的功能，SAP WebClient UI勉強說起來也都支援，只是實現得沒那麼優雅。掌握WebClient UI，除了能幫我們完成日常工作，從開闊工程師的視野來說也是很好的一種方式，畢竟國內幾乎每位開發人員都能接觸基於HMTL+JavaScript的UI框架，但是WebClient UI則不然。

下面是我在SAP community寫的關於WebClient UI的42篇文章列表，按照發布時間羅列。

1. How to quickly locate the source code where a given message is raised in WebClient UI

https://blogs.sap.com/2013/09/25/how-to-quicly-locate-the-source-code-where-raises-a-given-message-in-webclient-ui/

這篇文章講述如何通過快速找到UI上看到的錯誤資訊是在哪行ABAP程式碼丟擲來的，方便您排錯。

2. A real case: how to open external url ( ABAP webdynpro ) via pop up window in CRM

https://blogs.sap.com/2013/11/08/a-real-case-how-to-open-external-url-abap-webdynpro-via-pop-up-window-in-crm/

如何在WebClient UI裡通過彈出視窗開啟ABAP Webdynpro的頁面，用於中央電視臺CRM專案

3. how to navigate to ABAP webdynpro page via CRM navigation framework

https://blogs.sap.com/2013/11/08/how-to-navigate-to-abap-webdynpro-page-via-crm-navigation-framework/

注意和第二篇文章區分開: 通過這篇文章介紹的方式開啟的ABAP Webdynpro是顯示在一個新的頁面上，而非彈出視窗。

4. Three ways to control the visibility of an assignment block in overview page in web client UI

https://blogs.sap.com/2013/11/22/three-ways-to-control-the-visibility-of-an-assignment-block-in-overview-page-in-web-client-ui/

三種方式控制WebClient UI上某個Assignment block根據執行時某種條件動態地顯示或者隱藏

5. 一個奇怪的問題: 使用者登入後選擇了業務角色後一直顯示這個頁面，進不去任何應用了。引起這個問題的原因:

https://blogs.sap.com/2013/12/04/do-you-believe-the-malfunctioned-rfc-destination-will-cause-interaction-center-ui-hang/

6. 縮圖的顯示原理

https://blogs.sap.com/2013/12/04/display-thumbnail-in-crm-ui-with-the-help-of-attachment/

7. 在WebClient UI裡顯示PDF

https://blogs.sap.com/2013/12/17/another-way-to-preview-pdf-in-crm-web-client-ui-with-little-coding/

8. 這個技巧我個人覺得很有用，把WebClient UI執行時產生的錯誤資訊自動存到你指定的Z表裡，排錯時直接去Z表裡找錯誤資訊，省去了很多除錯的時間。

https://blogs.sap.com/2013/12/21/how-to-persist-the-ui-exception-so-you-can-view-them-later/

9. WebClient UI和ABAP Webdynpro的效能比較

https://blogs.sap.com/2014/01/02/webclient-ui-vs-abap-webdynpro-performance-loss-in-bol-genil-layer-discussion/

這是manager交代下來的任務，用於中聯重科的CRM專案。

10. 如果在CRM WebClient UI裡混用ABAP Webdynpro, 會遇到哪些坑?

SAP官方不推薦用ABAP Webdynpro的技術在CRM裡進行二次開發。下面這個文章裡介紹了原因 - 兩種UI框架有著截然不同的:

• session管理

• 後退按鈕的實現

• UI configuration的實現

• Data loss的實現

• 訊息顯示的UI區域設計

https://blogs.sap.com/2014/01/08/issue-lists-of-using-abap-webdynpro-in-crm-ui/

11. WebClient UI的delta handling

又一個詭異的問題，這個問題最後是託我的同事到SAP德國找到一個WebClient UI專家才最終弄明白。

https://blogs.sap.com/2014/01/19/automatic-delta-handling-in-webclient-ui/

12. "超時訊息"並非真正是你的會話超時了

有時您在UI上做了一些操作，您會立即看到這個會話超時的提示，然而實際上這個頁面是一個提示，往往意味著後臺ABAP的應用裡執行出了某些錯誤，這些錯誤被WebClient UI框架捕獲到，然後執行一個通用的錯誤處理分支：顯示該超時提示頁面。

• https://blogs.sap.com/2014/03/03/timeout-page-and-webui-freezing-issue-another-cause/

• https://blogs.sap.com/2014/03/28/why-timeout-page-is-always-displayed-although-there-is-no-timeout-at-all/

13. 我自己寫的一個小工具，方便我除錯用的。文章裡有介紹其具體用途。

https://blogs.sap.com/2014/03/03/a-small-component-repository-parse-tool-and-its-usage/

14. WebClient UI 框架原理性介紹

UI configuration的determine邏輯講解: 介紹當您點了F2之後，這些顯示資訊的由來

https://blogs.sap.com/2014/03/07/ui-configuration-determination-logic-introduction/

文字的determine邏輯:

https://blogs.sap.com/2014/03/07/ui-text-label-determination-logic/

15. Webclient UI Switch related processing

介紹了這兩個switch背後的故事:

https://blogs.sap.com/2014/03/08/webclient-ui-switch-related-processing/

16. 一個具體的排錯分享

我在WebClient UI的開發裡已經完成了工具欄的繪製，但是最終顯示的UI上看不到工具欄顯示。如何通過自己debug找到哪裡出了問題？

https://blogs.sap.com/2014/04/24/how-to-investigate-bsp-tag-issue-by-yourself/

17. 如何處理白屏問題

有時我們在WebClient UI上操作，然後就白屏了。如何找到線索?

https://blogs.sap.com/2014/05/13/another-small-tip-to-deal-with-empty-screen-issue/

18. WebClient UI原始碼搜尋工具

為提高我工作效率而寫的, 因為RS_ABAP_SOURCE_SCAN不支援搜尋WebClient UI元件裡包含的ABAP程式碼。

https://blogs.sap.com/2014/05/26/webclient-ui-source-code-search-tool/

19. 下拉選單的排錯

為什麼這個下拉選單裡一個可選項也沒有?

https://blogs.sap.com/2014/06/18/dropdown-list-issue-in-crm-webclient-ui-a-very-funny-trouble-shooting-process/

20. 一次WebClient UI裡的AJAX嘗試

https://blogs.sap.com/2014/06/23/how-to-implement-and-debug-ajax-functionality-in-webclient-ui-component/

21. WebClient UI裡同時上傳多個附件的嘗試

在2014年的時候，WebClient UI還沒有這個功能，所以我做了一個原型:

https://blogs.sap.com/2014/08/23/attachment-multiple-upload/

22. 使用您喜歡的文字編輯器進行WebClient UI

比較冷門，可能也沒什麼實際用處，但是證明了SAPGUI的flexibility(靈活性)

https://blogs.sap.com/2014/12/05/use-notepad-to-edit-your-webclient-ui-component-view/

23. 一個案例: Chrome development tool如何用在WebClient UI問題的排錯

https://blogs.sap.com/2016/06/17/how-webui-passes-table-selected-row-information-to-abap-backend/

24. 每個BSP應用的位元組大小

這個需求是一個德國同事提給我的，我寫了一個工具來計算:

https://blogs.sap.com/2016/06/17/a-simple-tool-to-calculate-the-total-size-of-a-bsp-application/

25. 使用增強工具建立的擴充套件欄位(extension field)是如何被WebClient UI繪製出來的。比如下面這種欄位:

https://blogs.sap.com/2016/12/22/how-extension-field-created-by-aet-is-rendered-in-web-client-ui/

26. WebClient UI擴充套件欄位的原理講解

https://blogs.sap.com/2014/02/21/insight-into-calculated-fields-created-by-aet/

27. 用ABAP程式碼給WebClient UI擴充套件欄位新增自定義行為

https://blogs.sap.com/2017/01/11/define-your-extension-field-with-custom-behavior-in-aet/

28. 如何建立下下拉選單型別的WebClient UI擴充套件欄位

https://blogs.sap.com/2017/01/12/create-extension-field-with-type-code-list-via-aet/

29. 自己寫的小工具: 能快速找出一些WebClient UI component, 這些component裡至少包含一個Context node, 繫結到了某個指定名稱的Genil model節點, 比如"Product".

我在做CRM Addon的開發時，會有很多這種查詢的需求，用工具實現查詢能節省大量時間。

https://blogs.sap.com/2017/03/01/repository-information-system-for-webclient-ui-component/

30. 白屏問題的又一分析案例

點選WebClient UI裡某個超連結之後，就看到了這個白屏:

https://blogs.sap.com/2017/03/20/an-example-to-analyze-webclient-ui-empty-screen-issue/

31. Fiori and CRM WebClient UI – Stateless and Stateful, but how?

https://blogs.sap.com/2017/03/30/fiori-and-crm-webclient-ui-stateless-and-stateful-but-how/

32. Stateless and Stateful – Different behavior in application side

介紹這個選擇欄位選中和取消會有什麼不同的效果:

https://blogs.sap.com/2017/03/31/stateless-and-stateful-different-behavior-in-application-side/

33. 在WebClient UI裡顯示PDF的又一種做法

https://blogs.sap.com/2017/05/01/add-table-line-item-preview-functionality-in-webclient-ui/

34. 將WebClient UI裡的表格匯出成PDF

如圖:

https://blogs.sap.com/2017/05/03/export-webclient-ui-table-to-pdf/

35. 介紹WebClient UI的會話重啟實現原理, 講述這個Memory Threshold欄位背後的故事

https://blogs.sap.com/2017/05/24/webui-session-restart-logic/

36. 在WebClient UI裡顯示帶動畫效果的倒數計時

如圖:

https://blogs.sap.com/2017/05/27/dipslay-count-down-in-webclient-ui/

37. 自開發的WebClient UI 倉庫資訊系統(Repository Information System)

SE80裡的倉庫資訊系統不支援WebClient UI的查詢, 我自己寫了一個，至少能滿足我自己專案的需要。

https://blogs.sap.com/2017/06/05/repository-information-system-for-webclient-ui-component-context-node-and-their-attributes/

38. 介紹WebClient UI workbench裡Context node的屬性資料夾下面這些欄位具體是從哪裡帶出來的

https://blogs.sap.com/2017/08/21/the-logic-how-the-field-list-under-attributes-folder-is-populated/

39. 通過transaction launcher把ABAP Webdynpro UI嵌入到WebClient UI裡

https://blogs.sap.com/2017/10/13/configure-abap-webdynpro-component-into-crm-system-via-transaction-launcher/

40. 如何實現one hit navigation

我不知道怎麼把這個概念譯成中文，其行為就是：如果搜尋的結果只有一條記錄，會自動進入這條記錄的明細介面，而不會停留在搜尋結果的UI上。

https://blogs.sap.com/2017/10/14/how-to-implement-one-hit-navigation/

41. 如何用WebClient UI的增強工具AET建立表格型別的增強欄位

https://blogs.sap.com/2017/10/15/how-to-create-new-table-as-assignment-block-in-service-order-overview-page-via-aet/

42. WebClient UI, Fiori和Cloud for Customer的Direct Navigation(直接導航)實現講解

https://blogs.sap.com/2017/11/05/direct-navigation-in-crm-webui-crm-fiori-and-c4c/

43. WebClient UI和Cloud for Customer裡表格寬度自定義的實現原理講解

https://blogs.sap.com/2017/11/21/how-table-column-resize-works-in-crm-and-cloud-for-customer/

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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2151009/，如需轉載，請註明出處，否則將追究法律責任。