怎么在SAP Cloud for Customer頁面嵌入自定義UI

怎么在SAP Cloud for Customer頁面嵌入自定義UI，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

最近Jerry所在的團(tuán)隊(duì)在做一個智能名片的項(xiàng)目，銷售代表可以使用微信小程序創(chuàng)建智能名片，發(fā)布一些促銷信息，分享到微信平臺上(朋友圈或微信群)。點(diǎn)擊名片的人可以瀏覽該銷售負(fù)責(zé)售賣的商品，查看商品的參數(shù)等各種明細(xì)信息，并可以同名片綁定的智能機(jī)器人進(jìn)行簡單的對話，詢問本次促銷活動的更多信息。

假設(shè)一位汽車銷售負(fù)責(zé)銷售如下三款汽車，這些汽車作為產(chǎn)品主數(shù)據(jù)維護(hù)在C4C系統(tǒng)中。

汽車銷售在智能名片的微信小程序里基于Mini Cooper這款車創(chuàng)建了一個促銷活動，分享到微信平臺。

其他人點(diǎn)擊進(jìn)入后，點(diǎn)擊聊天按鈕，可以同配置好的SAP Conversation AI進(jìn)行對話，了解更多關(guān)于Mini Cooper的詳情。

智能名片會把這個對Mini Cooper感興趣的人的微信用戶信息提取出來，在C4C系統(tǒng)里創(chuàng)建一個新的Lead數(shù)據(jù)。同時(shí)我們會把用戶同SAP Conversation AI的對話記錄采集下來，待收集到規(guī)?？捎^的數(shù)據(jù)之后，進(jìn)行大數(shù)據(jù)分析，采取人工智能等工具推算出最可能購買這款車型的潛在用戶，最后出一個報(bào)表顯示在C4C系統(tǒng)里供該汽車銷售查看。

我們開發(fā)一個新的應(yīng)用，進(jìn)行大數(shù)據(jù)分析和潛客分析的報(bào)表，部署在SAP云平臺上，然后將這個自開發(fā)應(yīng)用的UI嵌入到C4C.

我采用的C4C嵌入自開發(fā)應(yīng)用的技術(shù)是Mashup(混搭)，C4C的Mashup框架源自SAP Business by Design, 誕生距今已經(jīng)有十多年歷史了。技術(shù)雖然老，然而在實(shí)現(xiàn)自開發(fā)UI嵌入這些需求時(shí)非常好用。

Jerry最近在使用Mashup完成C4C嵌入自開發(fā)UI時(shí)遇到一些問題，期間得到了同事Xu Boris的大力支持，這里表示感謝。本文把遇到的問題記錄下來，方便我以后查看。

先看下實(shí)現(xiàn)效果。打開Lead明細(xì)頁面，當(dāng)前Lead的ID會自動被傳到嵌入的自定義頁面里，并完成展示邏輯。這個例子里我用微軟的bing搜索來扮演第三方應(yīng)用的角色，Lead ID 25225自動傳入到bing的頁面并自動完成搜索。

可以從這個視頻里查看到動態(tài)效果：

自開發(fā)頁面的嵌入，技術(shù)上是通過iframe標(biāo)簽實(shí)現(xiàn)的：

在C4C的Mashup Authoring里創(chuàng)建一個新的HTML Mashup：

需要指定Port Binding. 我第一次使用Mashup時(shí)，對下面這段幫助文檔的文字看得似懂非懂，后來熟悉了才懂得，Port Binding即一個個容器，每個容器包含了一系列輸入字段。因?yàn)镸ashup總是要通過iframe嵌入到標(biāo)準(zhǔn)頁面上的，而標(biāo)準(zhǔn)頁面上字段的值，就通過這些輸入?yún)?shù)傳遞到Mashup里。

假設(shè)我想把Lead頁面的LeadID傳到Mashup里，就在Mashup創(chuàng)建頁面選擇Lead Info這個Inport里的LeadID字段。

然后把這個LeadID字段綁定到bing搜索的輸入?yún)?shù)q即可。

在創(chuàng)建Mashup頁面里，選擇的Port Binding名叫Lead Info，里面包含的輸入?yún)?shù)是在哪里定義的？

打開這個名叫COD_globalmashupporttypes的模型，其類型稱為port type, 其實(shí)就是一個包，包含了C4C標(biāo)準(zhǔn)支持的所有Mashup輸入?yún)?shù)容器。

持續(xù)往下拖，我例子里使用的LeadInfo里的LeadID字段就定義在這里。

下一步把創(chuàng)建好的Mashup配置到Lead明細(xì)頁面里。注意到C4C里存在Sales Leads和Leads兩個工作中心視圖：

前者(Sales Lead)及對應(yīng)的OData服務(wù)已經(jīng)被標(biāo)注成Deprecated，因此我們先將Mashup配置到后者Leads視圖上。

在Key User Tool的Adaptation模式下，點(diǎn)擊Add按鈕，

選擇之前創(chuàng)建好的Mashup模型，就能將其添加到C4C標(biāo)準(zhǔn)頁面了。

