Skip to Content

How to use multi value selection in new Webdynpro ABAP Select options (WD_SELECT_OPTIONS_20):


New select options in WD ABAP has lot more features including this multi value selection, copy paste from file, new UI look and many more. This document describes how use that multiple value selection using new interface IF_WD_SELECT_OPTIONS_20.

Go to SE80 and create a Webdynpro component “YSELOP_MULTIVALUE”.

/wp-content/uploads/2015/02/1_643319.png

Add the new WD_SELECT_OPTIONS_20 as used component in component controller.

/wp-content/uploads/2015/02/2_643321.png

Go to main view and add a ViewContainerUIElement

/wp-content/uploads/2015/02/3_643322.png

In main window, add the select Option view “W_SELECT_OPTIONS” to the view container.

/wp-content/uploads/2015/02/4_643323.png

/wp-content/uploads/2015/02/5_643328.png

Create the used component in the Main view

/wp-content/uploads/2015/02/6_643329.png

/wp-content/uploads/2015/02/7_643330.png

Go to main view Attribute tab and add following attribute mentioned in below figure.

/wp-content/uploads/2015/02/8_643331.png

Create a method “SET_SELECTION” in the main view/wp-content/uploads/2015/02/9_643332.png

Add below lines of  code in the method “SET_SELECTION

method SET_SELECTION .
* Types Declaration
TYPES: BEGIN OF ty_key,
prog_name
TYPE zwdvariprog_name,
vari_name
TYPE zwdvarivari_name,
uname
TYPE zwdvariuname,
END OF ty_key,

BEGIN OF ty_matnr,
MATNR
type matnr,
END OF ty_matnr.

* Table Type Declaration
TYPES tt_matnr TYPE STANDARD TABLE OF ty_matnr.

* Data Declaration
DATA:   lo_cmp_usage TYPE REF TO if_wd_component_usage,
lo_interfacecontroller
TYPE REF TO iwci_wd_select_options_20 ,
lt_tab1
TYPE wdr_so_t_values,
ls_multi
type WDR_SO_S_MULTIVALUE,
ls_global
type WDR_SO_S_GLOBAL_OPTIONS,
lt_matnr
type tt_matnr,
ls_matnr
type ty_matnr,
lo_struc
type ref to cl_abap_structdescr,
lt_mara
type STANDARD TABLE OF mara,
lt_attributes
TYPE TABLE OF wdr_so_s_attributes,
ls_attributes
TYPE wdr_so_s_attributes.

lo_struc ?= cl_abap_structdescr=>describe_by_data( ls_matnr ).

lo_cmp_usage wd_this->wd_cpuse_selop( ).
IF lo_cmp_usage->has_active_component( ) IS INITIAL.
lo_cmp_usage
->create_component( ).
ENDIF.

lo_interfacecontroller =   wd_this->wd_cpifc_selop( ).
ls_global
NO_MULTI_PASTE = .

wd_this->lv_handler = lo_interfacecontroller->init_select_options(
global_options
ls_global                  ” wdr_so_s_global_options
).

*– Add Attributes to Selection Screen –*
ls_attributes
attribute  = ‘VBELN’.
ls_attributes
attr_type  = if_wd_select_options_20=>e_attribute_typesid.
ls_attributes
text       = ‘Sales Document’.
ls_attributes
dataelement = ‘VBELN_VA’.

APPEND ls_attributes TO lt_attributes.

clear ls_attributes.

ls_multiSTRUCTURE = lo_struc.
ls_multi
MAX_ROWS = 6.
ls_multi
DIRECT_EDITABLE = .

ls_attributesattribute  = ‘MATNR’.
ls_attributes
attr_type  = if_wd_select_options_20=>e_attribute_typesmulti_value.
ls_attributes
text       = ‘Material’.
ls_attributes
RTTI_TYPE = cl_abap_elemdescr=>GET_C( 18 ).
ls_attributes
MULTI_VALUE = ls_multi.

APPEND ls_attributes TO lt_attributes.

wd_this->lv_handler->add_attributes( EXPORTING attributes = lt_attributes ).

endmethod.

Call the SET_SELECTION method from WDDOINIT.

/wp-content/uploads/2015/02/10_643333.png

Next step, create new view and a new Window for multiple value selection popup.

/wp-content/uploads/2015/02/11_643334.png

/wp-content/uploads/2015/02/12_643335.png

Embed the view to the Window.

/wp-content/uploads/2015/02/14_643337.png

