SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍

简介: SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍

这是 Jerry 2021 年的第 37 篇文章,也是汪子熙公众号总共第 313 篇原创文章。

Jerry 之前的文章 一个 SAP 开发工程师十余年的技术写作之路回顾 曾经提到,知乎上安晓辉老师的一篇文章:那些很厉害的人是怎么构建知识体系的

其中安老师有一个观点:image.pngJerry 前一篇文章 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 里,点击工具栏上的按钮,进入表格的定制化模式。


image.png指定表格内每个列项目宽度所占的百分比,然后保存。

image.png存之后,这些设定的百分比,存储到了 SAP CRM 后台数据库表 BSPC_DL_PERSSTOR 里面。根据修改宽度的用户名和修改时间查询这个表:image.png发现一条记录,以 XML 格式存储,维护了当前这次宽度自定义调整的明细,比如每个列项目新的宽度百分比。image.pngimage.png当下一次包含该表格的页面被渲染时,存储在 BSPC_DL_PERSSTOR 数据库表里的自定义后的列项目宽度百分比,被读取出来,用于 UI 的渲染操作。


Jerry 之前的文章 SAP UI和Salesforce UI开发漫谈 提到,SAP CRM WebClient UI 基于 BSP,是一门服务器端渲染技术。SAP CRM UI Component 的渲染器,CL_CHTMLB_CONFIG_CELLERATOR, 负责服务器端 HTML 源代码的生成


image.pngimage.png再看 SAP Cloud for Customer,用户调整表格列项目宽度的方式更加简捷,鼠标放在两个列项目的交界处,按住不放,左右拖拽即可。image.png用户拖拽后达到自己希望调整的宽度效果后,放开鼠标,即触发一个向 SAP Cloud for Customer 后台发起的 HTTP POST 请求,将当前用户调整好的宽度存储到后台。

image.png于 SAP Cloud for Customer 前台发送到后台的 HTTP POST 数据负载通过 GZIP 压缩过,因此无法直接在 Chrome 开发者工具 network 标签页里的 Request Payload 字段里查看请求明细。image.png然而,我们仍旧可以通过单步调试的办法,在 SAP Cloud for Customer 前台实现源代码里,找到 HTTP POST 请求的原始负载被 GZIP 压缩之前的地方设置断点,在 Chrome 调试器里即可查看该负载。


在 FunctionModule.js 调用 sendAsyncPostRequest 函数之处设置断点,我们要查看的 HTTP POST 负载就维护在第三个参数 sRequestString 里:



image.png请求负载的正文是一个 JSON 对象,CONTENT 的内容为 BASE64 编码之后的值:image.png将其用 BASE64 解码工具进行解码后,发现 CONTENT 字段原始内容的格式为 XML,根节点 ChangeTransaction,这是 SAP Cloud for Customer 记录用户通过 Key User Tool 或者 Personalization 功能对 UI 进行调整的明细的数据结构。


image.pngimage.png按 F5 刷新浏览器,表格重新绘制时,SAP Cloud for Customer 会首先通过一个 HTTP 请求,从后台读取该表格各个列项目新的宽度值,如下图高亮区域所示。image.pngerry 之前的同事曾经发表过一篇文章 SAP Cloud for Customer 使用SAP UI5的独特之处,介绍了 SAP C4C UI 也是基于 SAP UI5 实现的。因此,SAP C4C 表格渲染,按照 Jerry 之前文章 深入学习SAP UI5框架代码系列之二:UI5 控件的渲染器 介绍的原理,同样是通过表格控件对应的渲染器,TableRender.js 完成。


从 SAP C4C 后台读取到的新的表格列项目 267 px,在渲染器的 renderTableControlCnt 函数里,参与列项目的渲染逻辑:



image.png渲染完毕后,从 Chrome 开发者工具的 Elements 标签页里,能观察到,刷新后该列项目的宽度和刷新前我们新调整的宽度一致。

image.png更多阅读


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的集成



相关文章
|
1月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
88 7
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
2月前
|
中间件
什么是 SAP CRM 系统里的 Initial Download
什么是 SAP CRM 系统里的 Initial Download
26 0
|
2月前
|
中间件
什么是 SAP CRM Initial Download
什么是 SAP CRM Initial Download
20 0
|
2月前
|
存储 数据管理 数据处理
SAP CRM 里 Attachment 搜索的实现逻辑介绍
SAP CRM 里 Attachment 搜索的实现逻辑介绍
23 0
|
3月前
|
存储 数据库 容器
深入介绍 SAP CRM 附件存储的底层实现机制
深入介绍 SAP CRM 附件存储的底层实现机制
32 0
|
3月前
|
JavaScript 前端开发 数据库
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
21 0
|
1月前
|
存储
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
使用 ABAP 代码打印出 SAP CRM 系统里所有维护了 Sales Area 的 business partner id
21 0
|
1月前
|
数据库
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
SAP CRM产品主数据无法根据产品描述字段进行搜索的原因
17 5
|
1月前
|
Web App开发 开发者 存储
介绍一个 webp 格式转 png 格式的软件:XNConvert
介绍一个 webp 格式转 png 格式的软件:XNConvert
30 6
介绍一个 webp 格式转 png 格式的软件:XNConvert
|
1月前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen