Skip to Content
Author's profile photo Andre Fischer

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:

  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.

 

 

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mounika Guni
      Mounika Guni

      Hi,

      It means we can only debug which was included in formatter.js file?

      Author's profile photo Andre Fischer
      Andre Fischer
      Blog Post Author

      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.

       

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      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!

      Author's profile photo vishwanath vedula
      vishwanath vedula

      Great!