Create a node ND_MULTI in component controller and an attribute MATNR of type STRING_TABLE as shown below.  This node will hold multiple values on the popup entered by the user.

/wp-content/uploads/2015/02/15_643338.png

Map the new node to both Views.

/wp-content/uploads/2015/02/25_643351.png

On the popup view, create a textEdit UI element and bind that to the matnr attribute of the node.

/wp-content/uploads/2015/02/16_643339.png

/wp-content/uploads/2015/02/17_643340.png

Now, go to main View and create an event handler on_multi for event ON_EDIT_MULTI_VALUE of used component WD_SELECT_OPTIONS_20.

/wp-content/uploads/2015/02/18_643341.png

/wp-content/uploads/2015/02/19_643342.png

Copy below lines of code in the method ON_MULTI

method ON_MULTI .

DATA lo_window_manager TYPE REF TO if_wd_window_manager.
DATA lo_api_component  TYPE REF TO if_wd_component.
DATA lo_window         TYPE REF TO if_wd_window.
DATA lt_buttons        TYPE wdr_popup_button_list.
DATA ls_canc_action    TYPE wdr_popup_button_action.
DATA: l_api   TYPE REF TO if_wd_view_controller.
DATA: ls_button TYPE wdr_popup_button_definition.
DATA: ls_action TYPE wdr_popup_button_action.

wd_this->m_attribute = attribute.
wd_this
->m_index     = row_index.
wd_this
->m_value     = value.

l_api = wd_this->wd_get_api( ).

lo_api_component           = wd_comp_controller->wd_get_api( ).
lo_window_manager         
= lo_api_component->get_window_manager( ).

lt_buttons                 = lo_window_manager->get_buttons_ok(
default_button         
= if_wd_window=>co_button_ok
).

ls_actionaction_name = ‘CLOSE’.
ls_button
button = 6.
ls_button
action = ls_action.
ls_button
is_enabled = ‘X’.

APPEND ls_button TO lt_buttons.
lo_window                 
= lo_window_manager->create_and_open_popup(
window_name         
= ‘W_MULTIVALUE’
title                = ‘Set Multiple Values’
message_type        
= if_wd_window=>co_msg_type_none
message_display_mode
= if_wd_window=>co_msg_display_mode_selected
buttons             
= lt_buttons
cancel_action       
= ls_canc_action
).

wd_this->l_window = lo_window.
lo_window
->subscribe_to_button_event(
button           
= 4
button_text      
= ‘Ok’
tooltip          
= ‘Click yes to Exit’
action_name      
= ‘OK’
action_view      
= l_api
).

lo_window->subscribe_to_button_event(
button           
= 6
button_text      
= ‘Close’
tooltip          
= ‘Click to Cancel’
action_name      
= ‘CLOSE’
action_view      
= l_api
).

endmethod.

  In next step, create to action “OK” and “Close” in the Action tab of main View.

/wp-content/uploads/2015/02/21_643344.png

Write below lines of code in ONACTIONCLOSE and ONACTIONOK methods.

method ONACTIONCLOSE .
wd_this
->L_WINDOW->close( ).
endmethod.

method ONACTIONOK .

DATA: lo_nd_nd_multi TYPE REF TO if_wd_context_node,
lo_el_nd_multi
TYPE REF TO if_wd_context_element,
ls_nd_multi
TYPE wd_this->Element_nd_multi,
lt_matnr
TYPE wd_this->Element_nd_multimatnr,
ls_matnr
type string,
l_attrbute
TYPE wdr_so_attribute.

lo_nd_nd_multi = wd_context->get_child_node( name = wd_this->wdctx_nd_multi ).
* get element via lead selection
lo_el_nd_multi
= lo_nd_nd_multi->get_element( ).

* get single attribute – String table
lo_el_nd_multi
->get_attribute(
EXPORTING
name
`MATNR`
IMPORTING
value = lt_matnr ).    ” String Table

l_attrbute = wd_this->m_attribute.” Get the attribute name

CALL METHOD wd_this->lv_handler->set_input_per_row
EXPORTING
attribute               
= l_attrbute
row_index               
= wd_this->m_index
multi_value             
= wd_this->m_value
multi_value_string_table
= lt_matnr.

wd_this->L_WINDOW->close( ).

endmethod.

Now our component is ready. Create a WD Application and test it.

Test:

/wp-content/uploads/2015/02/22_643345.png

/wp-content/uploads/2015/02/23_643346.png

/wp-content/uploads/2015/02/24_643347.png

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply