這是 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 進行調整的明細的資料結構。
按 F5 重新整理浏覽器，表格重新繪制時，SAP Cloud for Customer 會首先通過一個 HTTP 請求，從背景讀取該表格各個列項目新的寬度值，如下圖高亮區域所示。
erry 之前的同僚曾經發表過一篇文章 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的內建