且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SAP UI5 formatter的工作原理

更新时间:2022-09-02 13:12:06

Recently I am following the exercise Building SAP Fiori-like UIs with SAPUI5( it is really a fantastic guide

SAP UI5 formatter的工作原理SAP UI5 formatter的工作原理Why the formatter for status is not called at all

Since none of other SCNers has complained about this issue, so I assume there must be something wrong in my own code. So I began to debug to compare why formatter for CreatedAt works.


Soon I found out how formatter for CreatedAt works. In the runtime, firstly the raw value of field CreatedAt is fetched from line 22833 and stored in variable oValue, and then passed to its formatter in line 22838.


The “this.fnFormatter” actually points to the formatter scn_exercise.util.Formatter.date defined in my code.

SAP UI5 formatter的工作原理How does framework parse xml view to get metadata such as formatter information

The screenshot below contains a good entry point for xml view parse debugging.The XMLTemplateProcessor-dbg.js contains the implementation to parse xml source code and create UI5 control accordingly.

SAP UI5 formatter的工作原理Finally I reached the code below. After line 21082 is executed, the formatter for field CreatedAt will be parsed.

SAP UI5 formatter的工作原理I will explain how the reference pointing to my formatter for CreatedAt is parsed via text.

before the for loop, variable oObject points to the global window object, since no context exists in this case.


The first for loop: i = 0, execute line 15162, aNames[0] = “scn_exercise”, so after that oObject now points to window.scn_exercise.

The secondfor loop: i = 1, aNames[1] = util, so after line 15162 oObject points to window.scn_exercise.util.


The third loop: i = 2, aNames[2] = Formatter, so after line 15162 oObject points to window.scn_exercise.util.Formatter

The fourth loop: i = 3, aNames[3] = date, so after line 15162 oObject points to window.scn_exercise.util.Formatter.date.Then quit for loop.

SAP UI5 formatter的工作原理SAP UI5 formatter的工作原理When the attribute util become available under window.scn_exercise

Since I have defined the usage of formatter implementation in detail view’s controller:

jQuery.sap.require(“scn_exercise.util.Formatter”);


the js file will be downloaded via AJAX and execModule is called on it after a successful download:

SAP UI5 formatter的工作原理SAP UI5 formatter的工作原理