How to dynamically change the formatOption of control in the runtime via debugging

[JerryWang]

• 1. Find out where to set breakpoint.


• 2. Verify whether the breakpoint is set in the correct place.


• 3. Overwrite the formatOption via Chrome console.

Suppose I have a two DatePicker field with formatOptions set as style: long. I need to change it to "style: medium" for verification purpose in the customer system. Of course I cannot directly change the source code of XML view. Instead I can change the formatOption in the runtime via debugging.



The appearance with style = long looks like below:

This blogs introduces the step by step guide how you find where you could set breakpoint to change the format in the runtime via debugging.

1. Find out where to set breakpoint.

The tip "How does framework parse xml view to get metadata such as formatter information" is introduced in the blog Why my formatter does not work? A trouble shooting example to know how it works .

Launch the application which contains the DatePicker field whose format you would like to change, use Chrome development tool to search by keyword "formatOptions".

There are lots of results returned. Here you can filter out some unrelevant results according to your experience and understanding on UI5 framework. In this example, it is apparent that files such as NumberFormat.js and FileSizeFormat.js have nothing to do with date format and could be filtered out easily. My personal experience is to look into search results belonging to file /sap/ui/model/type/Date.js and /sap/ca/ui/model/type/Date.js. Finally I set the breakpoint within this function:

2. Verify whether the breakpoint is set in the correct place.

Re-launch the application, and my breakpoint is triggered. Also I find it is triggered by createControls() of XMLTemplateProcessor.

Now I still need to ensure that this style:long setting is just for my two DatePicker controls. In order to achieve it, double click on the highlighted callstack frame below:

The id of the control is "fd", which represents the DatePicker control with label "Start Date and Time:" I define in xml view.

Now it is confirmed that I set the breakpoint in the right place.

3. Overwrite the formatOption via Chrome console.

Simply overwrite existing value with "medium".

Switch back from console to debugging, now style is changed to "medium" successfully.

For comparison purpose, the style of "End Date and Time" remains unchanged. Resume execution and now you can see the change of formatOption via debugger takes effect. You can easily see difference between the two DatePicker fields in the UI.