Selection SAP ABAP Web Dynpro

This category contains UI elements that have selection options. Hereunder,we present some of the UI Elements included in this category.

Drop Down By Key

This UI element 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

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.

Some of the DropDownByKey UI element properties

Some of the DropDownByKey UI element properties

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

Context structure

Context structure

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.

Data binding

Data binding

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.

the event handler method

Runtime

Runtime

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.

Dynamic programming

Dynamic programming

The implementation of a dynamic DropDownByKey UI element contains the following statements.

Dynamic creation of a Drop Down By Key UI element

Drop Down By Index

This UI element provides the end user with a dropdown list from where he can choose only one entry. This UI element doesn’t differ from the DropDownByKey when displayed on the screen, the implementation being the only difference. We create the same WD Component; in this case, we use a dropDownByIndex UI element instead of the dropDownByKey.In Fig. we show the context structure.In this case, we use a context node with the dictionary structure SHSVALSTR2, cardinality 0...n, Singleton.

Context structure

Context structure

View Layout

View Layout

Here under,we present a table with some of the DropDownByIndex properties that can be bound,and the attribute type in case the property is bindable.

Some of DropDownByIndex UI element properties

Some of DropDownByIndex UI element properties

As we can see,the texts property is mandatory. If this property of the drop- DownByIndex UI Element is bound to the VALUE attribute, the values stored in this attribute are displayed in the selection list. Listing shows how we can populate the dropdown list with values via a supply function method.

Supply function method

Runtime

Runtime

Dynamic Programming

RUNTIME CLASS: CL_WD_DROPDOWN_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 DropDownByIndex UI element.

Dynamic programming

Dynamic programming

The implementation of a dynamic DropDownByIndex UI element

Radio Button Group By Index

This UI Element 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.

Some of the RadioButtonGroupByIndex UI element properties

Some of the RadioButtonGroupByIndex UI element properties

View Layout

View Layout

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

Runtime

Runtime

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.

Dynamic programming

Dynamic programming

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

Dynamic creation of a RadioButtonGroupByIndex UI element


Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

SAP ABAP Web Dynpro Topics