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.
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:
Select the control using the picker tool in the browser developer tools
Then go to the console and use:
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:
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.
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:
a) Use JQuery
Select the control using the picker tool in the browser developer tools
Then go to the console and use:
$($0).control(0)b) 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")
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.
- SAP Managed Tags:
