我要感谢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. 缩略图的显示原理
7. 在WebClient UI里显示PDF
8. 这个技巧我个人觉得很有用，把WebClient UI运行时产生的错误信息自动存到你指定的Z表里，排错时直接去Z表里找错误信息，省去了很多调试的时间。
- WebClient UI和ABAP Webdynpro的性能比较
这是manager交代下来的任务，用于中联重科的CRM项目。
10. 如果在CRM WebClient UI里混用ABAP Webdynpro, 会遇到哪些坑?
SAP官方不推荐用ABAP Webdynpro的技术在CRM里进行二次开发。下面这个文章里介绍了原因 - 两种UI框架有着截然不同的:
-
session管理
-
后退按钮的实现
-
UI configuration的实现
-
Data loss的实现
-
消息显示的UI区域设计
11. WebClient UI的delta handling
又一个诡异的问题，这个问题最后是托我的同事到SAP德国找到一个WebClient UI专家才最终弄明白。
12. "超时消息"并非真正是你的会话超时了
有时您在UI上做了一些操作，您会立即看到这个会话超时的提示，然而实际上这个页面是一个提示，往往意味着后台ABAP的应用里执行出了某些错误，这些错误被WebClient UI框架捕获到，然后执行一个通用的错误处理分支：显示该超时提示页面。
13. 我自己写的一个小工具，方便我调试用的。文章里有介绍其具体用途。
14. WebClient UI 框架原理性介绍
UI configuration的determine逻辑讲解: 介绍当您点了F2之后，这些显示信息的由来
文本的determine逻辑:
- Webclient UI Switch related processing
介绍了这两个switch背后的故事:
16. 一个具体的排错分享
我在WebClient UI的开发里已经完成了工具栏的绘制，但是最终显示的UI上看不到工具栏显示。如何通过自己debug找到哪里出了问题？
17. 如何处理白屏问题
有时我们在WebClient UI上操作，然后就白屏了。如何找到线索?
18. WebClient UI源码搜索工具
为提高我工作效率而写的, 因为RS_ABAP_SOURCE_SCAN不支持搜索WebClient UI组件里包含的ABAP代码。
19. 下拉菜单的排错
为什么这个下拉菜单里一个可选项也没有?
20. 一次WebClient UI里的AJAX尝试
21. WebClient UI里同时上传多个附件的尝试
在2014年的时候，WebClient UI还没有这个功能，所以我做了一个原型:
22. 使用您喜欢的文本编辑器进行WebClient UI
比较冷门，可能也没什么实际用处，但是证明了SAPGUI的flexibility(灵活性)
23. 一个案例: Chrome development tool如何用在WebClient UI问题的排错
24. 每个BSP应用的字节大小
这个需求是一个德国同事提给我的，我写了一个工具来计算:
25. 使用增强工具创建的扩展字段(extension field)是如何被WebClient UI绘制出来的。比如下面这种字段:
26. WebClient UI扩展字段的原理讲解
27. 用ABAP代码给WebClient UI扩展字段添加自定义行为
28. 如何创建下下拉列表类型的WebClient UI扩展字段
29. 自己写的小工具: 能快速找出一些WebClient UI component, 这些component里至少包含一个Context node, 绑定到了某个指定名称的Genil model节点, 比如"Product".
我在做CRM Addon的开发时，会有很多这种查找的需求，用工具实现查找能节省大量时间。
30. 白屏问题的又一分析案例
点击WebClient UI里某个超链接之后，就看到了这个白屏:
- Fiori and CRM WebClient UI – Stateless and Stateful, but how?
- Stateless and Stateful – Different behavior in application side
介绍这个选择字段选中和取消会有什么不同的效果:
33. 在WebClient UI里显示PDF的又一种做法
34. 将WebClient UI里的表格导出成PDF
如图:
35. 介绍WebClient UI的会话重启实现原理, 讲述这个Memory Threshold字段背后的故事
36. 在WebClient UI里显示带动画效果的倒数计时
如图:
37. 自开发的WebClient UI 仓库信息系统(Repository Information System)
SE80里的仓库信息系统不支持WebClient UI的查询, 我自己写了一个，至少能满足我自己项目的需要。
38. 介绍WebClient UI workbench里Context node的属性文件夹下面这些字段具体是从哪里带出来的
39. 通过transaction launcher把ABAP Webdynpro UI嵌入到WebClient UI里
40. 如何实现one hit navigation
我不知道怎么把这个概念译成中文，其行为就是：如果搜索的结果只有一条记录，会自动进入这条记录的明细界面，而不会停留在搜索结果的UI上。
41. 如何用WebClient UI的增强工具AET创建表格类型的增强字段
42. WebClient UI, Fiori和Cloud for Customer的Direct Navigation(直接导航)实现讲解
43. WebClient UI和Cloud for Customer里表格宽度自定义的实现原理讲解
要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码: