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

時間 2019-11-19

標籤 jerry webclient 原創文章合集简体版

原文原文鏈接

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

這個見解我我的不是徹底認同，除了諸如React的Virtual DOM rendering和三駕馬車都支持的雙向綁定以外，不少這三個框架都支持的功能，SAP WebClient UI勉強提及來也都支持，只是實現得沒那麼優雅。掌握WebClient UI，除了能幫咱們完成平常工做，從開闊工程師的視野來講也是很好的一種方式，畢竟國內幾乎每位開發人員都能接觸基於HMTL+JavaScript的UI框架，可是WebClient UI則否則。web

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

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

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

這篇文章講述如何經過快速找到UI上看到的錯誤信息是在哪行ABAP代碼拋出來的，方便您排錯。框架

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

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 frameworkide

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框架捕獲到，而後執行一個通用的錯誤處理分支：顯示該超時提示頁面。

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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼:

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。