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:

1. start our application
2. Once it has started press F12
3. 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.