這是 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 的表格列项目宽度调整的原理介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。