Using Select-Options in Web Dynpro for ABAP

Create a Web Dynpro Component called Z_SELECT_OPTIONS 

 

The usage of WDR_SELECT_OPTIONS component is defined in the Used Components tab as SELECT_OPTIONS. 

 

Now Create a View as MAIN_VIEW 

 

 

Create a Context node called FLIGHTS 

 

Click the button Add Attribute from Structure 

 

Click OK. 

 

Now Create a View Container UI Element as VIEW_CONTAINER 

 

 

Now create a Button called SEARCH and create an action to it. 

 

Now Create a Table called FLIGHTTABLE and the dataSource property of the Table view element is linked to the FLIGHTS context node. 

 

In the Properties tab of the view controller, under the Used Controllers/Components 

 

In the view controller, we need an attribute that holds the reference to the instance of the Select Options component. This is necessary because at runtime we access this reference to the search criteria that have been entered in the event-handler method. 

 

Now in the WDDOINT method of the view controller write this code. 

METHOD WDDOINIT .
  DATA: LT_RANGE_TABLE TYPE REF TO DATA,
        RT_RANGE_TABLE TYPE REF TO DATA,
        READ_ONLY TYPE ABAP_BOOL,
        TYPENAME TYPE STRING.

  DATA: LR_COMPONENTCONTROLLER TYPE REF TO IG_COMPONENTCONTROLLER,
        L_REF_CMP_USAGE TYPE REF TO IF_WD_COMPONENT_USAGE.

* create the used component
  L_REF_CMP_USAGE = WD_THIS->WD_CPUSE_SELECT_OPTIONS( ).
  IF L_REF_CMP_USAGE->HAS_ACTIVE_COMPONENT( ) IS INITIAL.
    L_REF_CMP_USAGE->CREATE_COMPONENT( ).
  ENDIF.
  WD_THIS->M_WD_SELECT_OPTIONS = WD_THIS->WD_CPIFC_SELECT_OPTIONS( ).
* init the select screen
  WD_THIS->M_HANDLER = WD_THIS->M_WD_SELECT_OPTIONS->INIT_SELECTION_SCREEN( ).

  WD_THIS->M_HANDLER->SET_GLOBAL_OPTIONS(
                              I_DISPLAY_BTN_CANCEL  = ABAP_FALSE
                              I_DISPLAY_BTN_CHECK   = ABAP_FALSE
                              I_DISPLAY_BTN_RESET   = ABAP_FALSE
                              I_DISPLAY_BTN_EXECUTE = ABAP_FALSE ).

* create a range table that consists of this new data element
  LT_RANGE_TABLE = WD_THIS->M_HANDLER->CREATE_RANGE_TABLE( I_TYPENAME = 'S_CARR_ID' ).
* add a new field to the selection
  WD_THIS->M_HANDLER->ADD_SELECTION_FIELD( I_ID = 'S_CARR_ID'
  IT_RESULT = LT_RANGE_TABLE I_READ_ONLY = READ_ONLY ).

ENDMETHOD. 

Now in the ONACTIONSEARCH method of the view controller write this code.

METHOD ONACTIONSEARCH .

  DATA: NODE_FLIGHTS TYPE REF TO IF_WD_CONTEXT_NODE.
  DATA: RT_CARRID TYPE REF TO DATA.
  DATA: ISFLIGHT TYPE TABLE OF SFLIGHT.
  DATA: WSFLIGHT TYPE SFLIGHT.
  FIELD-SYMBOLS: <FS_CARRID> TYPE TABLE.

* Retrieve the data from the select option
  RT_CARRID = WD_THIS->M_HANDLER->GET_RANGE_TABLE_OF_SEL_FIELD( I_ID = 'S_CARR_ID' ).

* Assign it to a field symbol
  ASSIGN RT_CARRID->* TO <FS_CARRID>.

  CLEAR ISFLIGHT. REFRESH ISFLIGHT.
  SELECT * INTO CORRESPONDING FIELDS OF TABLE ISFLIGHT FROM SFLIGHT
                       WHERE CARRID IN <FS_CARRID>.
  NODE_FLIGHTS = WD_CONTEXT->GET_CHILD_NODE( NAME = `FLIGHTS` ).
  NODE_FLIGHTS->BIND_ELEMENTS( ISFLIGHT ).
ENDMETHOD.

Now Drag and drop the MAIN_VIEW into the Window and create an Embed View in the VIEW_CONTAINER. 

 

 

 

Now your window should look like this. 

 

Now Create a Web Dynpro Application and save and activate all. 

Output: 

Calling an URL on click of a button (Web Dynpro for ABAP)

