SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use Web Dynpro UI element – “Drop Down By Key” with Static and Dynamic Programming

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

How to use Web Dynpro UI element – “Drop Down By Key”

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).

How to use Web Dynpro UI element – “Drop Down By Key”

The property selectedKey is mandatory; this means we have to realise data binding at this attribute. The context structure is presented in Fig.

Context structure

How to use Web Dynpro UI element – “Drop Down By Key”

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).

Data binding

How to use Web Dynpro UI element – “Drop Down By Key”

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


METHOD onactionselect_country.

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).

CASE lv_value.
WHEN 'AT'.
ls_data-result ='Vienna'.
WHEN 'BE'.
ls_data-result ='Brussels'.
WHEN OTHERS.
ls_data-result ='Unknown'.
ENDCASE.

lr_node-set_static_attributes(ls_data).
ENDMETHOD.
 

Runtime

How to use Web Dynpro UI element – “Drop Down By Key”

Dynamic Programming

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).

How to use Web Dynpro UI element – “Drop Down By Key”

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'). 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in