筆者在掘金社區(qū)上已經(jīng)發(fā)布了一些技術(shù)文章，記錄了自己工作于企業(yè)級(jí)前端應(yīng)用幾年以來(lái)積累的一些項(xiàng)目經(jīng)驗(yàn)和教訓(xùn)。

之前的文章關(guān)于企業(yè)級(jí) Web 應(yīng)用搜索引擎優(yōu)化 Search Engine Optimization 的一些工作經(jīng)驗(yàn)分享已經(jīng)提到，所謂企業(yè)級(jí)前端應(yīng)用，是指為大型企業(yè)或組織開(kāi)發(fā)的前端應(yīng)用，這些應(yīng)用具有超過(guò)一般 2C 軟件的技術(shù)復(fù)雜度，高度定制化和可擴(kuò)展性，因?yàn)槠髽I(yè)級(jí)前端應(yīng)用程序，通常需要滿足企業(yè)特定的業(yè)務(wù)需求和技術(shù)要求，因此除了實(shí)現(xiàn)業(yè)務(wù)需求之外，還必須具備強(qiáng)大的性能、可擴(kuò)展性、安全性和可維護(hù)性。在企業(yè)級(jí)前端開(kāi)發(fā)中，開(kāi)發(fā)者需要面對(duì)大規(guī)模數(shù)據(jù)處理、復(fù)雜的業(yè)務(wù)邏輯、多模塊協(xié)同工作等挑戰(zhàn)。

Extensibility 是企業(yè)級(jí) Web 應(yīng)用需要滿足的 Product Standard 之一。因?yàn)?2B 領(lǐng)域用戶的復(fù)雜度遠(yuǎn)超 2C，很多時(shí)候都會(huì)出現(xiàn) Web 應(yīng)用的標(biāo)準(zhǔn)功能，無(wú)法滿足企業(yè)客戶千差萬(wàn)別的業(yè)務(wù)需求。此時(shí) Web 應(yīng)用需要能夠給企業(yè)級(jí)用戶提供自定義 UI 的靈活度，這就是 Extensibility.

本文筆者給大家分享自己在企業(yè)級(jí)軟件開(kāi)發(fā)領(lǐng)域工作十余年，積累下來(lái)的一些自定義 UI 創(chuàng)建功能的設(shè)計(jì)和實(shí)現(xiàn)思路。

本文以 SAP CRM，SAP Cloud for Customer，SAP Fiori 和 SAP 電商云 Spartacus UI 這四種 SAP 產(chǎn)品里用到的 UI 開(kāi)發(fā)技術(shù)來(lái)舉例說(shuō)明，在這些 SAP 產(chǎn)品里，當(dāng)合作伙伴完成自定義 UI 組件開(kāi)發(fā)之后，如何將其配置到對(duì)應(yīng)的 UI Frame 中去。

SAP CRM

當(dāng)我們使用 WebClient UI 完成一個(gè) SAP CRM UI Component 開(kāi)發(fā)后，可以在開(kāi)發(fā)工具里點(diǎn)擊 Test 按鈕預(yù)覽其外觀：

預(yù)覽結(jié)果如下：

大家把上圖和下圖通過(guò) SAP CRM 登錄頁(yè)面訪問(wèn)的產(chǎn)品明細(xì)頁(yè)面進(jìn)行比較，不難發(fā)現(xiàn) SAP CRM UI Frame 的身影，即下圖紅色高亮區(qū)域，形如一個(gè)顛倒的大寫(xiě)字母 L.

SAP CRM UI Frame 里，按照實(shí)現(xiàn)功能的不同，又分為不同的子區(qū)域，其中業(yè)務(wù)用戶幾乎每天都會(huì)訪問(wèn)到的是工作中心(Work Centers) 和工作中心視圖(Work Center Views)，二者是業(yè)務(wù)用戶使用 SAP 系統(tǒng)的入口所在。

下面是一些自開(kāi)發(fā)的 UI Component 配置到 SAP CRM UI Frame 之后的效果圖：

SAP Cloud for Customer

在 SAP C4C 里使用 Cloud Application Studio 和 UI Designer 以所見(jiàn)即所得的方式完成新的 UI 組件開(kāi)發(fā)。下圖是 SAP C4C Sales Order 搜索頁(yè)面的實(shí)現(xiàn)組件，Sales Order OWL(Object Work List)的開(kāi)發(fā)界面，其 ID 為 COD_SAKESORDER_OWL:

該 UI 組件運(yùn)行時(shí)同樣被嵌入到 SAP C4C UI Frame 之中，下圖左邊綠色區(qū)域?yàn)?SAP C4C UI Frame 的一部分，包含了工作中心和工作中心視圖的入口。

運(yùn)行時(shí)我們?yōu)g覽器里打開(kāi)上圖 Sales 工作中心，訪問(wèn) Sales Order 工作中心視圖，在 Chrome 開(kāi)發(fā)者工具里能夠觀察到該容器組件的路徑：

/BYD_COD/SalesOnDemand/SalesOrder/UI/COD_SALESORDER_WCVIEW.WCVIEW.uiwocview

按照該路徑到 UI Designer 里查看，果然發(fā)現(xiàn)該工作中心視圖里包含了 COD_SAKESORDER_OWL 這個(gè) UI 組件。

因此，在 SAP C4C 里，要將一個(gè)組件納入 UI Frame 的最直接辦法，就是將其分配給一個(gè)工作中心視圖。

除此之外，將自定義 UI 組件添加到 Embedded Component，再使用 UI 增強(qiáng)方式，將后者嵌入到 SAP C4C 其他標(biāo)準(zhǔn) UI 組件里，也能達(dá)到同樣的目的。

SAP Fiori

