最近笔者所在的团队在做一个智能名片的项目，销售代表可以使用微信小程序创建智能名片，发布一些促销信息，分享到微信平台上(朋友圈或微信群)。点击名片的人可以浏览该销售负责售卖的商品，查看商品的参数等各种明细信息，并可以同名片绑定的智能机器人进行简单的对话，询问本次促销活动的更多信息。

假设一位汽车销售负责销售如下三款汽车，这些汽车作为产品主数据维护在 SAP C4C 系统中。

汽车销售在智能名片的微信小程序里基于 Mini Cooper 这款车创建了一个促销活动，分享到微信平台。

其他人点击进入后，点击聊天按钮，可以同配置好的 SAP Conversation AI 进行对话，了解更多关于 Mini Cooper 的详情。

智能名片会把这个对 Mini Cooper 感兴趣的人的微信用户信息提取出来，在 C4C 系统里创建一个新的 Lead 数据。同时我们会把用户同 SAP Conversation AI 的对话记录采集下来，待收集到规模可观的数据之后，进行大数据分析，采取人工智能等工具推算出最可能购买这款车型的潜在用户，最后出一个报表显示在 C4C 系统里供该汽车销售查看。

我们开发一个新的应用，进行大数据分析和潜客分析的报表，部署在 SAP 云平台上，然后将这个自开发应用的 UI 嵌入到 C4C.

笔者项目中采用的 SAP C4C 嵌入自开发应用的技术是 Mashup(混搭)，C4C 的 Mashup 框架源自 SAP Business by Design，在实现自开发 UI 嵌入这些需求时非常好用。

先看下实现效果。打开 Lead 明细页面，当前 Lead 的 ID 会自动被传到嵌入的自定义页面里，并完成展示逻辑。这个例子里我用微软的 bing 搜索来扮演第三方应用的角色，Lead ID 25225 自动传入到 bing 的页面并自动完成搜索。

可以从这个视频里查看到动态效果：

自开发页面的嵌入，技术上是通过 iframe 标签实现的：

在 C4C 的 Mashup Authoring 里创建一个新的 HTML Mashup：

需要指定 Port Binding. 笔者第一次使用 Mashup 时，对下面这段帮助文档的文字看得似懂非懂，后来熟悉了才懂得，Port Binding 即一个个容器，每个容器包含了一系列输入字段。因为 Mashup 总是要通过 iframe 嵌入到标准页面上的，而标准页面上字段的值，就通过这些输入参数传递到 Mashup 里。

假设我想把 Lead 页面的 LeadID 传到 Mashup 里，就在 Mashup 创建页面选择 Lead Info 这个 Inport 里的 LeadID 字段。

然后把这个 LeadID 字段绑定到 bing 搜索的输入参数 q 即可。

在创建 Mashup 页面里，选择的 Port Binding 名叫 Lead Info，里面包含的输入参数是在哪里定义的？

打开这个名叫 COD_globalmashupporttypes 的模型，其类型称为 port type, 其实就是一个包，包含了 C4C 标准支持的所有 Mashup 输入参数容器。

持续往下拖，我例子里使用的 LeadInfo 里的 LeadID 字段就定义在这里。

下一步把创建好的 Mashup 配置到 Lead 明细页面里。注意到 C4C 里存在 Sales Leads 和 Leads 两个工作中心视图：

前者(Sales Lead)及对应的 OData 服务已经被标注成 Deprecated，因此我们先将 Mashup 配置到后者 Leads 视图上。

在 Key User Tool 的 Adaptation 模式下，点击 Add 按钮，

选择之前创建好的 Mashup 模型，就能将其添加到 C4C 标准页面了。

注意，并不是任意创建的 Mashup 都能添加到任意的 C4C 页面(我称其为宿主页面)。换言之，仅当宿主页面 UI 模型存在一个 Outport，其指向的 Port Binding，和某个 Mashup 创建时基于的 Port Binding 一致的时候，后者才能够通过 Key User Tool 的方式，被嵌入到前者中。

对于 Leads 明细页面 COD_Mkt_Prospect 来说，它存在一个 Outport，指向 Lead_Info——正好是我创建的 Mashup 基于的 Port Binding，因此我可以在 Lead 页面上直接用 Key User Tool 添加创建好的 Mashup.