1. Create one Webdynpro Application ZWA_CALLING_URL, and Save it in the ‘Local Object’.

2. In the View, Right click the ROOTUIELEMENTCONTAINER and give Insert Element. It will open a Pop-Up for Creating an Element. 

 

3. Enter ‘BUTTON’ in the Name Field and Select ‘Button’ from the Dropdown for the Typ Field and   Press Enter. 

 

4. In the Text Field of the Button Properties, Give Click.  

5. In the OnAction of the Button Properties, Click Create Action Button. Give the Action Name as GENERATE_URL and Press Enter. 

 

6. In the Methods Tab of the View, Go to the Method ONACTIONGENERATE_URL , and Paste the Following Code.

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.

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

CALL METHOD lo_window_manager->CREATE_EXTERNAL_WINDOW
  EXPORTING
    URL            = 'http://www.google.co.in/'
    MODAL          = ABAP_FALSE
    HAS_MENUBAR    = ABAP_TRUE
    IS_RESIZABLE   = ABAP_TRUE
    HAS_SCROLLBARS = ABAP_TRUE
    HAS_STATUSBAR  = ABAP_TRUE
    HAS_TOOLBAR    = ABAP_TRUE
    HAS_LOCATION   = ABAP_TRUE
  RECEIVING
    WINDOW         = lo_window.

lo_window->open( ). 

7. Save and Activate the Application. 

 

8. Test the Application. 

9. After Clicking the Click Button, It will open the New Window with URL  ‘http://www.google.co.in/’. (as seen in the following screenshot) 

OVS help in the WebDynpro application (WebDynpro for ABAP)

In one of my Scenarios, I’ve to get the Job Id and Job Description from the Database Table for Creating a Position in the Organizational Structure. I have provided the Object Value Selector (OVS) which takes Job Id and Job Description with ‘*’ (For Exact Selection it is not necessary to Use ‘*’) as input and list out all the Job Id and Job Descriptions corresponding to that Selections. On selecting one of the Entries from the Output List, the corresponding Job Id and Job Description will get displayed in the Screen. 

Introduction About Object Value Selector 

Generic help like value help can only be used for the field to which it is binded i.e. its scope is limited to that structure to which it is binded. But there are scenarios where we need a search help that allow multiple input fields to be populated or take multiple fields for search criteria. In this case, OVS comes into picture. OVS provide us with the selection screen that can contain multiple input fields to which our selection criteria can be restricted and displaying results values that can be used to populate different input fields. 

OVS makes use of the PHASE MODEL. We have two components in picture: OVS component and Consumer component. At certain point of time, OVS Component requires some information from consumer component. For this, OVS component fires OVS event. 

The parameter PHASE_INDICATOR is used to indicate the type of information requested. An event handler method in the consumer component subscribes to the OVS event and collects the information requested. For handling back this information to the OVS component, it makes use of certain methods in the OVS component. The reference to the object OVS_CALLBACK_OBJECT containing these methods is provided by the OVS event. These methods include: SET_CONFIGURATION (), SET_INPUT_STRUCTURE (), SET_OUTPUT_TABLE (). 

Phase_Indicator has four phases: Phase 0,1,2,3.

For Detail about different phases, you can go through the link.

http://help.sap.com/saphelp_erp2005/helpdata/en/30/d7fa41c915da6fe10000000a1550b0/content.htm

Procedure:

1. Create one Webdynpro Component with name ZWA_OVS_JOB.

 

2. Press Enter. 

 

3. Declare the WDR_OVS Component in the used component list in your WD component as shown below. 

4. Now go to the View, in the Properties Tab click the Create Controller Usage Button. 

 

5. It will open a screen with Component Use Entries. There select the Component Use OVS with Interface Controller as shown below. Press Enter. 

 

6. It will display as follows in the View Properties.

 

7. Go to the Context Tab, Right Click the Context and select Create à Attribute. 

 

8. Give Attribute Name as JOB_ID with Type SHORT_D.  In the Input Help Mode Field, Select ‘Object Value Selector’ from the dropdown. Then press F4 in the Field OVS Component Usage.

 

9. It will open a Pop-up. Select OVS and press Enter. 

 

10. Press Enter. 

11. Create another Attribute with Name JOB_DESC and Type STEXT. 

 

12. In the Layout Tab of the View, Right click the ROOTUIELEMENTCONTAINER and give Insert Element. It will open a Pop-Up for Creating an Element. 

13. Enter LABEL_JOBID in the Name Field and Select Label in the Type Field and Press Enter. 

 

14. Create another UI Element with INPUT_JOBID in the Name Field and Select InputField in the Type Field and Press Enter. 

 

