這是 Jerry 2021 年的第 37 篇文章，也是汪子熙公眾號(hào)總共第 313 篇原創(chuàng)文章。

Jerry 之前的文章?一個(gè) SAP 開(kāi)發(fā)工程師十余年的技術(shù)寫(xiě)作之路回顧?曾經(jīng)提到，知乎上安曉輝老師的一篇文章：那些很厲害的人是怎么構(gòu)建知識(shí)體系的。

其中安老師有一個(gè)觀點(diǎn)：

知識(shí)體系是結(jié)構(gòu)化的，知識(shí)點(diǎn)之間彼此關(guān)聯(lián)，有無(wú)數(shù)回路，四通八達(dá)。這樣的好處是，我們遇到一個(gè)問(wèn)題，就會(huì)觸發(fā)某個(gè)知識(shí)點(diǎn)，我們捕捉到這個(gè)知識(shí)點(diǎn)，就可以沿著知識(shí)體系的無(wú)數(shù)關(guān)聯(lián)和回路，快速找到相關(guān)的其他知識(shí)的點(diǎn)，組合起來(lái)，形成針對(duì)所遇到問(wèn)題的解決方案，就表現(xiàn)出專(zhuān)業(yè)水準(zhǔn)，就當(dāng)?shù)闷稹邦I(lǐng)域?qū)＜摇敝Q(chēng)。

Jerry 前一篇文章?SAP Fiori Elements List Report Smart Table 列項(xiàng)目寬度計(jì)算的奧妙?介紹了相對(duì)比較現(xiàn)代的 SAP Fiori Elements 框架里，Smart Table 列項(xiàng)目寬度的決定邏輯。在寫(xiě)那篇文章的過(guò)程中，我回憶起了幾年前研究過(guò)的 SAP CRM 和 SAP Cloud for Customer 這兩個(gè)產(chǎn)品里表格寬度的調(diào)整邏輯。出于完善知識(shí)體系的目的，本文做一個(gè)簡(jiǎn)單的回顧。

SAP CRM 和 Cloud for Customer 都支持用戶通過(guò)個(gè)性化設(shè)置來(lái)調(diào)整表格列項(xiàng)目的寬度。本文介紹這兩個(gè)產(chǎn)品里，當(dāng)用戶調(diào)整表格列項(xiàng)目寬度時(shí)，背后發(fā)生的故事。

SAP CRM 里，點(diǎn)擊工具欄上的按鈕，進(jìn)入表格的定制化模式。

指定表格內(nèi)每個(gè)列項(xiàng)目寬度所占的百分比，然后保存。

保存之后，這些設(shè)定的百分比，存儲(chǔ)到了 SAP CRM 后臺(tái)數(shù)據(jù)庫(kù)表 BSPC_DL_PERSSTOR 里面。根據(jù)修改寬度的用戶名和修改時(shí)間查詢這個(gè)表：

發(fā)現(xiàn)一條記錄，以 XML 格式存儲(chǔ)，維護(hù)了當(dāng)前這次寬度自定義調(diào)整的明細(xì)，比如每個(gè)列項(xiàng)目新的寬度百分比。

當(dāng)下一次包含該表格的頁(yè)面被渲染時(shí)，存儲(chǔ)在 BSPC_DL_PERSSTOR 數(shù)據(jù)庫(kù)表里的自定義后的列項(xiàng)目寬度百分比，被讀取出來(lái)，用于 UI 的渲染操作。

Jerry 之前的文章?SAP UI和Salesforce UI開(kāi)發(fā)漫談?提到，SAP CRM WebClient UI 基于 BSP，是一門(mén)服務(wù)器端渲染技術(shù)。SAP CRM UI Component 的渲染器，CL_CHTMLB_CONFIG_CELLERATOR, 負(fù)責(zé)服務(wù)器端 HTML 源代碼的生成。

再看 SAP Cloud for Customer，用戶調(diào)整表格列項(xiàng)目寬度的方式更加簡(jiǎn)捷，鼠標(biāo)放在兩個(gè)列項(xiàng)目的交界處，按住不放，左右拖拽即可。

用戶拖拽后達(dá)到自己希望調(diào)整的寬度效果后，放開(kāi)鼠標(biāo)，即觸發(fā)一個(gè)向 SAP Cloud for Customer 后臺(tái)發(fā)起的 HTTP POST 請(qǐng)求，將當(dāng)前用戶調(diào)整好的寬度存儲(chǔ)到后臺(tái)。

