SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
这是 Jerry 2021 年的第 37 篇文章，也是汪子熙公众号总共第 313 篇原创文章。
Jerry 之前的文章 一个 SAP 开发工程师十余年的技术写作之路回顾 曾经提到，知乎上安晓辉老师的一篇文章：那些很厉害的人是怎么构建知识体系的。
其中安老师有一个观点：
知识体系是结构化的，知识点之间彼此关联，有无数回路，四通八达。这样的好处是，我们遇到一个问题，就会触发某个知识点，我们捕捉到这个知识点，就可以沿着知识体系的无数关联和回路，快速找到相关的其他知识的点，组合起来，形成针对所遇到问题的解决方案，就表现出专业水准，就当得起“领域专家”之称。
Jerry 前一篇文章 SAP Fiori Elements List Report Smart Table 列项目宽度计算的奥妙 介绍了相对比较现代的 SAP Fiori Elements 框架里，Smart Table 列项目宽度的决定逻辑。在写那篇文章的过程中，我回忆起了几年前研究过的 SAP CRM 和 SAP Cloud for Customer 这两个产品里表格宽度的调整逻辑。出于完善知识体系的目的，本文做一个简单的回顾。
SAP CRM 和 Cloud for Customer 都支持用户通过个性化设置来调整表格列项目的宽度。本文介绍这两个产品里，当用户调整表格列项目宽度时，背后发生的故事。
SAP CRM 里，点击工具栏上的按钮，进入表格的定制化模式。
指定表格内每个列项目宽度所占的百分比，然后保存。
保存之后，这些设定的百分比，存储到了 SAP CRM 后台数据库表 BSPC_DL_PERSSTOR 里面。根据修改宽度的用户名和修改时间查询这个表：
发现一条记录，以 XML 格式存储，维护了当前这次宽度自定义调整的明细，比如每个列项目新的宽度百分比。
当下一次包含该表格的页面被渲染时，存储在 BSPC_DL_PERSSTOR 数据库表里的自定义后的列项目宽度百分比，被读取出来，用于 UI 的渲染操作。
Jerry 之前的文章 SAP UI和Salesforce UI开发漫谈 提到，SAP CRM WebClient UI 基于 BSP，是一门服务器端渲染技术。SAP CRM UI Component 的渲染器，CL_CHTMLB_CONFIG_CELLERATOR, 负责服务器端 HTML 源代码的生成。
再看 SAP Cloud for Customer，用户调整表格列项目宽度的方式更加简捷，鼠标放在两个列项目的交界处，按住不放，左右拖拽即可。
用户拖拽后达到自己希望调整的宽度效果后，放开鼠标，即触发一个向 SAP Cloud for Customer 后台发起的 HTTP POST 请求，将当前用户调整好的宽度存储到后台。
由于 SAP Cloud for Customer 前台发送到后台的 HTTP POST 数据负载通过 GZIP 压缩过，因此无法直接在 Chrome 开发者工具 network 标签页里的 Request Payload 字段里查看请求明细。
然而，我们仍旧可以通过单步调试的办法，在 SAP Cloud for Customer 前台实现源代码里，找到 HTTP POST 请求的原始负载被 GZIP 压缩之前的地方设置断点，在 Chrome 调试器里即可查看该负载。
在 FunctionModule.js 调用 sendAsyncPostRequest 函数之处设置断点，我们要查看的 HTTP POST 负载就维护在第三个参数 sRequestString 里：
请求负载的正文是一个 JSON 对象，CONTENT 的内容为 BASE64 编码之后的值：
将其用 BASE64 解码工具进行解码后，发现 CONTENT 字段原始内容的格式为 XML，根节点 ChangeTransaction，这是 SAP Cloud for Customer 记录用户通过 Key User Tool 或者 Personalization 功能对 UI 进行调整的明细的数据结构。
<?xml version='1.0'?><ChangeTransaction xmlns:base='http://www.sap.com/a1s/cd/oberon/base-1.0' xmlns:uxc='http://www.sap.com/a1s/cd/oberon/uxcontroller-1.0' xmlns:uxv='http://www.sap.com/a1s/cd/oberon/uxview-1.0' xmlns='http://www.sap.com/a1s/cd/oberon/uimodelchange-1.0' id='cb4771f861b659802045975b29c1b66d' xrepPath='/SAP_BYD_UI_FLEX/CHANGE_TRANSACTIONS/EndUser/ChangeColumnWidth/cb4771f861b659802045975b29c1b66d.uichange' type='ChangeColumnWidth' user='K9123Z2A0AV' clientType='html5' userType='EndUser' embeddingContext=''><UsedAnchor type='ListAnchor' xrepPath='/SAP_BYD_UI_FLEX/STABLE_ANCHORS/47e2475b8c1a4c8ebb103d66212a4eea.uianchor'><TargetFile xrepPath='/SAP_BYD_APPLICATION_UI/BCTools/WorkCentre/Overview_OWL.OWL.uicomponent'/><ChangeColumnWidth newLength="267px" columnModelId="w4HFX05fkagi1Swq3tdmTW"/></UsedAnchor></ChangeTransaction>
上面 XML 源代码里和列项目宽度更改相关的属性，高亮显示在下图红色区域。UI 调整类型为 ChangeColumnWidth, 调整后的值为 267 px：
按 F5 刷新浏览器，表格重新绘制时，SAP Cloud for Customer 会首先通过一个 HTTP 请求，从后台读取该表格各个列项目新的宽度值，如下图高亮区域所示。
Jerry 之前的同事曾经发表过一篇文章 SAP Cloud for Customer 使用SAP UI5的独特之处，介绍了 SAP C4C UI 也是基于 SAP UI5 实现的。因此，SAP C4C 表格渲染，按照 Jerry 之前文章 深入学习SAP UI5框架代码系列之二：UI5 控件的渲染器 介绍的原理，同样是通过表格控件对应的渲染器，TableRender.js 完成。
从 SAP C4C 后台读取到的新的表格列项目 267 px，在渲染器的 renderTableControlCnt 函数里，参与列项目的渲染逻辑：
渲染完毕后，从 Chrome 开发者工具的 Elements 标签页里，能观察到，刷新后该列项目的宽度和刷新前我们新调整的宽度一致。
更多阅读
SAP成都C4C小李探花：浅谈Fiori Design Guidelines
SAP S4CRM vs C4C, 诸葛亮和周瑜?
SAP UI和Salesforce UI开发漫谈
Jerry和您聊聊Chrome开发者工具
SAP成都研究院Sunshine: 我的C4C实习感受和保研之路
SAP成都研究院大卫哥：SAP C4C中国本地化之微信小程序集成
SAP成都研究院飞机哥: SAP C4C中国本地化之微信聊天机器人的集成
SAP成都研究院廖婧：SAP C4C社交媒体集成概述
浅谈SAP C4S自动化
如何在SAP Cloud for Customer页面嵌入自定义UI
SAP Analytics Cloud和SAP Cloud for Customer的集成
更多Jerry的原创文章，尽在：“汪子熙”:
SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍相关推荐
- sap IUT255 Integration of SAP CRM and SAP IS-U_EN_Col62.pdf
sap IUT255 Integration of SAP CRM and SAP IS-U_EN_Col62.pdf sap IUT255 Integration of SAP CRM and SA ...
- SAP CRM和SAP Hybris的订单日志
SAP CRM 例如我写了一个ABAP报表ZCREATE_SUBJECT用API CRM_ORDER_MAINTAIN去创建订单: 执行报表后,我可以用应用日志事务码SLG1, 查看执行报表生成的日志 ...
- SAP CRM和SAP Hybris的订单修改记录
SAP CRM SAP Hybris 查看欺诈检查明细: 两条检查记录结果列表,分别是email地址有效性检查和客户是否是首单检查: 得分0代表地址合法:
- SAP两款CRM产品各方面比较：SAP CRM vs SAP Cloud for Customer
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
- 使用SAP CRM中间件从ERP下载Customer的错误消息：Customer classification does not exist
After I create a customer in ERP via tcode VD01 and try to download it into CRM via request download ...
- SAP CRM和SAP Hybris的action profile
CRM action profile维护在transaction type级别的customizing里: 看个例子.有一次我写了一个ABAP报表,修改一个CRM订单并保存,结果惊奇地发现保存居然花费 ...
- SAP Cloud for Customer 标准培训课程
经常有朋友在我的SAP技术交流群或者我的公众号汪子熙给我留言,询问一个ABAP开发人员如果想学习SAP Cloud for Customer,应该从哪些方面入手. 这里把SAP官方的和SAP Clou ...
- SAP Cloud for Customer Extensibility的设计与实现
今天的文章来自Jerry的同事,SAP成都研究院C4C开发团队的开发人员徐欢(Xu Boris).徐欢就坐我左手边的位置,因此我工作中但凡遇到C4C的技术问题,一扭头就可以请教他了,非常方便.下图是他 ...
- 如何找到SAP Cloud for Customer标准培训和认证方面的信息
有一些朋友询问我如何在SAP官网上找到和SAP Cloud for Customer相关的标准培训信息,我这里把步骤写出来: 登录SAP官网https://training.sap.com 输入和Cl ...
最新文章
- 获取计算机软件列表,获取计算机已安装软件列表解决方法
- 若依管理系统前后端分离版基于ElementUI和SpringBoot怎样实现Excel导入和导出
- Meterpreter重要命令与使用
- 不止代码：路径数量（ybtoj-最小生成树）
- 面向初学者的JSF 2.0教程
- Spring 实践 -AOP
- LZW算法PHP实现方法 lzw_decompress php
- 监控三个指标 并不代表你能监控Tuxedo
- linux之ClamAV杀毒软件安装配置
- Visual Studio 2015出现Cannot find one or more components. Please reinstall the application.的问题解决
- Confluent修改许可，限制其他云供应商
- ajax提交file文件,AjaxSubmit()提交file文件
- 【锐捷交换机】清除密码
- 卡尔曼滤波系列——（二）扩展卡尔曼滤波
- 蚂蚁金服实习Android岗，面试闯关记。
- java osm pbf_OSM PBF 文件格式说明
- 高等数学（第七版）同济大学 总习题四（前半部分） 个人解答
- python tkinter控件treeview的数据列表显示的实现_code
- 教学计划编制问题（C语言）
- python里使用asyncore模块