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
Link:
http://www.teamabap.com/2014/05/drop-down-by-index.html

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.

clip_image001

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

clip_image002

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

clip_image003

Enter the attribute name and provide the type.

clip_image004

clip_image005

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

clip_image006

clip_image007

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

clip_image008

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

clip_image009

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.

clip_image010

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.

clip_image011

Code will be generated as below.

clip_image012

Modify the code as below.

clip_image013clip_image014

Save and activate the whole component and test the application.

Output:

clip_image015

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.