SAP CRM Application Extension Tool(AET)扩展字段的渲染原理

Recently I am doing an S4 project and I have to figure out how extension fields created by S4 extension tool is rendered in Fiori UI. It turns out that when end users add extension field in S4 Fiori UI, the UI itself is not changed at all.

Instead the detail information regarding this extension field ( label, data type, in which UI it is put etc ) are recorded into a repository in the backend server. In the runtime when the UI with extension field is rendered, this detail information is retrieved from backend repository to dynamically render the extension field in Fiori UI. This merge process is done every time the UI is displayed.

Naturally I begin to think how extension field created by CRM Application Extension Tool is rendered in Web Client UI.

In order to figure it out, first I create an extension field in CRM Product overview page:

Then I click F2 to find out its technical name and UI context ID.

Open UI Component workbench, the layout of view PRDHS/Header comes purely from configuration data. So just debug line 11 to check where this configuration xml data is stored.

The answer is from table BSPC_DL_XMLSTRX2.

This could be confirmed by checking it with context id we find via F2.

From the row read from this table, I can find the corresponding entry for extension field.

Based on this XML, Web Client UI framework now has enough information to render html page.

Just as introduced in this blog that for UI5, each kinds of UI control has its specific render which is responsible to convert UI5 control instance to native HTML source code, here CRM Web Client UI has similar logic.

In this class in line 114 below, the XML data is converted to final native HTML source code

Go deep into this method, the logic is the XML data is parsed and corresponding UI element instance is created based on settings in XML data.

All created element instances are stored in an internal table LT_RENDERER for later conversion.

The highlighted entry in below screenshot represents the UI element for extension field I created.

Then the internal table LT_RENDERER is LOOPED, render class for each UI element is called to generate HTML source code.

Below screenshot is the result HTML source code generated for the extension field:

<span class="th-tx th-tx-value th-tx-nowrap"  style="width:100%; "  title="test by IMS2 ffff fdggfdg ttt" id="C30_W112_V113_product_ext.zzbfld0000nx">test by IMS2 ffff fdggfdg ttt      

Once all conversion are done, check the content in variable lv_html in HTML view in debugger, the extension field is already there. This is also end user will see in browser finally.