Skip to Content

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.

To report this post you need to login first.

7 Comments

You must be Logged on to comment or reply to a post.

  1. Mike Howles

    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!

    (0) 
  2. Ahmad Mansoor

    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

    (0) 
  3. Thorsten Franz

    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

    (0) 
    1. Manigandan D Post author

      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

      (0) 

Leave a Reply