SAP Fiori UI 并沒(méi)有采用工作中心和工作中心視圖的概念，來(lái)作為用戶訪問(wèn) SAP UI5 應(yīng)用的入口。

開(kāi)發(fā)人員使用 Business Application Studio 或者 Visual Studio Code 等開(kāi)發(fā)工具完成 SAP UI5 應(yīng)用開(kāi)發(fā)之后，需要將其配置到 Fiori Launchpad 上，最終用戶才能通過(guò)點(diǎn)擊 Tile 的方式訪問(wèn)到這些組件。Tile 和 SAP UI5 應(yīng)用具有一一對(duì)應(yīng)的關(guān)系。

以 SAP CRM Fiori 為例，點(diǎn)擊 Launchpad 某個(gè) Tile 比如 My Opportunities 時(shí)，SAP UI5 框架向后臺(tái) Gateway 系統(tǒng)發(fā)起的第一個(gè) INTEROP 請(qǐng)求，就是詢問(wèn)該 Tile 對(duì)應(yīng)的 SAP UI5 應(yīng)用信息：

該請(qǐng)求的響應(yīng)數(shù)據(jù)里，包含了此 SAP UI5 應(yīng)用在 Gateway 系統(tǒng)中的存儲(chǔ)路徑，如下圖所示：

在 SAP S/4HANA Fiori Launchpad 里，這個(gè)請(qǐng)求返回的響應(yīng)，包含了被點(diǎn)擊的 Tile 對(duì)應(yīng)的 SAP UI5 應(yīng)用更多的明細(xì)。

比如我們點(diǎn)擊 Service Contract Issues 這個(gè) Tile：

在響應(yīng)數(shù)據(jù)里，能查看該 SAP UI5 應(yīng)用基于的 OData 服務(wù)名稱，以及 SAP UI5 應(yīng)用的 ID：F4032

根據(jù)此 ID 進(jìn)行查詢，能得到該 SAP UI5 應(yīng)用的更多技術(shù)和配置細(xì)節(jié)：

SAP 電商云 Spartacus UI

SAP 電商云 Spartacus UI 基于 Angular 開(kāi)發(fā)，在 Angular Route 框架的基礎(chǔ)上做了一層路由封裝，該封裝層即本文一直討論的 UI Frame.

如果我們繞過(guò)該 UI Frame，直接將一個(gè)自定義的 Angular Component，通過(guò) Angular RouterModule 將該組件納入到 Spartacus 路由體系中去，然后通過(guò)配置好的路由路徑訪問(wèn)該組件，結(jié)果會(huì)如何呢？

我們?cè)?Spartacus 應(yīng)用里配置一條新的路由路徑：當(dāng)路由路徑更改為 jerry 時(shí)，會(huì)觸發(fā)到 JerryComponent 的路由。

下圖是 SAP 電商云 Spartacus UI 默認(rèn)的 homepage：

在地址欄 URL 尾部輸入 jerry，回車(chē)，會(huì)看到一個(gè)很丑陋的頁(yè)面。上圖 homepage 里包含的語(yǔ)言和國(guó)家下拉列表，購(gòu)物車(chē)圖標(biāo)，登錄用戶名，SAP Logo 等元素統(tǒng)統(tǒng)消失了。

究其原因，是因?yàn)樵?Angular 組件 JerryComponent 并沒(méi)有被納入到 SAP 電商云的 Spartacus UI Frame 中去。

Jerry 之前已經(jīng)介紹過(guò)，SAP 電商云 UI 采取 CMS 驅(qū)動(dòng)的方式設(shè)計(jì)，因此我們要想新建一個(gè)自定義頁(yè)面，需要先在 Commerce Cloud 后臺(tái)系統(tǒng)里創(chuàng)建一個(gè) CMS Content Page，然后為該 CMS 頁(yè)面創(chuàng)建一個(gè)對(duì)應(yīng)的 Angular 組件。

我們可以在 SAP Commerce Cloud Backoffice 里，或者在 SmartEdit 里，或者通過(guò)在 HAC 里導(dǎo)入 Impex 的方式，創(chuàng)建新的 Content Page：

上圖的 Impex 內(nèi)容為，創(chuàng)建一個(gè) Content Page，id 為 jerryOrderPage, 分配給頁(yè)面模板 AccountPageTemplate,頁(yè)面 label 為 /my-account/jerry-order. 后者會(huì)作為 Spartacus UI 路由路徑使用。

繼續(xù)為該頁(yè)面創(chuàng)建 ContentSlot 和 JerryOrderComponent，并將后者分配給新建的 ContentSlot 去。

最后，在 Spartacus 中新建 Angular Component，并映射到上述剛剛在 SAP Commerce Cloud 后臺(tái)創(chuàng)建的 CMS Component，即完成了自定義 UI 創(chuàng)建的完整步驟。

這個(gè)自定義 UI 在 SAP 電商云 Spartacus UI 中顯示效果如下，可以觀察到期望的 UI Frame 又回來(lái)了。

總結(jié)

本文以 SAP CRM，Cloud for Customer 和 Commerce Cloud 三款企業(yè)級(jí) Web 應(yīng)用為例，詳細(xì)介紹了當(dāng)客戶發(fā)覺(jué)這些Web 應(yīng)用的標(biāo)準(zhǔn)功能無(wú)法滿足自己實(shí)際業(yè)務(wù)需要時(shí)，如何能夠?qū)⒆约憾伍_(kāi)發(fā)的定制 UI 集成到原先標(biāo)準(zhǔn)的 Web 應(yīng)用中去。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-770006.html

到了這里，關(guān)于談?wù)勂髽I(yè)級(jí)應(yīng)用的自定義 UI 創(chuàng)建和集成方法一覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！