How to debug the Fiori Back-End ABAP codes

Background:

Sometimes it may be helpful for us to find the root cause of the unexpected Fiori application behavior if we can debug the Fiori’s back-end ABAP code.

Before we start, there are some basic information we need to know:

The browser’s “Developer tools”: This is the tool we can use to debug the JavaScript code, get all the necessary information of the HTTP requests in the browser.

We can press F12 to open this tool in Firefox, Chrome or IE.

XMLHTTP request: When the browser is running some JavaScript codes, the JavaScript codes will trigger some XMLHTTP request to get or post some data from/to the server.

JavaScript code: In Fiori application, HTML codes, JavaScript codes are transferred from the front-end server to the browser.

Browser displays the Fiori application by the HTML codes, do the dynamic operations (such as display dynamic data) by the JavaScript codes.

Package name: We need the package name to get the data provider class when debug the ABAP method  (the t-code is SE80) in the back-end system.

Data Provider Class: This class (ABAP code) locates in the back-end system, and is used to provide the data. So if we find no data or incorrect data in the Fiori application, we can debug the data provider class in the back-end system.

I got very helpful information for writing this document from the following SCN link:

SAP Fiori LL11 – Consultants should know about OData troubleshooting

http://scn.sap.com/community/mobile/blog/2013/11/13/sap-fiori-ll11–consultants-should-know-about-odata-troubleshooting

Lessons Learned:

You will know how to debug the Fiori back-end ABAP code.

Example Issue Description:

Enter the Fiori application My Timesheet   version 2.

Click the rectangle of “Time Assignment->Receiver Order”, there is no data displayed in the popped up window.

Steps of debugging:

1. Before clicking the rectangle of “Time Assignment->Receiver Order”, press F12 to open the browser’s Developer  Tools.

2. Click the rectangle to pop up the “Receiver Order” window. This will trigger an XMLHTTP request for getting the data of “Receiver Order”.

We can get the information of this XMLHTTP request in the Network tab (sometimes there can be multiple lines in the Network tab, we only care about the OData URL which is beginning with  /sap/opu/odata/sap/):

3. Double click this line to get more details:

The OData service is: HCM_TIMESHEET_MAN_SRV, through the OData service name we can get the package name and the data provider class which will be needed to debug the ABAP code of getting data.

The  method of the data provide class invoked in the back-end system looks like: ValueHelpList

4. Go to “front-end system -> open t-code /n/IWFND/MAINT_SERVICE,  find the OData Service HCM_TIMESHEET_MAN_SRV:

Click “Service Implementation” to get the necessary information for debugging:

Package: ODATA_HCM_TSH_MAN

Data Provider: CL_HCM_TIMESHEET_MAN_DPC_EXT

The method looks like ValueHelpList (as we find in the URL above). Actually, the method should look like ValueHelpList_GET_ENTITYSET.

5. Debug the ABAP code in the back-end system (t-code: SE80) :

Now if we reproduce the issue in the browser (Click the rectangle of “Time Assignment->Receiver Order” as mentioned above), the breakpoint will be triggered( the program will stop at the breakpoint).

6. Finally we get the root cause.