SAP Tech Pro

SAP Technical Blog
Topprice Price Comparison

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

 

The UI Element Radio Button Group By Index includes some RadioButtons,allowing the user to select only one value. Similar to the DropDown lists,we have here RadioButtons grouped by key and by index. Indifferent of the type,they don’t differ when they are displayed on the screen,but only in the implementation part.

We create the same WD Component as for the DropDownByIndex UI element;in this case,we change the DropDownByIndex UI element withthe RadioButton- GroupByIndex.The view context has the same structure. We create a context node named RADIOBUTTONGROUP_I with the dictionary structure SHSVALSTR2, cardinality 0. . .n, Singleton.

Hereunder, we present a table with some of the RadioButtonGroupByIndex properties that can be bound, and the attribute type in case the property is bindable (Table).

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

View Layout

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

We define the same data binding between the VALUE attribute and the texts property of the RadioButtonGroupByIndex. If this property of the RadioButton- GroupByIndex UI Element is bound to the VALUE attribute, the values stored in this attribute are displayed in columns and rows.

To specify the number of columns in which the RadioButtonGroup elements are grouped, we can use the property colCount. In our case, we have set “2”.This property can be personalised by an administrator.Listing  shows how we can populate the RadioButtons with values via a supply function method (the same method as for the DropDownByIndex lists).

Supply function method


METHOD supply_radiobutton_i.

DATA:

ls_country TYPE wd_this-element_radiobuttongroup_i,

lt_country LIKE TABLE OF ls_country.

ls_country-value = 'Austria'.

ls_country-key = 'Vienna'.

APPEND ls_country TO lt_country.

ls_country-value = 'Belgium'.

ls_country-key = 'Brussels'.

APPEND ls_country TO lt_country.

node-bind_table( new_items = lt_country set_initial_elements = abap_true).

ENDMETHOD.

Runtime

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

For the RadioButtonGroupByKey UI element, we have the same concept as described for the DropDownByKey.

Dynamic Programming

RUNTIME CLASS: CL_WD_RADIOBUTTON_GROUP_BY_IDX

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 RadioButtonGroupByIndex UI element (Table ).

How to use Web Dynpro UI element – “Radio Button Group By Index” with Static and Dynamic Programming

The implementation of a dynamic RadioButtonGroupByIndex UI element contains the following statements (Listing ):

Dynamic creation of a RadioButtonGroupByIndex UI element


DATA lr_radiobutton_group_by_index TYPE REF TO 

cl_wd_radiobutton_group_by_idx. 

DATA lv_bind_attribute TYPE string. 

lv_bind_attribute ='RADIOBUTTONGROUP_I.VALUE'. 

lr_radiobutton_group_by_index = 

cl_wd_radiobutton_group_by_idx=>new_radiobutton_group_by_idx( 

id = 'RDB_INDEX' 

bind_texts = lv_bind_attribute 

col_count = 2 

on_select = 'SHOW’). 

Add comment

Before Buying, Compare Prices at Topprice.in

Topprice.in