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
這篇文章講述如何通過快速找到UI上看到的錯誤資訊是在哪行ABAP程式碼丟擲來的，方便您排錯。
- A real case: how to open external url ( ABAP webdynpro ) via pop up window in CRM
如何在WebClient UI裡通過彈出視窗開啟ABAP Webdynpro的頁面，用於中央電視臺CRM專案
- how to navigate to ABAP webdynpro page via CRM navigation framework
注意和第二篇文章區分開: 通過這篇文章介紹的方式開啟的ABAP Webdynpro是顯示在一個新的頁面上，而非彈出視窗。
- Three ways to control the visibility of an assignment block in overview page in web client UI
三種方式控制WebClient UI上某個Assignment block根據執行時某種條件動態地顯示或者隱藏
5. 一個奇怪的問題: 使用者登入後選擇了業務角色後一直顯示這個頁面，進不去任何應用了。引起這個問題的原因:
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/
- WebClient UI和ABAP Webdynpro的效能比較
這是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/
- 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嘗試
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/
- 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/
- 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的查詢, 我自己寫了一個，至少能滿足我自己專案的需要。
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裡
40. 如何實現one hit navigation
我不知道怎麼把這個概念譯成中文，其行為就是：如果搜尋的結果只有一條記錄，會自動進入這條記錄的明細介面，而不會停留在搜尋結果的UI上。
https://blogs.sap.com/2017/10/14/how-to-implement-one-hit-navigation/
41. 如何用WebClient UI的增強工具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/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- Jerry答網友提問：SAP CRM WebClient UI裡的EXT，STRUCT等含義WebclientUIStruct
- 原創文章檢測工具，檢測原創文章，過不了原創賬號的原因在這
- 原創文章檢測工具，原創文章檢測軟體，檢測文章相似度
- SAP WebClient UI的白屏問題分析WebclientUI
- SAP WebClient UI的會話重啟原理WebclientUI會話
- SAP CRM WebClient UI和Hybris backoffice UI開發的相同點WebclientUI
- 在SAP WebClient UI裡顯示倒數計時的UIWebclientUI
- ABAP Webdynpro和CRM WebClient UI不同的UI表現機制WebclientUI
- 自媒體原創太難？這4個原創技巧，讓你的文章原創質量翻倍
- SAP CRM WebClient UI和Fiori UI混搭並存WebclientUI
- 如何實現文章AI偽原創？AI
- SAP WebClient UI One Hit Navigation的實現方法WebclientUINavigation
- 什麼工具可以檢測文章原創度？原創度對文章收錄有影響嗎？
- 使用note++開發SAP WebClient UIWebclientUI
- 如何在SAP WebClient UI裡使用jChartFXWebclientUI
- 如何在 WebClient UI 裡建立 Value HelpWebclientUI
- SAP CRM WebClient UI異常的持久化機制WebclientUI持久化
- Product settype在CRM WebClient UI架構中的地位WebclientUI架構
- 將SAP CRM WebClient UI的表格匯出成PDFWebclientUI
- 如何將SAP WebClient UI的表格匯出成PDFWebclientUI
- 免費文章原創度檢測工具
- seo文章寫原創哪裡可以寫？
- Angular的scope. apply和CRM WebClient UI的modify方法AngularAPPWebclientUI
- 安卓架構文章合集安卓架構
- 歷史精選文章合集
- 檢測文章原創度的軟體哪個好用？
- SAP WebClient UI配置決定(configuration)的邏輯介紹WebclientUI
- SAP CRM WebClient UI的Delta處理機制介紹WebclientUI
- ABAP Webdynpro和WebClient UI不同的會話管理機制WebclientUI會話
- SAP CRM WebClient UI html 格式的 Text 顯示邏輯WebclientUIHTML
- SAP CRM WebClient UI 支援的一些 url 引數WebclientUI
- SAP CRM WebClient UI和Hybris的controller是如何被呼叫的WebclientUIController
- 最好的文章偽原創生成器（2020最新版）
- 文章原創度檢測工具，可以讓自媒體賬號過原創嗎？
- 文章原創度檢測軟體，增加你原創賬號透過機率
- 自媒體原創文章創作技巧，提升賬號權重
- 如何在CRM WebClient UI裡使用HANA Live ReportWebclientUI
- 如何在SAP WebClient UI裡使用HANA Live reportWebclientUI
- 汪子熙的SAP技術文章分類合集