15. Create another UI Element with TEXT_JOBDESC in the Name Field and Select TextView in the Type Field and Press Enter. 

 

16. In the Label Properties, Select INPUT_JOBID from the Dropdown for the labelfor Field and Enter ‘Job Id in the Text Field. 

 

17. Create Context binding For the INPUT_JOBID by Clicking the Button in the Right Side of the value in the Properties. It will open a Popup with the Context Element. In that Select the Attribute JOB_ID and Press Enter. 

 

18. Then Create Context binding For the TEXT_JOBDESC by Clicking the Button in the Right Side of the text in the Properties. It will open a Popup with the Context Element. In that Select the Attribute JOB_DESC and Press Enter.

 

19. Declare one event handler method with Name ON_OVS in the Method tab of the view. Then Press F4 in the Column Event. 

 

20. Select the Event OVS as shown below and Press Enter. 

 

21. Double Click the Method ON_OVS and write the Following Coding. 

ON_OVS

method ON_OVS .

* declare data structures for the fields to be displayed and
* for the table columns of the selection list, if necessary
  types:
    begin of lty_stru_input,
*   add fields for the display of your search input here
      job_id   type string,
      job_desc type string,
    end of lty_stru_input.

  types:
    begin of lty_stru_list,
*   add fields for the selection list here
      short type short_d,
      stext type stext,
    end of lty_stru_list.

  data: ls_search_input  type lty_stru_input,
        lt_select_list   type standard table of lty_stru_list,
        ls_text          type wdr_name_value,
        lt_label_texts   type wdr_name_value_list,
        lt_column_texts  type wdr_name_value_list,
        lv_window_title  type string,
        lv_group_header  type string,
        lv_table_header  type string.

  field-symbols: <ls_query_params> type lty_stru_input,
                 <ls_selection>    type lty_stru_list.

  DATA : lv_short TYPE string,
         lv_stext TYPE string.

  case ovs_callback_object->phase_indicator.

    when if_wd_ovs=>co_phase_0.  "configuration phase, may be omitted
*   in this phase you have the possibility to define the texts,
*   if you do not want to use the defaults (DDIC-texts)

      ls_text-name = `JOB_ID`.  "must match a field name of search
      ls_text-value = `Job Abbr`.
      INSERT ls_text INTO TABLE lt_label_texts.

      ls_text-name = `JOB_DESC`.  "must match a field name of search
      ls_text-value = `Job Description`.
      INSERT ls_text INTO TABLE lt_label_texts.

      ls_text-name = `SHORT`.
      ls_text-value = `Job Abbr`.
      INSERT ls_text INTO TABLE lt_column_texts.

      ls_text-name = `STEXT`.
      ls_text-value = `Job Description`.
      INSERT ls_text INTO TABLE lt_column_texts.

      ovs_callback_object->set_configuration(
                label_texts  = lt_label_texts
                column_texts = lt_column_texts
                group_header = 'Job Abbreviation'
                col_count    = 2
                row_count    = 10 ).

    when if_wd_ovs=>co_phase_1.  "set search structure and defaults

*   In this phase you can set the structure and default values
*   of the search structure. If this phase is omitted, the search
*   fields will not be displayed, but the selection table is
*   displayed directly.
*   Read values of the original context (not necessary, but you
*   may set these as the defaults). A reference to the context
*   element is available in the callback object.

      ovs_callback_object->context_element->get_static_attributes(
          importing static_attributes = ls_search_input ).

*     pass the values to the OVS component
      ovs_callback_object->set_input_structure(
          input = ls_search_input ).

    when if_wd_ovs=>co_phase_2.
*   If phase 1 is implemented, use the field input for the
*   selection of the table.
*   If phase 1 is omitted, use values from your own context.

      if ovs_callback_object->query_parameters is not bound.
******** TODO exception handling
      endif.
      assign ovs_callback_object->query_parameters->*
                              to <ls_query_params>.

      if not <ls_query_params> is assigned.
******** TODO exception handling
      endif.

