sapdev logo background
sapdev logo sapdev logo
Comments

Add Dropdown by index UI Element to table field within abap web dynpro



I think the best way to learn this is to first be able to create a stand alone dropdown field and then show you the slight coding differences between this and adding a dropdownby index to a table field (cell). ALso this way you will be able to use the same principle for adding any UI element to a wdp table.

See here for how to create a basic dropdown UI element field

Also see how to retrieve selected dropdown value from dropdownbyindex UI element.

Once you are ok with creating a basic dropdown UI element it is fairly easy to incorparte this into a web dynpro for ABAP table.

Step 1 - Create basic wdp table

Step 2 - Create context to store dropdown values Within your web dynpro application table
Now you need to create a context node to store the dropdown values, but this needs to be within the context node of your table.


For this example I will use fields CARRID and CARRNAME from structure SCARR to create the dropdown list within the table context.


Choose the attributes to represent the id and the text values



The finished context should now look like this


Step 3 - Update context mapping within VIEW
Within the Context tab of your view update the context node you have just modified (CARRIERS) right click and select 'Update Mapping'. Alternatively if this is a new context drag it from the right hand window and drop it onto the context node in the left window,


Step 4 - Update table field
Within the layout tab of the view, field the table field you want to replace with with a dropdown and remove the UI element associated with it


Now insert new dropdownbyindex UI cell element



Step 5 - Assign Dropdown Ui element to Context
Click on your UI element within the Layout tab, you will now see all the properties for this element which can be changed. You now need to assign the field within the context which you want to be displayed in the drop down i.e. it will be the CARRNAME field within context element DROPDOWN_CARR. To do this simply click on the button at the end of the 'texts' property (the one with a yellow square and circle on it) and select the correct context field.



Step 6 - ABAP code to populate dropdown list and set correct initial value
Insert the following ABAP code into the appropriate place. For this example it will go within the WDDOMODIFYVIEW method of the view.

  Data: it_scarr type standard table of scarr,
        wa_scarr like line of it_scarr,
        context_node type ref to if_wd_context_node.

  Data: it_ddcarr type STANDARD TABLE OF if_main=>element_DROPDOWN_CARR,
        wa_ddcarr like line of it_ddcarr,
        lr_element TYPE REF TO if_wd_context_element,
        ld_tabix type sy-tabix,
        ld_index type sy-index,
        it_carriers type STANDARD TABLE OF if_main=>element_CARRIERS,
        wa_carriers like line of it_ddcarr.

  select * from scarr into table it_scarr.
  sort it_scarr by carrid.

* select * from scarr into table it_scarr.
  context_node = wd_context->get_child_node( name = 'CARRIERS' ).

* Get all rows of table and values stored in each cell currently displayed to user
  context_node->get_static_attributes_table(
    importing
      table = it_carriers ).

  if sy-subrc eq 0.
    loop at it_carriers into wa_carriers.
      free lr_element.
      ld_tabix = ld_tabix + 1.

*     assign context_node to table context
      context_node = wd_context->get_child_node( name = 'CARRIERS').

*     assign lr_element to row of table
      lr_element = context_node->get_element( ld_tabix ).

*     assign data to dropdown of the row

      context_node = lr_element->get_child_node( name = 'DROPDOWN_CARR').
      context_node->BIND_TABLE( it_scarr ).

*     Set correct initial value
      read table it_scarr into wa_scarr with key carrid = wa_carriers-carrid.
      ld_index = sy-tabix.
      context_node->set_lead_selection_index( index = ld_index ).

    endloop.
  endif.


Step 6 - Save, Activate and Run
Save and activate your abap web dynpro, now when you execute it you should see a drop down object similar to the following:


Next step would be to add code to capture the users selection from the dropdown list.
Basically you simply need to add an 'ACTION' to the dropdown, ensure you tick the 'Transfer UI Event Parameters' checkbox when creating a new action/event.



Add the following code to the ACTION Method
method ONACTIONSELCARR .
    Data: context_node type ref to if_wd_context_node.
  data: ld_index type i.
  data: ld_ddindex type i,
        lr_element TYPE REF TO if_wd_context_element,
        it_ddcarr type STANDARD TABLE OF if_main=>element_DROPDOWN_CARR,
        wa_ddcarr like line of it_ddcarr,
        it_carriers type STANDARD TABLE OF if_main=>element_CARRIERS,
        wa_carriers like line of it_ddcarr.

  ld_index = CONTEXT_ELEMENT->GET_INDEX( ).

  context_node = wd_context->get_child_node( name = 'CARRIERS' ).

* Get all rows of table and values stored in each cell currently displayed to user
  context_node->get_static_attributes_table(
    importing
      table = it_carriers ).

  READ TABLE it_carriers into wa_carriers index ld_index.

* point to specific row of table
 lr_element = context_node->get_element( ld_index ).

* assign context to dropdown of specific row
  context_node = lr_element->get_child_node( name = 'DROPDOWN_CARR').

* Get index of selected dropdown entry
  ld_ddindex =  context_node->GET_LEAD_SELECTION_INDEX( ).

* Get values for selected dropdown and stores them in wa_ddcarr
  context_node->GET_STATIC_ATTRIBUTES(
     exporting index = ld_ddindex
     importing STATIC_ATTRIBUTES = wa_ddcarr ).

     wa_carriers-carrid = wa_ddcarr-carrid.
     wa_carriers-carrname = wa_ddcarr-carrname.

*****Once you have got the selected values you can do what you want with it
*****but this example updates the carriers table being displayed
  MODIFY it_carriers from wa_carriers  index ld_index.

  context_node = wd_context->get_child_node( name = 'CARRIERS').
  context_node->BIND_TABLE( it_carriers ).

endmethod.


Application will now work as follows




comments powered by Disqus