Skip to Content

While debugging UI5 applications sometimes could be difficult to understand how the app files are organized. Because of that sometimes could be hard to find certain functions in the code.

In this blog I want to show a quick way to find the event handler function for a certain control event.

I will use the Approve Leave Request Fiori application, available in the Fiori trial everyone can find in https://www.sapfioritrial.com/

Be sure that you are in debug mode, to be sure that the code is not minified and it is easy to read. To activate the debug mode you can use the sap-ui-debug=true parameter in the URL. More about URL parameters in the UI5 Demokit.

 

  • STEP 1: Get the control

There are several ways to retrieve certain instance of a control in the UI. In this blog I will explain two ways to do so:

– Use the UI5 Diagnostics tools

Open the diagnostic tools using the CTRL+ALT+SHIFT+S key combination. Then expand the “Control Tree” panel.

Now we should find the instance of the control in the tree. We can search the control in the tree manually, but the quickest way to do it is using the CTRL+ALT+SHIFT+mouseClick combination, clicking the control that we want. The control will be highlighted in the UI and automatically selected in the tree.

In the tree appears the complete ID of the control (highlighted in yellow in the screenshot).

Now we can retrieve the control instance in the browser console using:

sap.ui.getCore().byId("__xmlview2--MAIN_LIST_ITEM-__clone0-__xmlview2--list-0")

 

– Use JQuery 

Select the control using the picker tool in the browser developer tools

Then go to the console and use:

$($0).control(0)​

 

  • STEP 2: get the mEventRegistry object and inspect the event you want

Once we have the instance of the control, we can dig into its properties using the console. We should search for the mEventRegistry object. Select the event we want and look deep into it expanding its properties until you reach the fFunction.

Inside fFunction there is a link pointing directly to the corresponding line in the controller where the event handler is defined. Clicking this link switch directly to the “Sources” tab so we can inspect the code.

 

Hope you like it.

 

Best regards,

Rafael L.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply