How to debug an XML view in SAPUI5?
Debugging XML?
When a SAPUI5 application does not behave as expected debugging is an excellent idea.
But how do you debug the XML views of your SAPUI5 application?
You can only debug the java script code of your application but you can use the following trick that I got from a colleague how this task can be approached.
Solution
For demo purposes I have generated a SAP Fiori application based on the Master Detail Template available in SAP Web IDE.
Let’s try to check the Detail.view.xml of our application which is used to display the details of an entity.
The basic idea is to add a method called dummy to the formatter.js used by our application.
In the formatter.js we add a method called dummy:
sap.ui.define([
], function () {
"use strict";
return {
/**
* Rounds the currency value to 2 digits
*
* @public
* @param {string} sValue value to be formatted
* @returns {string} formatted currency value with 2 digits
*/
currencyValue : function (sValue) {
if (!sValue) {
return "";
}
return parseFloat(sValue).toFixed(2);
} ,
dummy : function (sValue) {
debugger;
if (!sValue) {
return "";
}
return sValue.toString();
}
};
}
);
In the Detail.view.xml we now call our new method when displaying the content of the property Name.
<ObjectHeader
id="objectHeader"
title="{ path: 'Name',
formatter: '.formatter.dummy'}"
number="{
path: 'Price',
formatter: '.formatter.currencyValue'
}"
numberUnit="{CurrencyCode}">
Now we do the following:
- start our application
- Once it has started press F12
- Click on a product (here: HHH) to show its details.
As a result we will be notified that the application has paused in the debugger (see above screen shot).
In the debugging window that we have opened beforehand we will see the content that has been passed.
You will also be notified by SAP Web IDE that you have added a debugger statement by issuing an appropriate warning.
Hi,
It means we can only debug which was included in formatter.js file?
You can debug whatever you want in your JavaScript Code.
It is just a trick / workaround that lets analyze errors that stem from your XML code.
good blog - the title confused me a little since this is debugging your JS (formatter) and not your XML, however, after reading the blog, it is indeed a way to see how values are set on the (XML) view that originate from a dynamic binding - unlike a direct binding from the model. thank you for sharing this blog.
as a suggestion, I think that it'd be a good idea to highlight that the formatter file gets loaded from the controller (via javascript in the require section) that the view is using and therefore the controller file loads the formatter and therefore the view can access the formatter functions. also, in order to use the formatter property in the view, you would need to expand the view binding from Property = "{someProperty}" into Property="{ path: 'somePath', formatter: .someFormatter.someFunction }"
thanks again for sharing this trick!
Great!