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

ALV with Button

 

This tutorial explains how to introduce a column which contain a button UI element for each row and based upon the selected drop down value it submits the data in the database table.

 

The component developed for ALV with drop down is modified.

Go to the context tab of the component controller and add an attribute button of type string.

 

clip_image002

 

Go to the view controller and update the mapping. Alse delete the external mapping in the interface controller of the component usage and map it again.

 

Like in similar way we got the object reference of the status column, get the object reference of the button column.

 

clip_image004

 

 

Create a object for the button UI element and set it to the cell editor of the column like we did before.

 

CL_SALV_WD_UIE_BUTTON is the class for the button UI element and the constructor method of this class does not have any importing parameters.

 

clip_image006

 

Using the object reference for the button class set the lable and other property for the button using the methods of the class for button UI element.

 

clip_image008

 

Using the object reference for  the column set the cell editor of the column.

 

clip_image010

 

 

Save and activate the whole component and test the application.

 

clip_image012

 

Now when a button is being click a certain action has to be triggerd. We need an event handler method  associated with the button which is to be executed on the click of the button and we execute our logic.

 

Go to the methods tab of the view controller and create an event handler method as shown below.

 

clip_image014

 

Now register this event handler method to the event of the ALV because we have place the button in the alv table and when we click on the button it will be known only to the alv component.

 

From the F4 help choose the event for the button click in the ALV.

 

clip_image016

 

clip_image018

 

 

 

Now we have registered our method for the on_click event of the alv component. Whenever a button has been clicked in the screen it will now call our event handler method.

 

If you double click on the event handler method and go inside the method you will see two importing parameters for the method.

 

clip_image020

 

The importing parameter r_param is an object reference to the interface if_salv_wd_table_click and this interface consist of the required attributes.

 

clip_image022

 

The attribute of this interface provides various of information like the index where the button has been clicked in the column, attribute id and so on.

 

To get to know the row item from the the button ui element has been triggered we can make use of the index attribute.

 

Do the following to get the row item of the selected button.

 

Using code wizard read the node observation without table operation.

 

clip_image024

 

Code will be generated as below.

 

clip_image026

 

Note : I have removed the unwanted codes.

 

Pass the index to the get element method to get the element object reference for the row which has been selected.

 

clip_image028

 

Now by passing the index we got the element object reference for the selected index and by accessing the method get static attributes using the element object reference we got the row item for the selected index in the work area ls_observation.

 

Save and activate the whole application.Test the application, in debugger we will see the whether we are getting the selected row item.


clip_image030

 

I am selecting the drop down of the second row as open and clicking on submit button.

 

clip_image032

 

 

clip_image034

 

If you see the work area it will contains the values of the selected button row. The status field will not contains the direct text open or close it will get the value which we have provided at the time of binding like 01 for open. Passing that to the internal table containing the valueset will give us the exact datas. With these information we can further proceed and process our data and store it in the table.

 

 

 

Codings in the doint method for button.

 

* Get the object reference of the column button.

data : lo_button type ref to CL_SALV_WD_COLUMN .

CALL METHOD
LV_VALUE->IF_SALV_WD_COLUMN_SETTINGS~GET_COLUMN
 
EXPORTING

   
ID     = 'BUTTON'
  RECEIVING
   
VALUE  = lo_button.


* Create a object for the button


data : lo_but TYPE REF TO CL_SALV_WD_UIE_BUTTON.

create
object lo_but.

LO_BUT->SET_ENABLED( ABAP_TRUE ).
LO_BUT->SET_IMAGE_SOURCE(
'ICON_SUBMIT'
).
LO_BUT->SET_TEXT(
'SUBMIT'
).

* Setting the cell editor of the column as button.


 
CALL METHOD LO_BUTTON->SET_CELL_EDITOR
   
EXPORTING

     
VALUE  = LO_BUT.

 

 

 

Codings in the onsubmit method.

 

  DATA LO_ND_OBSERVATION TYPE REF TO IF_WD_CONTEXT_NODE.
 
DATA LO_EL_OBSERVATION TYPE REF TO
IF_WD_CONTEXT_ELEMENT.
 
DATA LS_OBSERVATION TYPE
WD_THIS->ELEMENT_OBSERVATION.

  LO_ND_OBSERVATION = WD_CONTEXT->GET_CHILD_NODE( NAME = WD_THIS->WDCTX_OBSERVATION ).

  LO_EL_OBSERVATION = LO_ND_OBSERVATION->GET_ELEMENT( R_PARAM->INDEX ).

  LO_EL_OBSERVATION->GET_STATIC_ATTRIBUTES(
   
IMPORTING

      STATIC_ATTRIBUTES = LS_OBSERVATION ).

 

 

 

 

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.