Skip to Content

Suppose I need to find out the implementation of button “Create” in Customer Engagement Initiative (CEI):

/wp-content/uploads/2014/07/clipboard1_509077.png

We could observe that once button is clicked, a pop up appears:

/wp-content/uploads/2014/07/clipboard2_509084.png

And I have to find out how is this implemented.

Step1 Launch the application via Chrome.

Click F12 to open Chrome developer tool, and click “Inspect Element” button, and put the mouse onto the Create button,

/wp-content/uploads/2014/07/clipboard3_509086.png

and click it. Then the html source code of this button is automatically located. However in “Event Listeners” in the right part, still I could not find information I want:

/wp-content/uploads/2014/07/clipboard4_509087.png

Step2 Go to tab “Sources”, enable Event Listener Breakpoints with type = Mouse.click.

/wp-content/uploads/2014/07/clipboard5_509088.png

Then switch application to debug mode by clicking “Pause” button:

/wp-content/uploads/2014/07/clipboard6_509089.png

Then click the Create button, and expand the “Call Stack” tab:

/wp-content/uploads/2014/07/clipboard7_509090.png

In callstack hierarchy you could see lots of framework stuff ( sap-ui-core.js ), and the highlighted entry below is just what I am looking for.

Double click on it, and the JavaScript code to open the popup window is automatically displayed. It is implemented in js view CUAN_INI_OW_WSI.view.js:228.

/wp-content/uploads/2014/07/clipboard8_509091.png

In CEI, you could also find the corresponding deployed js view in ABAP backend, using tcode SE80 to open the BSP application.

/wp-content/uploads/2014/07/clipboard9_509092.png

or we can also find CUAN_INI_OW_WSI.view.js manually in Sources tab:

/wp-content/uploads/2014/07/clipboard10_509093.png

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