今天的文章來(lái)自Jerry的同事，SAP成都研究院C4C開發(fā)團(tuán)隊(duì)的開發(fā)人員徐歡(Xu Boris)。徐歡就坐我左手邊的位置，因此我工作中但凡遇到C4C的技術(shù)問(wèn)題，一扭頭就可以請(qǐng)教他了，非常方便。下圖是他辦公室的桌面。

Jerry前一篇文章?SAP產(chǎn)品的Field Extensibility?以SAP CRM和SAP S/4HANA為例，介紹了SAP產(chǎn)品Field Extensibility的設(shè)計(jì)原理與實(shí)現(xiàn)。現(xiàn)在由徐歡繼續(xù)Extensibility這個(gè)話題，向您介紹SAP Cloud for Customer的Extensibility設(shè)計(jì)與實(shí)現(xiàn)。

SAP C4C和SAP S/4HANA的Extensibility有很深的淵源，后者的設(shè)計(jì)以前者為基礎(chǔ)而又有所創(chuàng)新。從時(shí)間線上說(shuō)，我認(rèn)識(shí)的很多德國(guó)同事先后都參與了C4C和S/4HANA Extensibility的框架開發(fā)。這兩個(gè)框架開發(fā)團(tuán)隊(duì)的很多關(guān)鍵角色，比如架構(gòu)師和產(chǎn)品經(jīng)理，甚至都是同一批人。

下面是他的正文。

---

大家好，我是Boris，中文名徐歡。2015年元旦之前一直從事ERP客戶項(xiàng)目開發(fā)與咨詢，大約有6年的時(shí)間。在這之前也從事過(guò)幾年與SAP產(chǎn)品無(wú)關(guān)的開發(fā)工作。由于在加入SAP之前參與ERP實(shí)施項(xiàng)目，我曾經(jīng)花費(fèi)大量的時(shí)間研究ERP核心模塊的基本業(yè)務(wù)流程，曾經(jīng)參與多個(gè)項(xiàng)目從立項(xiàng)到客戶上線的實(shí)施工作。2015年，懷著對(duì)SAP開發(fā)團(tuán)隊(duì)的憧憬之心加入SAP BYD/C4C應(yīng)用開發(fā)項(xiàng)目，參與了多個(gè)應(yīng)用模塊和行業(yè)解決方案的開發(fā)，并在2年的時(shí)間里以技術(shù)支持的角色在C4C HTML5 UI框架這個(gè)領(lǐng)域內(nèi)處理了1000?多個(gè)客戶故障。

目前作為SAP?C4C在中國(guó)標(biāo)準(zhǔn)開發(fā)團(tuán)隊(duì)的一員，很高興能在這里分享我關(guān)于C4C Extensibility的一些心得。

Jerry前一篇文章?SAP產(chǎn)品的Field Extensibility?已經(jīng)介紹過(guò)Enhancement和Modification這兩個(gè)概念的區(qū)別。C4C用戶通過(guò)Key User Tool這個(gè)工具（類似CRM的Application Enhancement Tool，AET）對(duì)C4C標(biāo)準(zhǔn)UI和客戶定制開發(fā)的UI進(jìn)行增強(qiáng)。增強(qiáng)類型分為Personalization和Adaptation，分別針對(duì)同一tenant內(nèi)單個(gè)用戶生效和同一tenant內(nèi)全部用戶生效。

Key User Tool非常容易使用。如果想通過(guò)Adaptation的方式增強(qiáng)UI，登錄C4C?,在頂部菜單欄選擇Adapt -> Edit Master Layout（相應(yīng)的，如果選擇Personalization方式，則通過(guò)下圖Adapt旁邊的Personalize菜單項(xiàng)開始）。

現(xiàn)在將光標(biāo)懸浮在頁(yè)面任意位置，如果頁(yè)面被C4C后臺(tái)設(shè)置為“可以增強(qiáng)”，那么能看到一個(gè)彈出的工具欄，點(diǎn)擊里面的加號(hào)圖標(biāo)，就能從下拉菜單中選擇“Add Fields”來(lái)進(jìn)行字段的增強(qiáng)了。

填寫字段描述，類型等信息之后保存即可。

大家把上圖C4C擴(kuò)展字段創(chuàng)建頁(yè)面和下圖出現(xiàn)在Jerry前一篇文章的S/4HANA擴(kuò)展字段創(chuàng)建頁(yè)面做對(duì)比，是不是非常相像？

對(duì)客戶而言，整個(gè)過(guò)程簡(jiǎn)單易懂，僅僅幾分鐘便完成全部操作。背后的支撐是SAP C4C提供的Extensibility框架,?這正是我要給大家介紹的。首先我們從基本概念說(shuō)起。

Personalization

用戶通過(guò)這種方式對(duì)UI進(jìn)行的調(diào)整，只對(duì)當(dāng)前進(jìn)行Personalization的用戶生效，對(duì)其他用戶不可見。

