天天看點

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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:

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

The answer is from table BSPC_DL_XMLSTRX2.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理

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.

SAP CRM Application Extension Tool(AET)擴充字段的渲染原理