由于 SAP Cloud for Customer 前臺(tái)發(fā)送到后臺(tái)的 HTTP POST 數(shù)據(jù)負(fù)載通過(guò) GZIP 壓縮過(guò)，因此無(wú)法直接在 Chrome 開(kāi)發(fā)者工具 network 標(biāo)簽頁(yè)里的 Request Payload 字段里查看請(qǐng)求明細(xì)。

然而，我們?nèi)耘f可以通過(guò)單步調(diào)試的辦法，在 SAP Cloud for Customer 前臺(tái)實(shí)現(xiàn)源代碼里，找到 HTTP POST 請(qǐng)求的原始負(fù)載被 GZIP 壓縮之前的地方設(shè)置斷點(diǎn)，在 Chrome 調(diào)試器里即可查看該負(fù)載。

在 FunctionModule.js 調(diào)用 sendAsyncPostRequest 函數(shù)之處設(shè)置斷點(diǎn)，我們要查看的 HTTP POST 負(fù)載就維護(hù)在第三個(gè)參數(shù) sRequestString 里：

請(qǐng)求負(fù)載的正文是一個(gè) JSON 對(duì)象，CONTENT 的內(nèi)容為 BASE64 編碼之后的值：

將其用 BASE64 解碼工具進(jìn)行解碼后，發(fā)現(xiàn) CONTENT 字段原始內(nèi)容的格式為 XML，根節(jié)點(diǎn) ChangeTransaction，這是 SAP Cloud for Customer 記錄用戶通過(guò) Key User Tool 或者 Personalization 功能對(duì) UI 進(jìn)行調(diào)整的明細(xì)的數(shù)據(jù)結(jié)構(gòu)。

<?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 源代碼里和列項(xiàng)目寬度更改相關(guān)的屬性，高亮顯示在下圖紅色區(qū)域。UI 調(diào)整類(lèi)型為 ChangeColumnWidth, 調(diào)整后的值為 267 px：

按 F5 刷新瀏覽器，表格重新繪制時(shí)，SAP Cloud for Customer 會(huì)首先通過(guò)一個(gè) HTTP 請(qǐng)求，從后臺(tái)讀取該表格各個(gè)列項(xiàng)目新的寬度值，如下圖高亮區(qū)域所示。

Jerry 之前的同事曾經(jīng)發(fā)表過(guò)一篇文章?SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處，介紹了 SAP C4C UI 也是基于 SAP UI5 實(shí)現(xiàn)的。因此，SAP C4C 表格渲染，按照 Jerry 之前文章?深入學(xué)習(xí)SAP UI5框架代碼系列之二：UI5 控件的渲染器?介紹的原理，同樣是通過(guò)表格控件對(duì)應(yīng)的渲染器，TableRender.js 完成。

從 SAP C4C 后臺(tái)讀取到的新的表格列項(xiàng)目 267 px，在渲染器的 renderTableControlCnt 函數(shù)里，參與列項(xiàng)目的渲染邏輯：

渲染完畢后，從 Chrome 開(kāi)發(fā)者工具的 Elements 標(biāo)簽頁(yè)里，能觀察到，刷新后該列項(xiàng)目的寬度和刷新前我們新調(diào)整的寬度一致。

更多閱讀

• SAP成都C4C小李探花：淺談Fiori Design Guidelines

• SAP S4CRM vs C4C, 諸葛亮和周瑜?

• SAP UI和Salesforce UI開(kāi)發(fā)漫談

• Jerry和您聊聊Chrome開(kāi)發(fā)者工具

• SAP成都研究院Sunshine: 我的C4C實(shí)習(xí)感受和保研之路

• SAP成都研究院大衛(wèi)哥：SAP C4C中國(guó)本地化之微信小程序集成

• SAP成都研究院飛機(jī)哥: SAP C4C中國(guó)本地化之微信聊天機(jī)器人的集成

• SAP成都研究院廖婧：SAP C4C社交媒體集成概述

• 淺談SAP C4S自動(dòng)化

• 如何在SAP Cloud for Customer頁(yè)面嵌入自定義UI

• SAP Analytics Cloud和SAP Cloud for Customer的集成

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。