C4C后臺(tái)有一個(gè)叫XREP的存儲(chǔ)系統(tǒng)，設(shè)計(jì)思路和理念同Jerry介紹S/4HANA Extensibility時(shí)提到的LREP一致，只不過(guò)在C4C里換了一個(gè)名字而已，這里的X代表Cross。盡管C4C的客戶和Partner無(wú)法像S/4HANA那樣，登錄后臺(tái)查看XREP的全部?jī)?nèi)容，但仍舊可以通過(guò)UI Designer里的Configuration Explorer，查看XREP里的部分內(nèi)容。如下圖右邊區(qū)域所示，XREP實(shí)質(zhì)上就是一個(gè)用ABAP實(shí)現(xiàn)的分層的文件系統(tǒng)。

從技術(shù)上講，每個(gè)Personalization施加的UI修改，都會(huì)生成一個(gè)文件，這些文件的C4C官方叫法是Change Transaction，下文簡(jiǎn)稱CT。Personalization產(chǎn)生的CT存儲(chǔ)在C4C后臺(tái)XREP里名叫$PERS的Layer中。運(yùn)行時(shí)，包含了Personanization的UI頁(yè)面準(zhǔn)備渲染時(shí)，C4C前端框架才會(huì)臨時(shí)把這些位于$PERS中的CT合并到對(duì)應(yīng)的C4C標(biāo)準(zhǔn)UI上。

Adaptation

技術(shù)上講，Adaptation產(chǎn)生的CT文件會(huì)存儲(chǔ)在該用戶所歸屬的Layer里。例如客戶做的UI修改，會(huì)存儲(chǔ)到名為$Cust的Layer中去。而Partner做的修改，存儲(chǔ)到Partner對(duì)應(yīng)的Solution獨(dú)有的Layer下面。Partner Solution是C4C一個(gè)特有的概念，如下圖Cloud Application Studio中的一個(gè)例子。大家可以把Partner Solution類比成ABAP Package的一個(gè)封裝，一個(gè)Partner Solution里能存放Cloud Application Studio支持的各種資源，比如UI，BO，Web Service，OData開發(fā)等等。每個(gè)Partner Solution在XREP里都有對(duì)應(yīng)的Layer。

我的同事Yang Joey曾經(jīng)在他的文章SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處提到過(guò)，C4C的UI界面的源代碼，是以XML格式存儲(chǔ)在ABAP Netweaver后臺(tái)的XREP里的。XREP提供了許多訪問(wèn)這些XML文件的API，比如讀取，解析，激活等等。同S/4HANA LREP一樣，C4C XREP有不同的Layer，分別存儲(chǔ)SAP標(biāo)準(zhǔn)UI，Partner創(chuàng)建的UI，以及用戶所創(chuàng)建的資源。通過(guò)Layer實(shí)現(xiàn)了資源的區(qū)分隔離，使得操作者對(duì)UI的更改不需要修改最底層SAP標(biāo)準(zhǔn)的UI文件。運(yùn)行時(shí)，上層的更改覆蓋對(duì)應(yīng)的底層文件的表現(xiàn)。關(guān)于不同層之間合并(Merge)的更多細(xì)節(jié)，請(qǐng)參考Jerry文章SAP產(chǎn)品的Field Extensibility里S/4HANA章節(jié)里對(duì)LREP的介紹。

運(yùn)行時(shí)，C4C框架從XREP?Layer $Load讀取UI源代碼，從下圖中我們看到$Load包含SAP標(biāo)準(zhǔn)UI，以及Partner和客戶進(jìn)行UI更改產(chǎn)生的CT。在Adaptation模式下產(chǎn)生的CT會(huì)被立即合并到對(duì)應(yīng)的UI去，CT合并之后$Load中的UI文件會(huì)被重新生成，以便在下次加載時(shí)前臺(tái)框架總是基于最新合并后的UI源代碼進(jìn)行渲染。

我們現(xiàn)在以Adaptation的方式修改一個(gè)標(biāo)準(zhǔn)字段的屬性，然后觀察伴隨著這個(gè)修改動(dòng)作，自動(dòng)生成的CT到底是什么樣子的。我們將Employee UI上Manager這個(gè)標(biāo)準(zhǔn)字段的Mandatory屬性打上勾，意思是如果該字段未維護(hù)，則對(duì)Employee做的修改無(wú)法成功保存。

因?yàn)橛脩艉蚉artner無(wú)法登陸C4C后臺(tái)，所以我們需要用另一種方式查看生成的CT明細(xì)。在地址欄的url里增加debugMode=true的參數(shù)進(jìn)入調(diào)試模式。

然后重新加載該頁(yè)面，按住Ctrl +?鼠標(biāo)左鍵點(diǎn)擊“Manager”字段，出現(xiàn)一個(gè)彈出窗口。下圖紅色下劃線標(biāo)注的就是這個(gè)CT在XREP中的存儲(chǔ)路徑。路徑里有個(gè)片段"AddCondition", 提示了這個(gè)CT的類型。點(diǎn)擊超鏈接"Get CTs"查看CT明細(xì)。

