How to use Web Dynpro UI element – “Drop Down By Key” with Static and Dynamic Programming
The UI element Drop Down By Key provides the end user with a dropdown list from where he can choose only one entry. We create a WD Component named Y_UI_DROPDOWNBYKEY with a view named V_VIEW and a window.
We have many possibilities to populate with values the dropdown list.For example,we can use a Domain defined in the ABAP Dictionary, we can use the wdDoInit Hook method or a supply function method. For our example, we use Y_COUNTRY_DOMAIN, domain that holds all the names of EU member states.
The View layout is presented in fig
As we have mentioned above, most of the UI element properties can be bound. Hereunder, we present a table with some of the DropDownByKey properties that can be bound, and the attribute type in case the property is bindable (Table).
The property selectedKey is mandatory; this means we have to realise data binding at this attribute. The context structure is presented in Fig.
We have a context node with the cardinality 1. . .1 Singleton that has two attributes. The KEY attribute is of Y_DEFORDOMAIN type,defined in the ABAP Dictionary, and the RESULT attribute is of string type. We define a data binding between the KEY attribute and the selectedKey property of the DropDownByKey (Fig).
If the selectedKey property of the DropDownByKey UI Element is bound to this attribute,the values stored in the attribute KEY are displayed in the selection list.
We use the attribute RESULT to show, in the textView UI Element,the capital of the first two EU countries,from the dropdown list. After the user chooses a value,the Framework triggers the event handler method onactionselect_country (Listing).
the event handler method
DATA lr_node TYPE REF TO if_wd_context_node.
DATA ls_data TYPE wd_this-element_dropdownbykey.
DATA lv_value TYPE string.
lr_node = wd_context-get_child_node('DROPDOWNBYKEY').
lr_node-get_attribute(EXPORTING name ='KEY'IMPORTING value = lv_value).
RUNTIME CLASS: CL_WD_DROPDOWN_BY_KEY
Hereunder,we present a table showing the correspondence between the view designer name and the runtime name, with the proper types,in case of dynamic programming of a DropDownByKey UI element (Table).
The implementation of a dynamic DropDownByKey UI element contains the following statements (Listing ).
Dynamic creation of a Drop Down By Key UI element
DATA lr_dropdown_by_key TYPE REF TO cl_wd_dropdown_by_key.
DATA lv_bind_attribute TYPE string.
lv_bind_attribute = 'DROPDOWNBYKEY.KEY'.
lr_dropdown_by_key = cl_wd_dropdown_by_key=>new_dropdown_by_key(id ='DDK'
bind_selected_key = lv_bind_attribute text_direction = cl_wd_dropdown_by_key=e_text_direction-ltr on_select = 'SELECT_COUNTRY').