select options and alv table

Prepared by: Sankar Gelivi Profession: SAP-ABAP Web Dynpro Mail Id:[email protected]

Component Usages: ALV TABLE and SELECT-OPTIONS:

Purpose: Importance of component Usages i.e., reusability.

Summary: This document explains, how to create or call existing components into web Dynpro component using component usages.

Requirement: Create a component with a view and a window, on action of a button; retrieve data from DB table based on select-options (input entered) into ALV table.

1. Go to TCode: SE80.2. Select the Webdynpro application from the Drop down list as shown below.

Enter the name of the Webdynpro Application and click the Specs button after it to create a New Webdypro Application


3. Click on button ‘YES’

4. Select the Webdynpro Component Radio button and provide the Description to create an application. Create a component with view and window as shown below. By default program name will be assigned as name of the window, if required we can change the name of the window.


5. Enter name of the components under Component column as shown below and under the Component Use enter the default name to identify the Component Used.

6. Go to the View Controller and click on Create Controller Usage (Icon of Create) as shown below


7. Select SALV_WD_TABLE and press enter

8. Select WDR_SELECT_OPTIONS and press enter


9. Finally you see in the below screen the Components Used under the Component Usages.

10. Go the Component controllerContext and create a node ‘ALVTABLE’ with Attributes as shown below


11. Go to the View controller Context, drag and drop the Node from Component Controller context

12. Go to the View controller Attributes tab and enter the attributes M_WD_SEL_OPTIONS and M_HANDLER under Attributes column and their types as shown below


13. Go to View Layout and design the screen with two View Container UI element and a button 14. Right click on ROOTUIELEMENTCONTAINERInsert Element

15. Enter ID: Description to UI element and Typ : Select UI element from the Pick list


16. Observe in the below screen ViewContainer is created under ROOTUIELEMENTCONTAINER

17. Right click on ROOTUIELEMENTCONTAINERInsert Element and Enter ID: Description to UI element and Typ : Select UI element from the Pick list


18. Observe in the below screen ViewContainer for Select Options is created under ROOTUIELEMENTCONTAINER

19. Repeat the same process to create Button


20. Observe in the below screen, View is designed with two view containers and a button

Implement the following code in WDDOINIT Method.

METHOD wddoinit .

DATA lo_cmp_usage TYPE REF TO if_wd_component_usage. lo_cmp_usage = wd_this->wd_cpuse_sel_option( ). IF lo_cmp_usage->has_active_component( ) IS INITIAL. lo_cmp_usage->create_component( ). ENDIF.

wd_this->m_wd_sel_option = wd_this->wd_cpifc_sel_option( ). wd_this->m_handler = wd_this->m_wd_sel_option->init_selection_screen( ).

DATA : it_range_table TYPE REF TO data, c_empno TYPE string VALUE 'YSG_EMPNO'.

it_range_table = wd_this->m_handler->create_range_table( i_typename = c_empno ).

CALL METHOD wd_this->m_handler->add_selection_field( EXPORTING i_id = c_empno it_result = it_range_table ).


CALL METHOD wd_this->m_handler->set_global_options EXPORTING i_display_btn_cancel = abap_false i_display_btn_check = abap_false i_display_btn_reset = abap_false i_display_btn_execute = abap_false.ENDMETHOD.

Implement the following code in OnactionSearch.

METHOD onactionsearch .

FIELD-SYMBOLS : <data> TYPE ANY TABLE.

DATA : lv_emp TYPE REF TO data, m_handler TYPE REF TO if_wd_select_options, it_emp TYPE STANDARD TABLE OF ysg_demo, lo_nd_tab TYPE REF TO if_wd_context_node, lo_el_tab TYPE REF TO if_wd_context_element.

CALL METHOD wd_this->m_handler->get_range_table_of_sel_field EXPORTING i_id = 'YSG_EMPNO' RECEIVING rt_range_table = lv_emp.

ASSIGN lv_emp->* TO <data>.

SELECT * FROM ysg_demo INTO TABLE it_emp WHERE empno IN <data>.

lo_nd_tab = wd_context->get_child_node( 'TABLE' ).

lo_nd_tab->bind_table( it_emp ).

ENDMETHOD.


21. Double click on the interface controller and create controller usage as shown below(Icon of create)

22. Select component YSG_SELECT_OPTIONS as shown below


23. Drag and drop ALVTABLE node on to DATA Node of Interface controller context

24. Go to Windows and right click on container and click on Embed View


25. Click on f4 help of View to be Embedded and select SALV_WD_TABLE /TABLE as shown below


26. Go to Windows and right click on container and click on Embed View

27. Click on f4 help of View to be Embedded and select WDR_SELECT_OPTIONS as shown below


28. Finally we can see the Containers and assigned component usages to the containers

29. Right click on the componentCreateWeb Dynpro Application


30. By default Application name will be your component name and enter the description

31. Observe in the below screen, an URL is generated with respect to your component. This is called as Fully Qualified Domain Name


32.Save and Active the Component and Test the Application

Output:

Result:

Documents

select options and alv table