如果由于种种原因，不得不使用处于 Deprecated 状态的 Sales Lead，就会遇到一个问题：因为其 UI 模型 COD_MarketingLead 并不存在任何一个指向 Lead_Info 的 Outport，因此无法直接通过 Key User Tool 将 Mashup 添加到 C4C UI 上。

此时我们可以转换思路，使用 SAP C4C 的 Cloud Application Studio 来完成 Mashup 的嵌入需求。C4C 的 Embedded Component(下文简称 EC)作为可以装载其他 UI 控件的可重用 UI 组件，当然也能放置一个 Mashup 于其内。因此，我们将创建好的 HTML Mashup 放置到一个 EC 内，再将该 EC 嵌入到 C4C 标准页面即可。

这种方式和 Key User Tool 比较，缺陷在于从宿主 UI 到 EC，以及从 EC 到 Mashup 的参数传递需要应用开发人员自己搞定，步骤稍嫌繁琐一些。以 LeadID 这个参数为例，需要先从 C4C 标准 UI 传递到 EC，再从 EC 传递到 Mashup.

C4C UI 组件跳转时的参数传递通过一对 Outport 和 Inport 来完成，跳转的发起方维护 Outport，将参数传递到跳转目的地 UI 维护的 Inport 中去。在跳转的发起方里维护跳转关系，将其 Outport 同跳转目的地的 Inport 配对，也称为绑定。

下图蓝色的图例，代表为了完成参数从 C4C UI 经由 EC 最终传递到 Mashup，所需要创建的 Outport 和 Inport.

详细开发步骤如下：

(1) 创建一个新的 EC，稍后我们会把 HTML Mashup 放置到这个 EC 里去。但是在此之前，首先要完成 C4C UI 到 EC 的 LeadID 参数传递。

创建一个名叫 fromLeadTI 的 Inport，定义一个参数 objectID, 绑定到 EC 模型的 leadID 字段上。如此一来，我们将该 EC 添加到 Lead 页面时，将 Lead 页面的 Outport 的 leadID 绑定到该 EC 创建的 Inport 的 leadID 字段，完成从 C4C 页面到 EC 的参数传递。

(2) 创建一个新的 Port Type AICardPortTypePackage，在 Inport 里定义一个参数 SalesLeadID，这个参数完成从 EC 到 Mashup 的 LeadID 传递任务。

接着创建一个自定义 Port Binding，将刚刚创建的 Port Type 里声明的包含 SalesLeadID 输入参数的 inport 暴露出来，供 Mashup 使用。

(3) 创建一个新的 HTML Mashup，使用第二步创建的自定义 Port Binding：

如此一来，Mashup 就能使用自定义 Port Binding 里暴露出来的 SalesLeadID 这个输入参数了：

将其绑定到 bing 搜索的 url 参数 q 上去，至此 Mashup 的配置完毕。

(4) 在 UI Designer 里将该 EC 添加到 Lead 页面去：

我们在第一步里不是给 EC 创建了一个 Inport，参数为 objectID 么？将 EC 添加到 C4C Lead UI 后，将 Lead UI Outport 的 SalesLeadID 绑定到 EC Inport 的 objectID, 这就实现了从 C4C UI 到 EC 的参数传递。

(5) 最后要完成从 EC 到 Mashup 的参数传递。因此在 EC 里创建一个 Outport，将 SalesLeadID 传递给第二步创建的 Port Type Package 里包含的自定义 Port Binding 里去。因为我创建的 Mashup 正是基于这个自定义 Port Binding，所以能够使用从 EC 传递过来的数据。

最后一个步骤，将 Mashup 拖拽到这个 EC 里：

将 EC Outport 的 SalesLeadID 绑定到 Mashup Inport 的同名参数上，完成从 EC 到 Mashup 的参数传递。

至此这种通过 Cloud Application Studio 的 Mashup 开发配置方式就介绍完了。虽然稍显繁琐一些，但较之 Key User Tool 来说更加通用，我用这种方法也成功地完成了工作中的开发任务。

感谢阅读。

总结

本文详细介绍了 HTML Mashup 技术在 SAP Cloud for Customer 产品 UI 自定义增强项目中的实现技术框架和开发细节，通过笔者参与过的一个具体实现项目，体现了这个技术在客户增强开发中发挥的强大作用。