ABAP web dynpro Dropdown by index UI Element allows a field to display a drop down list of values

Below are the simple steps required to add a field to your abap web dynpro which displays a dropdown list of values to the user using the dropdown by index UI element..


Step 1- Create context to store dropdown values Within your web dynpro application
You need to create a context node to store the dropdown values, this will generally involve using a structure which contains a code and a text value i.e. you will display the text value to the user but reteive the code value for internal processing! For this example I will use fields CARRID and CARRNAME from structure SCARR to create the dropdown list.

First double click on the COMPONENTCONTROLLER(with inleft hand tree structure) and select the 'Context' tab. Now add a new node to the context node (right click the context and select Create->Node). Give the new node a name and enter which table structure you want to base it on (i.e. SCARR). Also rememeber to set the cardinality to 0:n (or 1:n) to denote a table. You will also need to click the 'Add Attribute from Structure' button and select the fields you want to use for your drop down table i.e. CARRID and CARRNAME.


Step 2 - Map context to VIEW
Within the Context tab of your view drag the context you have just created (DROPDOWN_CARRIERS) from the right hand window and drop it onto the context node in the left window, select yes from the popup window that asks you if you want to copy and map context.


Step 3 - Create dropdown UI Element
Within the layout tab of the view, right click on the ROOTUIELEMENTCONTAINER within the UI element hierarchy and select Insert Element, Now Select DropDownByIndex and give it a name. See here for more details on creating ABAP Web Dynpro UI element


Step 4 - 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 your created context which you want to be displayed in the drop down i.e. for the example it will be the CARRNAME field within context element DROPDOWN_CARRIERS. 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!


Step 5 - ABAP code to populate dropdown list
Insert the following ABAP code into the appropriate place. For this example it will go into the WDDOINIT method

* create local data variable to access context information
  Data: context_node type ref to if_wd_context_node.
* create table based on context structure
  Data: it_carriers type STANDARD TABLE OF if_view1=>element_DROPDOWN_CARRIERS,
        wa_carriers like line of it_carriers.
  select *
    from scarr
    into table it_carriers.
  context_node = wd_context->get_child_node( name = 'DROPDOWN_CARRIERS').
  context_node->BIND_TABLE( it_carriers ).


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 Retrieve value selected by user in a dropdownbyindex field or Set dropdown byindex default value


Related Articles

Add programmed/OVS search help to FPM ESS/MSS application via enhancement to CL_HRESS_PER_DETAIL
BIND_STRUCTURE method of interface IF_WD_CONTEXT_NODE to assign structure to context
BIND_TABLE method of interface IF_WD_CONTEXT_NODE
Get the name of the button the user has clicked on within the SAP web dynpro action ABAP code
Create field Refering to datatype of webDynpro context element
WebDynpro context for creation of screen field including standard search help
Disable SAP User Personalisation in Web Dynpro app using WDDISABLEUSERPERSONALIZATION and WDENABLEUIELEMENTSHIDE
GET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to retrieve value of context element
GET_SELECTED_ELEMENTS to get selected row of ABAP web dynpro table when not using lead selection
GET_STATIC_ATTRIBUTE_TABLE method to return all rows of a context table node
IF_WD_CONTEXT_NODE interface methods withn ABAP Web Dynpro to enable users to view and change data
ABAP code to manually trigger ABAP web dynpro plug
Popuate SAP WebDynpro field
Freely Programmed search help for your web dynpro application (custom value help/OVS)
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
Change the stylesheet theme used by your web dynpro and portal apps (i.e. SAP_TRADESHOW, SAP_CORBU)
SET_ATTRIBUTE method of interface IF_WD_CONTEXT_NODE to assign value to individuale context attribute
Clear context attribute using SET_ATTRIBUTE_NULL method of interface IF_WD_CONTEXT_NODE
Add Dropdown by index UI Element to table field within abap web dynpro
Add freely Programmed search help to a web dynpro application field
Retrieve SAP webDynpro field value entered by user
ABAP Web dynpro ALV report table
Hide fields of a web dynpro ALV table
Display web dynpro ALV report select options to resict output results
Assign value to ABAP web dynpro context via table, structure or individual attribute
Get selected ABAP Web dynpro dropdown byindex value (dropdownbyindex UI element)
ABAP web dynpro Dropdown default value, allow you to set current value of dropdown UI element
Change SAP web dynpro logon screen
Read ABAP Web dynpro table context on action / button click
ABAP Web Dynpro tables to allow users to view and change data
Get selected row of ABAP web dynpro table
Get all selected rows of table within your web dynpro for ABAP applications using GET_SELECTED_ELEMENTS
Get selected row of ABAP web dynpro table
ABAP Web Dynpro tree structure, display HR org structure as example
SAP ABAP Web Dynpro UI elements
View Container UI Element to display a web dynpro view within a wdp view
ALV ABAP Web Dynpro application
ABAP Web dynpro button click / Action
Call URL from SAP Webdynpro for ABAP ACTION
Call URL from SAP Webdynpro for ABAP ACTION
Display popup screen within ABAP Web dynpro
ABAP Web dynpro populate table on action / button click
ABAP code to Print abap web dynpro table
Adding URL parameters to you ABAP webdynpro to change thinks like the CSS