在SAP C4C TI(Thing Inspector)页面里添加自定义UI

SAP C4C的自开发UI可以放到Embedded Component里去，如下图所示，在Cloud Application Studio里创建一个新的Embedded Component：

我在这个自开发页面里就放了一个input field：

如果想把包含了这个input field的Embedded Component放到Sales Lead的TI页面去，UI designer里切换到Extensibility explorer，选中想要把EC放置到的目标区域，点击按钮：Add Embedded Component to Pane：

弹出对话框，在Embedded Component字段里，选择我们刚刚创建的EC：

Embedded Component必须提前创建好Inport，这个例子里我创建的Inport取名fromLead, 有一个输入参数ObjectID

左边的Source区域，Outport选择PublicOutportECLeadProduct，参数选择SalesLeadID，点击Bind进行绑定。这样TI页面的Lead ID的值就能传递到Embedded Component里了：

生成的change transaction如下：

<ChangeTransaction xmlns="http://www.sap.com/a1s/cd/oberon/uimodelchange-1.0" embeddingContext="" userType="Partner" user="K903ZOYBX3I" type="AddRemoveECToScreen" xrepPath="/YS5XJ942Y_MAIN/CHANGE_TRANSACTIONS/Partner/AddRemoveECToScreen/45d47fb08c09448f8e31d0df0871ff8d.uichange" id="9386162a9e6f4ac083855959e6441d38">


<UsedAnchor type="PaneContainerAnchor" xrepPath="/SAP_BYD_UI_FLEX/STABLE_ANCHORS/PaneContainerAnchor/UY3wFQ8MMqAhxwrWp2Co3G.uianchor">

<ReferencedAnchor type="OutPortAnchor" xrepPath="/SAP_BYD_UI_FLEX/STABLE_ANCHORS/OutPortAnchor/_9sw_Z26$4kqtD5LK_7isW.uianchor"/>


<AddECtoScreen title="Jerry Embedded Component test" textPoolId="7b909085b8bb4df1a3ba78467bbea288" InportName="fromLead" targetComponentID="/YS5XJ942Y_MAIN/SRC/ARCard/EC031801.EC.uicomponent">

<PassParameter inParamName="ObjectID" outParamName="SalesLeadID"/>

</AddECtoScreen>

</UsedAnchor>

</ChangeTransaction>

在Cloud Application Studio里创建的HTML mashup，保存到C4C后台后，其元数据再被读取到前端消费，格式如下：

我在C4C UI上指定的Mashup参数，URL的值如下：

成功解析出input为Lead_Info_In:

没有按照我期望的情形进行执行：

MashupHTMLContainer.prototype.initializePane = function() {
		var oController = this.getController();
		var oModel = oController.getComponentModel();
		var oEmbeddingcontext = oController.getEmbeddingContext();
		this._oHtmlPage.setController(oController);
		if (oModel) {
			this._createMashupModel(oModel._oData, oEmbeddingcontext);
			// checks if mashup has an inport or not
			if (this._sInport) {
				// creates inport adapter and attaches it to inport events
				this._oInportAdapter = new InportAdapter(this._sInport, oController, true);
				this._oInportAdapter.on("inportFired", $.proxy(this._onInPortFired, this));

				if (!this._oMashupModel.hasHtmlCode()) {
					// inport and source uri --> fire inport to build complete source uri
					this._oInportAdapter.refire();
					if (this._sInport === "ExtensionFieldsInPort") {
						this._getSourceUriFromModel(this._oMashupModel);
					}
				}
			} else {
				// no inport and no html content --> source uri already valid
				if (!this._oMashupModel.hasHtmlCode()) {
					this._getSourceUriFromModel(this._oMashupModel);
				}
			}
		}
	};

没有执行这个refire：

解析出来的aTargets为空：