Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Table with Drop down


In the previous post we have seen how to make a table as an input field.

Link: http://www.teamabap.com/2014/05/table-with-input-field.html

In that we made the table column as editable for user to input values. In this post we will how to set drop down to the table. The last field of the table which we created in the above mentioned example we had a status field which contains value open and close, now let us make it as a drop down field showing open and closed from which user chooses his option.

To know about drop down by index UI element refers to the post

Pre-requisites: Must have created the component in the above mentioned post table with input field.

I have copied the previously created component ZCSK_TABLE_INPUT into another component ZCSK_TABLE_DROP. To copy component right click on the main component and select copy and provide the name for the component. You can also proceed with the same component.

Step1: Go to the context tab of the view controller. In the context node observation which we created in the previous post (Table with input field) create a child node drop as shown below.

The purpose of this node is to contain the list of values for the drop down.


Enter the node name and choose the cardinality as 0..n.


Create an attribute for the node drop of type string to binded to the drop down UI element text property.


Enter the attribute name and provide the type.



Step 2: Go to the layout tab of the view controller. Right click on the table UI element and select create binding.



Change the cell editor of the status field from input field to drop down by index.


The text property of the UI element will now binded to status field of node observation.


Change the binding to the value attribute of the drop down node so that the column will display the list of values from the drop node.


Step 3: Go to the DOINIT method and populate the list of values for the drop down.

Using code wizard set the node drop as table operation.


Code will be generated as below.


Modify the code as below.


Save and activate the whole component and test the application.




About Arun


Post a Comment

Powered by Blogger.