*     call business logic for a table of possible values
*     lt_select_list = ???

      lv_short = <ls_query_params>-job_id.
      lv_stext = <ls_query_params>-job_desc.

      REPLACE ALL OCCURRENCES OF '*' IN lv_short WITH '%' .
      REPLACE ALL OCCURRENCES OF '*' IN lv_stext WITH '%' .

      IF lv_short NE ' ' AND lv_stext NE ' '.

        SELECT short stext  FROM hrp1000 INTO TABLE lt_select_list
        WHERE plvar = '01' AND otype = 'C' AND langu = 'EN' AND
            endda GE sy-datum AND ( short LIKE lv_short AND
            stext LIKE lv_stext )
            ORDER BY short ASCENDING.

      ELSEIF lv_short EQ ' ' AND lv_stext NE ' '.

        SELECT short stext FROM hrp1000 INTO TABLE lt_select_list
        WHERE plvar = '01' AND otype = 'C' AND langu = 'EN' AND
            endda GE sy-datum AND stext LIKE lv_stext
            ORDER BY short ASCENDING.

      ELSEIF lv_short NE ' ' AND lv_stext EQ ' '.

        SELECT short stext FROM hrp1000 INTO TABLE lt_select_list
        WHERE plvar = '01' AND otype = 'C' AND langu = 'EN' AND
            endda GE sy-datum AND short LIKE lv_short
            ORDER BY short ASCENDING.

      ENDIF.

      ovs_callback_object->set_output_table( output = lt_select_list ).

    when if_wd_ovs=>co_phase_3.
*   apply result

      if ovs_callback_object->selection is not bound.
******** TODO exception handling
      endif.

      assign ovs_callback_object->selection->* to <ls_selection>.

      if <ls_selection> is assigned.
        ovs_callback_object->context_element->set_attribute(
                               name  = `JOB_ID`
                               value = <ls_selection>-short ).

        ovs_callback_object->context_element->set_attribute(
                               name  = `JOB_DESC`
                               value = <ls_selection>-stext ).

      endif.
  endcase.

endmethod.

22. Save the Application and Activate the Component. 

23. Create Webdynpro Application, save it and Test the Application.

Output:

1. Press F4 in the Field Job Id. It will open a Pop-up.

 

2. Enter the Value with ‘*’ and Click on Start Search Button. It will display all the possible Entries corresponding to that Selection. If you want Exact Selection then no need to give ‘*’.

 

3. On selecting one of the Job Abbr and Clicking the Ok Button, the Job Id and its Description will be displayed in the Screen as follows. 

The ALV application:

Create a web dynpro application with ALV component in it.

         

Step 1: Open transaction SE80 and from the drop down list select WebDynpro Component.

Step 2: Enter the application name (Here ZSAM_TEST).

Step 3: You will get a pop up as shown above. Click YES.

Step 4:  Enter the description on the next pop up as shown in the below screenshot.

Here the Window name can be changed. It is defaulted to the name of the application.

Step 5: A Web Dynpro component will then be created. A COMPONENT CONTROLLER, WINDOW and INTERFACE COMPONENTS will be created automatically.

Step 6: Double click on the Component controller. You will see an empty context.

Right click on the CONTEXT and click on create > node.

Step 7: Enter the details on the pop up as shown below. (Create NODE_VBAK)

Step 8: Click on ‘Add Attribute from structure’ button. A pop up will be displayed on the screen, which will show the fields of the table. (Here VBAK).

Now you have created a NODE called NODE_VBAK. This will be used for storing the values of the input fields. i.e. the inputs given by the user. 

Step 9: Again right click on the context and create another Node called NODE_ALV. This node will be used to store the records for displaying in the ALV output. 

Step 10: Again click on ‘Add attributes from structure’ and select the following fields.  

Step 11: Now save the component controller. Right click on the Component name (ZSAM_TEST) and click on create > View. Enter the following details on the pop up. 

Step 12: We have now created a view where we will be displaying the input fields and which will accept values from the user. Now the LAYOUT of the view will be displayed. Navigate to the CONTEXT tab. You will see the following screen  

This screen shows different nodes created in the component controller.  

Step 13: Drag NODE_VBAK from the right panel to the Context on the left panes. A confirmation message will follow, click yes on the pop up. Now the node NODE_VBAK is mapped with the INPUT_VIEW and can be used in it. The context will look as the screen shot above. 

Step 14: Navigate to the LAYOUT tab on the input view. Right click on the ROOTELEMENTCONTAINER and click on create container form.  

Step 15: A pop up will appear with a CONTEXT button, click on it and select NODE_VBAK.

Input fields will be created and corresponding labels will be taken from the DDIC. So the screen will look as follows.  

<  

Step 16: Now create a button. To create it right click on the ROOTELEMENTCONTAINER and add button as the button name and select BUTTON from the list as shown below. 

 

Step 17: In the properties of the button type FIND in front of the TEXT property. This will appear as a caption on the button. 

Step 18: You can play around with different elements and their properties here. After arranging the elements on the screen, the input view will look like this.

 

Step 19: In the properties on the button, there is a property called EVENTS. There will be a create button next to it. Click on the create button. The following pop up will be displayed.

Enter the corresponding details. An action called ‘ACTION_FIND’ is now created and an EVENT HANDLER method will also be created automatically to handle this.

