SAPUI5: Debugging Recipe

[Syed]

Hello SAP Community,

Introduction:

This is Syed Baba Tajuddin Hussaini with a new blog post on SAPUI5.

The blog post you are viewing at this moment provides the following helpful information for newbies:

1. How to identify the "view name" and the "UI element"?
   
   


2. When the button is clicked, which function is called, and its location?

Let's get straight to the point:

1. 
   

   How to identify the "view name" and the "UI element"?

   
   

• Add Fiori Doctor Plugin to Google Chrome or Microsoft Edge.


• Click on the Fiori Doctor Plugin Icon to start:

 

To know the view name of a page and control. Switch on the following buttons. 

 We can see in the below image the plugin shows the namespace, project name, and view name.

       

 

• If we hover over any UI element. The Fiori Doctor Plugin shows the UI element name. For instance, we will hover over the web component button the plugin shows the class name as shown below.
  
  


• The Fiori Doctor plugin enables us to instantly identify the view name, UI element name, clear the cache, and know the SAPUI5 version of the application, etc.
  

  2. When the button is clicked, which function is called, and its location?

  
  


• A very useful tool is provided by the SAPUI5 framework called UI5 Diagnostics.


• We will be using a UI5 Diagnostic tool for debugging.


• Make sure that the SAPUI5 application you would like to debug is open / loaded in your web browser.


• Once the application is loaded.


• You can open the Technical Information Dialog by pressing Ctrl + Shift + Alt + S.


• Another way to open is by pressing Ctrl + Shift + Alt + P.
  
  


• Click on "Open DIagnostics".


• UI5 Diagnostics window will get opened.
  
  


• Expand Debugging.


• Click on the "Select Class" drop-down list. Here, the list of classes appears. As per Fiori Doctor, we will select the web component button class as shown in one of the above images "sap.ui.webc.main.Button" in other cases if it is a normal button select the class as "sap.m.button".
  
  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

• Once you select the required class.


• Click on Add Class.
  
  


• Click on the "Select Method" drop-down list. Here, the list of methods appears.
  
  


• We will select a method called "fireClick".
  
  
  


• In this example, we have used the SAPUI5 web component button. Hence, we selected the method "fireClick".


• However, if the class of the button is "sap.m.button" then select the method as "firePress".


• Once we select the required method.


• Go to your application which is opened/loaded in the browser.


• Right-click on the application and click "Inspect" or press F12 to open the console.


• Make sure your UI5 diagnostic window is opened/running.


• Now, click on the button from your application you want to know about.


• Once, you click on the button, the debugger will get triggered.


• Go to the Console tab.


• Clear Console.


• Type this.mEventRegistry in Console and press Enter.
  
  


• Click to expand it.


• Once you expand.


• You can see the function name and function location.


• In this case, the function name is "handleClick" and the function location is "View1.controller.js".
  
  

Conclusion:

In this blog post, we have seen that if we would like to know the namespace, project name, view name, UI element name, and SAPUI5 version of the SAPUI5-based application we can make use of the amazing plugin Fiori Doctor to save time and get the instant required details. Also, we have seen how to identify the function name and where the function is located upon clicking on the button.

Happy learning!

Thank you!

Syed Baba Tajuddin Hussaini