注意，并不是任意創(chuàng)建的Mashup都能添加到任意的C4C頁面(我稱其為宿主頁面)。換言之，僅當(dāng)宿主頁面UI模型存在一個Outport，其指向的Port Binding，和某個Mashup創(chuàng)建時(shí)基于的Port Binding一致的時(shí)候，后者才能夠通過Key User Tool的方式，被嵌入到前者中。

對于Leads明細(xì)頁面COD_Mkt_Prospect來說，它存在一個Outport，指向Lead_Info——正好是我創(chuàng)建的Mashup基于的Port Binding，因此我可以在Lead頁面上直接用Key User Tool添加創(chuàng)建好的Mashup.

如果由于種種原因，不得不使用處于Deprecated狀態(tài)的Sales Lead，就會遇到一個問題：因?yàn)槠銾I模型COD_MarketingLead并不存在任何一個指向Lead_Info的Outport，因此無法直接通過Key User Tool將Mashup添加到C4C UI上。

此時(shí)我們可以轉(zhuǎn)換思路，使用SAP C4C的Cloud Application Studio來完成Mashup的嵌入需求。C4C的Embedded Component(下文簡稱EC)作為可以裝載其他UI控件的可重用UI組件，當(dāng)然也能放置一個Mashup于其內(nèi)。因此，我們將創(chuàng)建好的HTML Mashup放置到一個EC內(nèi)，再將該EC嵌入到C4C標(biāo)準(zhǔn)頁面即可。

這種方式和Key User Tool比較，缺陷在于從宿主UI到EC，以及從EC到Mashup的參數(shù)傳遞需要應(yīng)用開發(fā)人員自己搞定，步驟稍嫌繁瑣一些。以LeadID這個參數(shù)為例，需要先從C4C標(biāo)準(zhǔn)UI傳遞到EC，再從EC傳遞到Mashup.

C4C UI組件跳轉(zhuǎn)時(shí)的參數(shù)傳遞通過一對Outport和Inport來完成，跳轉(zhuǎn)的發(fā)起方維護(hù)Outport，將參數(shù)傳遞到跳轉(zhuǎn)目的地UI維護(hù)的Inport中去。在跳轉(zhuǎn)的發(fā)起方里維護(hù)跳轉(zhuǎn)關(guān)系，將其Outport同跳轉(zhuǎn)目的地的Inport配對，也稱為綁定。

下圖藍(lán)色的圖例，代表為了完成參數(shù)從C4C UI經(jīng)由EC最終傳遞到Mashup，所需要創(chuàng)建的Outport和Inport.

詳細(xì)開發(fā)步驟如下：

(1) 創(chuàng)建一個新的EC，稍后我們會把HTML Mashup放置到這個EC里去。但是在此之前，首先要完成C4C UI到EC的LeadID參數(shù)傳遞。

創(chuàng)建一個名叫fromLeadTI的Inport，定義一個參數(shù)objectID, 綁定到EC模型的leadID字段上。如此一來，我們將該EC添加到Lead頁面時(shí)，將Lead頁面的Outport的leadID綁定到該EC創(chuàng)建的Inport的leadID字段，完成從C4C頁面到EC的參數(shù)傳遞。

(2) 創(chuàng)建一個新的Port Type AICardPortTypePackage，在Inport里定義一個參數(shù)SalesLeadID，這個參數(shù)完成從EC到Mashup的LeadID傳遞任務(wù)。

接著創(chuàng)建一個自定義Port Binding，將剛剛創(chuàng)建的Port Type里聲明的包含SalesLeadID輸入?yún)?shù)的inport暴露出來，供Mashup使用。

(3) 創(chuàng)建一個新的HTML Mashup，使用第二步創(chuàng)建的自定義Port Binding：

如此一來，Mashup就能使用自定義Port Binding里暴露出來的SalesLeadID這個輸入?yún)?shù)了：

將其綁定到bing搜索的url參數(shù)q上去，至此Mashup的配置完畢。

(4) 在UI Designer里將該EC添加到Lead頁面去：

我們在第一步里不是給EC創(chuàng)建了一個Inport，參數(shù)為objectID么？將EC添加到C4C Lead UI后，將Lead UI Outport的SalesLeadID綁定到EC Inport的objectID, 這就實(shí)現(xiàn)了從C4C UI到EC的參數(shù)傳遞。

(5) 最后要完成從EC到Mashup的參數(shù)傳遞。因此在EC里創(chuàng)建一個Outport，將SalesLeadID傳遞給第二步創(chuàng)建的Port Type Package里包含的自定義Port Binding里去。因?yàn)槲覄?chuàng)建的Mashup正是基于這個自定義Port Binding，所以能夠使用從EC傳遞過來的數(shù)據(jù)。

最后一個步驟，將Mashup拖拽到這個EC里：

將EC Outport的SalesLeadID綁定到Mashup Inport的同名參數(shù)上，完成從EC到Mashup的參數(shù)傳遞。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。