這個(gè)CT的XML內(nèi)容如下：

里面包含的一些重要信息：

• UsedAnchor：這個(gè)屬性是C4C Extensibility設(shè)計(jì)區(qū)分于SAP CRM和S/4HANA的最重要標(biāo)志之一，馬上詳細(xì)介紹。上圖的UsedAnchor類型為SectionGroupAnchor，xrepPath為該Anchor在XREP中的路徑。

• TargetFile： 說(shuō)明這個(gè)CT會(huì)被合并到哪個(gè)C4C UI上。上圖例子里的值為COD_Employee.TI, 指的是Employee的明細(xì)頁(yè)面，即Employee明細(xì)頁(yè)面上發(fā)生了UI Adaptation操作。

• AddCondition：說(shuō)明這個(gè)UI修改的具體類型。上圖例子指修改的屬性名稱為"Mandatory", 默認(rèn)值為true。

現(xiàn)在來(lái)細(xì)說(shuō)UsedAnchor。Jerry的文章SAP產(chǎn)品的Field Extensibility?曾經(jīng)提到，在SAP CRM和S/4HANA的后臺(tái)，都有一個(gè)統(tǒng)一的Extensibility注冊(cè)表。每個(gè)應(yīng)用的開發(fā)人員，如果希望自己應(yīng)用的UI能夠支持Extensibility，那么需要將框架需要的信息注冊(cè)進(jìn)去。同樣，C4C Extensibility也需要這種注冊(cè)表的邏輯，通過(guò)上面例子里提到的Anchor實(shí)現(xiàn)。

Anchor的中文意思是“錨點(diǎn)”，這個(gè)字用在C4C Extensibility注冊(cè)這個(gè)上下文非常合適。每個(gè)Anchor指向了一個(gè)可以通過(guò)C4C Key User Tool進(jìn)行增強(qiáng)的UI區(qū)域。我們用UI Designer中打開剛才修改了Manager字段Mandatory屬性的Employee明細(xì)頁(yè)面，發(fā)現(xiàn)Manager字段位于一個(gè)Section Group中。選中該Group，從頁(yè)面右邊的Extensibility屬性中能發(fā)現(xiàn)維護(hù)有一個(gè)Anchor。該Anchor即我們之前研究的CT的XML內(nèi)容里UsedAnchor字段的值。

如果一個(gè)Section Group的Extensibility屬性處維護(hù)有Anchor，意思是SAP C4C聲明該Section Group可以被Key User Tool增強(qiáng)。反之，不可增強(qiáng)。在Adaptation模式下將鼠標(biāo)放至這些不可增強(qiáng)的UI上，只會(huì)被高亮，但沒有任何工具欄顯示。

除了Key User Tool外，C4C的Partner還有另外一個(gè)途徑對(duì)UI做增強(qiáng)，即使用Cloud Application Studio的Extensibility Explorer。選中一個(gè)UI Section Group，如果該Group的Extensibility字段維護(hù)了Anchor，那么可以看到下圖紅色高亮的操作選項(xiàng)，按照向?qū)Ъ纯蓪?duì)該UI做增強(qiáng)。

最后，這些自動(dòng)創(chuàng)建的CT，到底是在何時(shí)何處，由誰(shuí)創(chuàng)建的？

**CT?**創(chuàng)建

CT創(chuàng)建的觸發(fā)是在UI端JavaScript代碼中完成，然后投遞到C4C后臺(tái)的。在C4C UI端JavaScript的目錄sap/client/flex/changes文件夾下，存放著不同類型的UI修改對(duì)應(yīng)的處理器(Handler)。比如AddConditionHandler.js這個(gè)文件，負(fù)責(zé)響應(yīng)用戶在Key User Tool里對(duì)UI字段的屬性做了修改的事件。

而ChangeRegistry.js, 作為響應(yīng)用戶在Key User Tool里操作的入口，將不同類型的UI修改分發(fā)給對(duì)應(yīng)的處理器進(jìn)行處理。

下圖顯示的是當(dāng)"PropertyChange"這個(gè)類型的UI修改發(fā)生時(shí)，該修改被ChangeRegistry.js投遞給處理器PropertyChange.js。

PropertyChange.js會(huì)根據(jù)傳入的事件參數(shù)進(jìn)行解析，判斷出當(dāng)前發(fā)生更改的字段的Property是mandatory，于是進(jìn)入_mandatoryChanged進(jìn)行處理，創(chuàng)建CT記錄這個(gè)修改。

希望這篇文章能讓大家對(duì)C4C的Extensibility設(shè)計(jì)有一個(gè)粗淺的了解，感謝閱讀。

更多閱讀

• SAP產(chǎn)品的Field Extensibility

• SAP成都研究院C4C光明左使：SAP Cloud for Customer 使用SAP UI5的獨(dú)特之處

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

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

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

• Hello World, S/4HANA for Customer Management 1.0

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:

總結(jié)

以上是生活随笔為你收集整理的SAP Cloud for Customer Extensibility的设计与实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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