Skip to Content

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

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

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

/wp-content/uploads/2013/05/1_217926.png

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.

/wp-content/uploads/2013/05/2_217931.png

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)

/wp-content/uploads/2013/05/3_217932.png

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)

/wp-content/uploads/2013/05/4_217933.png

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.

/wp-content/uploads/2013/05/5_217937.png

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

/wp-content/uploads/2013/05/6_217938.png

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. 

/wp-content/uploads/2013/05/7_217939.png

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

/wp-content/uploads/2013/05/8_217940.png

Select Query ID from the context as shown below.

/wp-content/uploads/2013/05/9_217941.png

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.

/wp-content/uploads/2013/05/10_217942.png

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.

/wp-content/uploads/2013/05/11_217943.png

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

/wp-content/uploads/2013/05/12_218015.png

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.

/wp-content/uploads/2013/05/13_217945.png

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.

/wp-content/uploads/2013/05/14_217946.png

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.

/wp-content/uploads/2013/05/15_217955.png

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.

/wp-content/uploads/2013/05/16_217956.png

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.

7 Comments
You must be Logged on to comment or reply to a post.
  • This was excellent.  I’ve struggled with switching from a similar BSP solution over to a Webdynpro implementation and this was a terrific example.  Thanks!

  • Superb Manigadan…. 🙂

    @ Rafael, just try only the items and coding given in this example by Manigadan. No other Interface, Attribute or Template. For correct Server name and Port call your Query in RSRT-Transaction and execute it in ‘Abap Web’ mode and you cann see the correct server name and port in the Browser address field.

    Severname.JPG

  • Hi Manigandan,

    Thanks for this excellent post. SAP Library says about BIApplicationFrame that it exposes BEx Web Applications. BEx Web Application Designer requires a Portal. My landscape is ABAP-only, so I don’t have a Portal, so I can’t use BEx Web Application Designer. Does that mean I cannot use the BIApplicationFrame – or has anyone gotten this to work in an ABAP-only landscape?

    Thanks and best,
    Thorsten

    • Hi Thorsten,

      Yes, you can use this UI in ABAP server, but it should integrate/added with BI server. For making BIApplicationframe with custom look and feel only we need WAD designer else we can use the standard template for that.

      Hope i answered your question 🙂

      Regards,

      Mani