Select Options in Web Dynpro ABAP -- Part 1

[former_member222068]

Author : Sankar Gelivi

Date    : 05.02.2014

Summary :  This documents explains creation of select options and various methods that are available under the interface IF_WD_SELECT_OPTIONS.

                    This document tells how to create blocks, how to get the range table data etc.

List of methods available in the interface IF_WD_SELECT_OPTIONS:

1.  ADD_SELECTION_FIELD( )

2.  ADD_SELECTION_FIELDS( )

3.  ADD_HORIZONTAL_DIVIDER( )

4.  ADD_TEXT_LINE( )

5.  ADD_BLOCK( )

6.  ADD_PARAMETER_FIELD( )

7.  ADD_SELECTION_SCREEN_ITEMS( )

8.  CREATE_RANGE_TABLE( )

9.  GET_RANGE_TABLE_OF_SEL_FIELD( )

10.SET_GLOBAL_OPTIONS( )

11.RESET_ALL_SELECTION_FIELDS( )

12.GET_SELECTION_FIELDS( )

and so on.

Requirement : Creation of select options in Web Dynpro ABAP using list of methods of the interface IF_WD_SELECT_OPTIONS

Note: 1. SAP has provided a component 'WDR_SELECT_OPTIONS' for select options.

Procedure :

1. Define 'WDR_SELECT_OPTIONS' under used components tab of the using or current component.

just like the way we create an instance to the class, we are define component use  ( this will act like a instance ) to the component to the component.

2. Define two attributes in the attributes tab of the view.

Note: If you are define select options only in single view of a component then define two attributes in the view controller else define in component controller.

3. Define used controllers in the view controller.

4. Click on the CREATE icon and select the INTERFACE CONTROLLER of the WDR_SELECT_OPTIONS

5. Component and interface controller of WDR_SELECT_OPTIONS are defined under the view controller's - used controllers

6. Implement the logic in the view controller WDDOINIT( ). This method acts as an initialization.

First instantiate the used component. just like the way we instantiate the classes in ABAP.

click on the F4 of input field and select the component WDR_SELECT_OPTIONS.

7. Code gets auto generated.

8. Implement the following code

Note:

wd_this->WD_CPIFC_SELECT( ), is a interface component. This will return all the properties of the WDR_SELECT_OPTIONS component.

9. Define the method CREATE_RANGE_TABLE( ), to create range table for a field.

click on pattern and select call method

10. code gets auto generated. define the variables LV_MATNR AND LR_MATNR

11. Define the method ADD_SELECTION_SCREE( ), to add field to the selection screen

12. Design the view with the viewcontainer UI element. Viewcontainer UI element acts like a SUB SCREEN Area in Module pool

13. Assign View to window. To assign View of the select options, Right click on the VC --> Embed view.

14. click F4 on the View to be Embedded property and select WND_SELECTION_SCREEN view/Interface view

15. View is assigned to View Container

16. Create Web Dynpro Application and execute. Select options for Material is displayed.

Note: To make four buttons invisible, we have to use the method SET_GLOBAL_OPTIONS( ).

17. Active and re-execute the application.

Note: 4 standard buttons are now invisible.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

18. ADD_BLOCK( 😞 To create a block.

Result :

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

19 .  Create a node in the context.

20. Design the view with a Table and Button

21. GET_RANGE_TABLE_OF_SEL_FIELD( 😞 To read the data of select options.

22. Assign LR_MATNR data to a field symbol.

22. Logic to fetch the data based on the user inputs

23. Result:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

24. ADD_SELECTION_FIELDS( 😞 To add multiple fields to the selection screen

Result:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

25. GET_SELECTION_FIELDS( 😞 To read data of all the selection screen fields.

26. Logic to fetch the data for multiple fields

Active and execute the application

Note: As the size of the document is exceeding 1 MB, rest of the methods of will be published in a new document as SELECT OPTIONS -- Part 2