Step 20: Now in the similar way create a view called ‘MAIN’. In this view create two elements of the type ViewContainerUIelement. As shown in the picture below. 

 

Step 21: Click on the ROOTELEMENTCONTAINER of the MAIN view and change the layout property to MATRIX LAYOUT.  

Step 22: Also click on each ViewConatinerUIElement and change the layout to MATRIX HEAD DATA. You will get the layout like this. 

Step 23: Navigate to the CONTEXT tab. And MAP both the nodes created in the component controller. (For mapping refer to Step 12). 

 

Step 24: Save MAIN view and double click on the Component name (ZSAM_TEST). 

Go to Properties tab of the component and declare the ALV component in it as shown below: 

Here ALV_TEST now stands for the ALV component that we are going to use in the application.  

Step 25: Now go to ‘Component usages’ in the left side tree and expand ALV_TEST and double click on the INTERFACECONTROLLER_USAGE.

 

Step 26: You will see the screen as in the given picture, click on the CONTROLLER USAGE Button.

Now the component controller will open in the right side panel as shown above. Drag and drop the NODE_ALV into the DATA node of the Interface Controller. This will declare a mapping. Meaning we have just declared which node is going to be displayed in the ALV.

Step 27: SAVE everything. Double click the link, WINDOWS > ZSAM_TEST. Drag and drop MAIN view onto the Window. Now click on the arrow next to MAIN, you will see the two View containers, Right click on container 1 (CONT1) and click on EMBED VIEW. Embed the Input View in the first container. Similarly right click on the second container and say Embed View. Press F4 on the ‘View To Be Embedded’ input box and enter the TABLE view of the ALV_TEST component. Refer to the screen shots below.

  

( After F4 )

Step 27: The Window will now look like this.

Step 28: Now save everything and right click on the Component (ZSAM_TEST).

Click the link Create > Application. Enter the following details.

 

Step 29: Now this is the most important step of all. CODING J

For coding, go to the Input View and click on METHODS, which is the last tab.

There you will find a method ONACTIONACTION_FIND already created. This is the event handler method of the action FIND.

  

Double click on the method name; on the editor write the following code:

METHOD onactionaction_find .

  DATA: node_node_vbak           TYPE REF TO if_wd_context_node,

    elem_node_vbak                      TYPE REF TO if_wd_context_element,

    stru_node_vbak                        TYPE if_input_view=>element_node_vbak .

* navigate from <CONTEXT> to <NODE_VBAK> via lead selection

  node_node_vbak = wd_context->get_child_node( name = if_input_view=>wdctx_node_vbak ).

* get element via lead selection

  elem_node_vbak = node_node_vbak->get_element(  ).

* get all declared attributes

  elem_node_vbak->get_static_attributes(

    IMPORTING

      static_attributes = stru_node_vbak ).

  DATA: ls_where(72) TYPE c,

        lt_where LIKE TABLE OF ls_where,

        lt_vbak TYPE STANDARD TABLE OF zstr_vbak.

* create where condition

  IF NOT stru_node_vbak-vbeln EQ ''.

    CONCATENATE 'VBELN = ''' stru_node_vbak-vbeln '''' INTO ls_where.

    APPEND ls_where TO lt_where.

  ENDIF.

  IF NOT stru_node_vbak-erdat EQ '00000000'.

    CONCATENATE 'ERDAT = ''' stru_node_vbak-erdat '''' INTO ls_where.

    IF stru_node_vbak-vbeln NE ''.

      CONCATENATE 'AND' ls_where INTO ls_where SEPARATED BY space.

    ENDIF.

    APPEND ls_where TO lt_where.

  ENDIF.

  SELECT VBELN ERDAT ERZET ERNAM ANGDT BNDDT AUDAT VBTYP TRVOG AUART

         AUGRU GWLDT SUBMI LIFSK FAKSK NETWR WAERK VKORG VTWEG SPART

         VKGRP VKBUR GSBER GSKST GUEBG GUEEN KNUMV

  FROM vbak INTO TABLE lt_vbak WHERE (lt_where).

  DATA:

    node_node_alv                       TYPE REF TO if_wd_context_node,

    stru_node_alv                       TYPE if_input_view=>element_node_alv .

* navigate from <CONTEXT> to <NODE_ALV> via lead selection

  node_node_alv = wd_context->get_child_node( name = if_input_view=>wdctx_node_alv ).

* get all declared attributes

  node_node_alv->bind_table( lt_vbak ).

ENDMETHOD

Step 30: SAVE the application and activate the Component. 

Now run the application. Here’s the output J