SAP WebClient UI是如何维护表格选中状态的

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.

 

 

My issue analysis process

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

 

 

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

 

 

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.

 

 

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

 

 

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 asC34_W111_V113_V120_prodtable_selectedRows and value as 1.

 

 

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

 

 

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

 

 

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“

 

 

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

 

 

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

 

 

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:

 

 

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:

 

 

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

 

 

Further reading

• Chrome Development Tool tips used in my daily work
• My UI5 debugging tips and experience collection – how to resolve UI5 issues through debugging by yourself

要获取更多Jerry的原创文章，请关注公众号"汪子熙":