建站
咨詢
售后
建站咨詢
新聞中心
怎么在SAP Cloud for Customer頁(yè)面嵌入自定義UI，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
創(chuàng)新互聯(lián)是一家專業(yè)提供五大連池企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為五大連池眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。最近Jerry所在的團(tuán)隊(duì)在做一個(gè)智能名片的項(xiàng)目，銷售代表可以使用微信小程序創(chuàng)建智能名片，發(fā)布一些促銷信息，分享到微信平臺(tái)上(朋友圈或微信群)。點(diǎn)擊名片的人可以瀏覽該銷售負(fù)責(zé)售賣的商品，查看商品的參數(shù)等各種明細(xì)信息，并可以同名片綁定的智能機(jī)器人進(jìn)行簡(jiǎn)單的對(duì)話，詢問本次促銷活動(dòng)的更多信息。
假設(shè)一位汽車銷售負(fù)責(zé)銷售如下三款汽車，這些汽車作為產(chǎn)品主數(shù)據(jù)維護(hù)在C4C系統(tǒng)中。
汽車銷售在智能名片的微信小程序里基于Mini Cooper這款車創(chuàng)建了一個(gè)促銷活動(dòng)，分享到微信平臺(tái)。
其他人點(diǎn)擊進(jìn)入后，點(diǎn)擊聊天按鈕，可以同配置好的SAP Conversation AI進(jìn)行對(duì)話，了解更多關(guān)于Mini Cooper的詳情。
智能名片會(huì)把這個(gè)對(duì)Mini Cooper感興趣的人的微信用戶信息提取出來，在C4C系統(tǒng)里創(chuàng)建一個(gè)新的Lead數(shù)據(jù)。同時(shí)我們會(huì)把用戶同SAP Conversation AI的對(duì)話記錄采集下來，待收集到規(guī)?？捎^的數(shù)據(jù)之后，進(jìn)行大數(shù)據(jù)分析，采取人工智能等工具推算出最可能購(gòu)買這款車型的潛在用戶，最后出一個(gè)報(bào)表顯示在C4C系統(tǒng)里供該汽車銷售查看。
我們開發(fā)一個(gè)新的應(yīng)用，進(jìn)行大數(shù)據(jù)分析和潛客分析的報(bào)表，部署在SAP云平臺(tái)上，然后將這個(gè)自開發(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ì)頁(yè)面，當(dāng)前Lead的ID會(huì)自動(dòng)被傳到嵌入的自定義頁(yè)面里，并完成展示邏輯。這個(gè)例子里我用微軟的bing搜索來扮演第三方應(yīng)用的角色，Lead ID 25225自動(dòng)傳入到bing的頁(yè)面并自動(dòng)完成搜索。
可以從這個(gè)視頻里查看到動(dòng)態(tài)效果：
自開發(fā)頁(yè)面的嵌入，技術(shù)上是通過iframe標(biāo)簽實(shí)現(xiàn)的：
在C4C的Mashup Authoring里創(chuàng)建一個(gè)新的HTML Mashup：
需要指定Port Binding. 我第一次使用Mashup時(shí)，對(duì)下面這段幫助文檔的文字看得似懂非懂，后來熟悉了才懂得，Port Binding即一個(gè)個(gè)容器，每個(gè)容器包含了一系列輸入字段。因?yàn)镸ashup總是要通過iframe嵌入到標(biāo)準(zhǔn)頁(yè)面上的，而標(biāo)準(zhǔn)頁(yè)面上字段的值，就通過這些輸入?yún)?shù)傳遞到Mashup里。
假設(shè)我想把Lead頁(yè)面的LeadID傳到Mashup里，就在Mashup創(chuàng)建頁(yè)面選擇Lead Info這個(gè)Inport里的LeadID字段。
然后把這個(gè)LeadID字段綁定到bing搜索的輸入?yún)?shù)q即可。
在創(chuàng)建Mashup頁(yè)面里，選擇的Port Binding名叫Lead Info，里面包含的輸入?yún)?shù)是在哪里定義的？
打開這個(gè)名叫COD_globalmashupporttypes的模型，其類型稱為port type, 其實(shí)就是一個(gè)包，包含了C4C標(biāo)準(zhǔn)支持的所有Mashup輸入?yún)?shù)容器。
持續(xù)往下拖，我例子里使用的LeadInfo里的LeadID字段就定義在這里。
下一步把創(chuàng)建好的Mashup配置到Lead明細(xì)頁(yè)面里。注意到C4C里存在Sales Leads和Leads兩個(gè)工作中心視圖：
前者(Sales Lead)及對(duì)應(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)頁(yè)面了。
注意，并不是任意創(chuàng)建的Mashup都能添加到任意的C4C頁(yè)面(我稱其為宿主頁(yè)面)。換言之，僅當(dāng)宿主頁(yè)面UI模型存在一個(gè)Outport，其指向的Port Binding，和某個(gè)Mashup創(chuàng)建時(shí)基于的Port Binding一致的時(shí)候，后者才能夠通過Key User Tool的方式，被嵌入到前者中。
對(duì)于Leads明細(xì)頁(yè)面COD_Mkt_Prospect來說，它存在一個(gè)Outport，指向Lead_Info——正好是我創(chuàng)建的Mashup基于的Port Binding，因此我可以在Lead頁(yè)面上直接用Key User Tool添加創(chuàng)建好的Mashup.
如果由于種種原因，不得不使用處于Deprecated狀態(tài)的Sales Lead，就會(huì)遇到一個(gè)問題：因?yàn)槠銾I模型COD_MarketingLead并不存在任何一個(gè)指向Lead_Info的Outport，因此無法直接通過Key User Tool將Mashup添加到C4C UI上。
此時(shí)我們可以轉(zhuǎn)換思路，使用SAP C4C的Cloud Application Studio來完成Mashup的嵌入需求。C4C的Embedded Component(下文簡(jiǎn)稱EC)作為可以裝載其他UI控件的可重用UI組件，當(dāng)然也能放置一個(gè)Mashup于其內(nèi)。因此，我們將創(chuàng)建好的HTML Mashup放置到一個(gè)EC內(nèi)，再將該EC嵌入到C4C標(biāo)準(zhǔn)頁(yè)面即可。
這種方式和Key User Tool比較，缺陷在于從宿主UI到EC，以及從EC到Mashup的參數(shù)傳遞需要應(yīng)用開發(fā)人員自己搞定，步驟稍嫌繁瑣一些。以LeadID這個(gè)參數(shù)為例，需要先從C4C標(biāo)準(zhǔn)UI傳遞到EC，再?gòu)腅C傳遞到Mashup.
C4C UI組件跳轉(zhuǎn)時(shí)的參數(shù)傳遞通過一對(duì)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配對(duì)，也稱為綁定。
下圖藍(lán)色的圖例，代表為了完成參數(shù)從C4C UI經(jīng)由EC最終傳遞到Mashup，所需要?jiǎng)?chuàng)建的Outport和Inport.
詳細(xì)開發(fā)步驟如下：
(1) 創(chuàng)建一個(gè)新的EC，稍后我們會(huì)把HTML Mashup放置到這個(gè)EC里去。但是在此之前，首先要完成C4C UI到EC的LeadID參數(shù)傳遞。
創(chuàng)建一個(gè)名叫fromLeadTI的Inport，定義一個(gè)參數(shù)objectID, 綁定到EC模型的leadID字段上。如此一來，我們將該EC添加到Lead頁(yè)面時(shí)，將Lead頁(yè)面的Outport的leadID綁定到該EC創(chuàng)建的Inport的leadID字段，完成從C4C頁(yè)面到EC的參數(shù)傳遞。
(2) 創(chuàng)建一個(gè)新的Port Type AICardPortTypePackage，在Inport里定義一個(gè)參數(shù)SalesLeadID，這個(gè)參數(shù)完成從EC到Mashup的LeadID傳遞任務(wù)。
接著創(chuàng)建一個(gè)自定義Port Binding，將剛剛創(chuàng)建的Port Type里聲明的包含SalesLeadID輸入?yún)?shù)的inport暴露出來，供Mashup使用。
(3) 創(chuàng)建一個(gè)新的HTML Mashup，使用第二步創(chuàng)建的自定義Port Binding：
如此一來，Mashup就能使用自定義Port Binding里暴露出來的SalesLeadID這個(gè)輸入?yún)?shù)了：
將其綁定到bing搜索的url參數(shù)q上去，至此Mashup的配置完畢。
(4) 在UI Designer里將該EC添加到Lead頁(yè)面去：
我們?cè)诘谝徊嚼锊皇墙oEC創(chuàng)建了一個(gè)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)建一個(gè)Outport，將SalesLeadID傳遞給第二步創(chuàng)建的Port Type Package里包含的自定義Port Binding里去。因?yàn)槲覄?chuàng)建的Mashup正是基于這個(gè)自定義Port Binding，所以能夠使用從EC傳遞過來的數(shù)據(jù)。
最后一個(gè)步驟，將Mashup拖拽到這個(gè)EC里：
將EC Outport的SalesLeadID綁定到Mashup Inport的同名參數(shù)上，完成從EC到Mashup的參數(shù)傳遞。
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。
本文標(biāo)題：怎么在SAPCloudforCustomer頁(yè)面嵌入自定義UI-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.dlmjj.cn/article/ccgccp.html
