Skip to Content
Author's profile photo Jerry Wang

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

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.

/wp-content/uploads/2015/10/clipboard1_813023.png

The appearance with style = long looks like below:

/wp-content/uploads/2015/10/clipboard2_813024.png

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:

/wp-content/uploads/2015/10/clipboard4_813025.png

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:

/wp-content/uploads/2015/10/clipboard5_813026.png

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.

/wp-content/uploads/2015/10/clipboard6_813027.png

3. Overwrite the formatOption via Chrome console.

Simply overwrite existing value with “medium”.

/wp-content/uploads/2015/10/clipboard7_813028.png

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

/wp-content/uploads/2015/10/clipboard8_813029.png

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.

/wp-content/uploads/2015/10/clipboard9_813030.png

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nicolai Hansen
      Nicolai Hansen

      Hi Jerry

      First of all thanks for a nice post regarding debugging the formatter options.

       

      I got a question regarding changing formatOptions dynamically. Is it possible to change the formatOptions dynamically in the controller in UI5?

       

      If that's the case can you please describe how to do it? I have tried a lot of options and none of them are working 🙁 I still see the old decimal notation 🙁