Integration of BEX Query in Web Dynpro Application using BIApplicationFrame UI Element

[manigandan_d2]

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

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

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, VIEW and INTERFACE COMPONENTS will be created automatically.

Step 6: Double click on the MAIN_VIEW. 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 Query)

Step 8: Right click on the Query Node and click on create > Attribute

Step 9: Enter the details on the pop up as shown below. (Create QUERY_ID Attribute)

Step 10: Repeat the step 6 and 7 to create BIAPPLICATION node with cardinality -> 1..1

Step 11: Repeat the step 8 and 9 to Add/Create Attributes under BIAPPLICATION node as follows

                                  Attribute Name                                        Type

        1)     VISIBLE                                         Boolean

        2)     QUERY_NAME                               String

Step 12: Navigate to the LAYOUT tab on the Main view. Now create a Label to create it right click on the ROOTELEMENTCONTAINER and Select the Insert element.

Step 13: Enter ID as the Label Name and select LABEL from the list as shown below.

Step 14: Enter ID as the Label Name and select LABEL from the list as shown below.

Step 15: In the properties of the Label type Query Name in front of the TEXT property. This will appear as a caption on the Label.

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

Step 17: In the properties of the Dropdown, Assign the value from the context node, by clicking the selecting key as shown below.

Select Query ID from the context as shown below.

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

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

Step 20: Now create a BIAPPLICATIONFRAME. To create it right click on the ROOTELEMENTCONTAINER and add ID as the Application Name and select BIApplicationFrame from the list as shown below.

Step 21: In the properties of the BIAPPLICATIONFRAME type. Update as shown below.

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

Step 23: 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 ‘Click’ is now created and an EVENT HANDLER method will also be created automatically to handle this.

Step 24: Now save everything and right click on the Component (ZM_BEX_QUERY).

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

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

For coding, go to the Main View and click on METHODS, is the last tab? There you will find a method ONACTIONCLICK already created.

This is the event handler method of the action CLICK.

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

METHOD onactionclick.

  DATA lo_nd_query TYPE REF TO if_wd_context_node.
  DATA lo_el_query TYPE REF TO if_wd_context_element.
  DATA ls_query TYPE wd_this->element_query.
  DATA lv_query_id TYPE wd_this->element_query-query_id.

  lo_nd_query = wd_context->get_child_node( name = wd_this->wdctx_query ).
  lo_el_query = lo_nd_query->get_element( ).
  lo_el_query->get_attribute(
    EXPORTING
      name =  `QUERY_ID`
    IMPORTING
      value = lv_query_id ).

  DATA lo_nd_biapplication TYPE REF TO if_wd_context_node.
  DATA lo_el_biapplication TYPE REF TO if_wd_context_element.

  lo_nd_biapplication = wd_context->get_child_node( name = wd_this->wdctx_biapplication ).
  lo_el_biapplication = lo_nd_biapplication->get_element( ).
  lo_el_biapplication->set_attribute(
    name =  `VISIBLE`
    value = 'X' ).

  lo_el_biapplication->set_attribute(
    name =  `QUERY_NAME`
    value = lv_query_id ).

ENDMETHOD.

Double click the WDDOINIT to load the Query Drop down value. On the editor write the following code

METHOD wddoinit .
  TYPES: BEGIN OF t_query,
    compid  TYPE rszcompid,
    END OF t_query.

  DATA: lt_query TYPE STANDARD TABLE OF t_query,
        lt_query_h TYPE HASHED TABLE OF t_query WITH UNIQUE KEY compid,
        wa_query TYPE t_query.

  DATA : lt_value TYPE wdr_context_attr_value_list,
         wa_value LIKE LINE OF lt_value.

  DATA lo_nd_query TYPE REF TO if_wd_context_node.
  DATA lo_nd_query_info TYPE REF TO if_wd_context_node_info.

  FIELD-SYMBOLS: <fs_query> TYPE t_query.

  SELECT compid
    FROM rsrrepdir
    INTO TABLE lt_query
    WHERE objvers = 'A'.
  IF sy-subrc = 0.
    LOOP AT lt_query ASSIGNING <fs_query>.
      wa_value-text = <fs_query>-compid.
      wa_value-value = <fs_query>-compid.
      APPEND wa_value TO lt_value.
    ENDLOOP.

    SORT lt_value DESCENDING.
    INSERT INITIAL LINE INTO lt_value INDEX 1.

    lo_nd_query = wd_context->get_child_node( name = wd_this->wdctx_query ).
    lo_nd_query_info = lo_nd_query->get_node_info( ).
    lo_nd_query_info->set_attribute_value_set(
        EXPORTING
            name = `QUERY_ID`
            value_set = lt_value ).
  ENDIF.
ENDMETHOD.

Step 26: SAVE the application and activate the Component and Now run the application.