SAP UI5 formatter的工作原理

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

 

 

) and I meet with trouble in EXERCISE 3 – FORMATTER. I just copy the source code from the guide:

 

 

Unfortunately my formatter statusText which is used to format LifecycleStatus in Master page is not called in runtime at all:

 

 

And to my surprise,the same syntax for date formatter can work perfectly in detail page. Why?

 

 

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.

 

 

However, for the failure case,the framework didn’t recognize any formatter for LifecycleStatus,so my formatter is not called at all.

 

 

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.

 

 

from the callstack we know its method handleChildren, createControls etc is recursively called to handle with controls defined hierarchically in your xml view.

 

 

Finally I reached the code below. After line 21082 is executed, the formatter for field CreatedAt will be parsed.

 

 

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.

 

 

why the formatter for Lifecyclestatus is failed to be parsed?

based on the previous analysis on formatter for CreatedAt, we can easily figure out what is wrong.

In the case for Lifecyclestatus,there is no attribute named “util” under window.scn_exercise, instead only a dummy one “Component”.

 

 

just compare the correct case for CreatedAt,where all our formatters are existing under window.scn_exercise.

 

 

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:

 

 

the js source code is executed via eval:

 

 

after that the util is available in window.scn_exercise:

 

 

then finally I find the root cause: I forget to add the following line in my master controller. Once I have added this, the issue is gone.

 

 

Hope this blog can give you some hint to do trouble shooting by yourself when you meet with the formatter or xml view parse issue.

要获取更多Jerry的原创文章，请关注公众号"汪子熙":