I have been working as a Fiori application developer in SAP for almost two years, which means now I use Chrome development tool in my daily work for trouble shooting instead of ABAP debugger when I was working using CRM WebUI.

Yesterday I was assigned with an incident about CRM Lead application in WebUI, and I am glad to figure out that Chrome development tool can also do me a great favor for my trouble shooting in WebUI issue. I share with my experience learned in this blog.

Issue description

The incident complains that when a given row in Products assignment block is selected and Delete button in toolbar is clicked, nothing occurs.

/wp-content/uploads/2016/06/clipboard1_976972.png

My issue analysis process

I located the event handler of this delete button in toolbar:

/wp-content/uploads/2016/06/clipboard2_977063.png

And I find out that get_marked in line 21 return an empty BOL entity collection.

/wp-content/uploads/2016/06/clipboard3_977064.png

I debugged into get_marked, this method will only return those BOL entities as marked whose SELECTED equals to true.

For Lead application, all the BOL entities which represent table entries in assignment block has SELECTED as false, as a result no BOL entity is returned – so nothing to be deleted.

/wp-content/uploads/2016/06/3_977065.jpeg

However I have checked Opportunity application, the deletion works. The attribute for BOL entity is set as abap_true as expected.

/wp-content/uploads/2016/06/clipboard1_976972.png

What is the reason of this different behavior?

Research how WebUI passes table selected row information to ABAP backend via Chrome development tool

In WebUI I selected first row in table and click delete button in toolbar, then I observe this selected information is passed to ABAP backend via field name as C34_W111_V113_V120_prodtable_selectedRows and value as 1.

/wp-content/uploads/2016/06/clipboard2_977063.png

And in ABAP backend, all these http form fields passed from frontend UI are received and stored in variable lt_fields in line 25.

/wp-content/uploads/2016/06/clipboard2_977063.png

I download the content of lt_fields as excel and highlight the field for selected row index:


/wp-content/uploads/2016/06/clipboard3_977064.png

Then in ABAP backend, it is expected to populate the string “C34_W111_V113_V120_prodtable_selectedRows” to get the index by field name. From the code below we get: “C34_W111_V113_V120_prodtable

/wp-content/uploads/2016/06/clipboard5_977072.png

The left string fragment “selectedRows” comes from constant gc_selected_rows. Now the selected row index is get by field name in line 14.

/wp-content/uploads/2016/06/clipboard6_977073.png

The original issue is: although we have table id “prodtable”,

/wp-content/uploads/2016/06/clipboard7_977074.png

however a wrong default id “Table” is passed in via iv_id and thus wrong field name is generated, so based on this wrong field name, no selected index could be queried:

/wp-content/uploads/2016/06/clipboard8_977076.png

The issue is already fixed via SAP note 2331513.

The naming convention of capital characters in lv_name:

  • C: component
  • W: window
  • V: view

You can also find such id in generated html source code via Chrome development tool in Element tab: first click the small icon highlighted below and then click the UI area you would like to inspect:

/wp-content/uploads/2016/06/clipboard9_977077.png


Then in Elements tab, the html source code of the selected UI area will be displayed for you:

/wp-content/uploads/2016/06/clipboard10_977081.png

Further reading

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