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).
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.
Superb doc mani.. 🙂
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!
Helpful document mani
I developed this example identicaly but doesn't work. The query is not showed.
Any suggestion about what could be happening?
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.
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