Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

Scenario: To create a WebDynpro Application that includes links of different reports and it will display it using TREE structure.After selecting a link that report will be open in the same window but in a frame.This type of application can be used for displaying various reports output in same window.

Note from Moderator: This WIKI example is NOT recommend. You should never use an iFrame for embedding inner Web Dynpro content. The content within an iFrame is a separate user session and the session management won't work properly within the iFrame. Also you can have rendering problems within the iFrame. You should just use Component Usages to embedd Web Dynpro Components in such a way. I will request that this wiki page be removed.

Procedure: 
1.      Go to transaction SE80.
2.       Select "WebDynpro Comp./Intf" from the list.
3.      Create a new WebDynpro component by the name ZTEMPLATE_APP.



4.     Double-click on the View. Select Context Tab.
5.      Create a NODE as shown below.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 6.      Create an attribute TEXT1 as shown below:
 

 7.  Create an attribute HEADING for the NODE1 node like below.  
 
 
 

 
 
 
 

 8. Double click on View. We would be designing the screen of our application with the following elements:
GROUP
TRAY
TREE
TREE ITEM
IFRAME 
Insert Element GROUP in the view by right clicking. Here name of the group element is given as BODY.
 
 
 
 
 
 
 
 
 
 
 
 
 

 
 


Set element BODY's Property as below:

Layout : MatrixLayout , height : 270px , width : 870px.
 9.  Right click on Group element and create one another element TRAY.






Set element Tray's Property as below:
Layout Data: MatrixHeadData , height : 500px , width : 90px.
 10. Right click on TRAY element and insert an element TREE as shown below.

11. Right click on TREE element and select insert node type.
 

12. Now select Tree Item Type

You can set its text property by double clicking on it.
 13. Bind DATASOURCE property of TREE with TREETYPE node.


 

Create an action on_sales for TreeItemType Sales.
14. Insert an Element TREE1 by right clicking on TRAY element.

15. Now right click on TREE1 And create one tree item type as below.

16. Bind DATASOURCE property of TreeItemType with TREETYPE node.



Create an action ON_FI for TreeItemType finance.

17. Now right click on BODY and create element TRAY2 of type tray.
Set element Tray2's Property as below:
Layout Data: MatrixData , height : 413px , width : 90px.
 18. By right clicking on TRAY2 create element frame of type IFRAME.

Set element frame's Property as below:

height : 500px , width : 700px.
 
19.Bind FRAME's SOURCE property with TEXT1 as below.
20. Bind Tray's caption's text property with heading attribute.


 21. Now click on Methods tab in the view and select onactionon_sales method and write a code as given below.
Note: Here value of lv_text1 is the link of another web dynpro application.

METHOD onactionon_sales .
 DATA: lo_el_context TYPE REF TO if_wd_context_node,
        r_element TYPE REF TO if_wd_context_element,
       lv_text1 TYPE string,
       lv_heading TYPE string.
 CLEAR: lv_text1,
        lv_heading.
 r_element = wd_context->get_element( ).
 CALL METHOD wd_context->get_child_node
   EXPORTING
     name      = 'NODE1'
   RECEIVING
     child_node = lo_el_context.

  • Tray
     lv_text1 = 'http://:8000/sap/bc/webdynpro/sap/yexcel_upload?sap-language=EN'.
     lv_heading = 'SALES REPORT FOR UPLOADING DATA'.
  • Set attributes for frame content
     CALL METHOD lo_el_context->set_attribute
       EXPORTING
         value = lv_text1
         name = 'TEXT1'.
  • Set attributes for frame heading
     CALL METHOD lo_el_context->set_attribute
       EXPORTING
         value = lv_heading
         name = 'HEADING'.
    ENDMETHOD.

22. Now click on Methods tab in view and select onactionon_fi method and write a code as given below.Here code is same as below code.just you need to change heading text and link for the report.
METHOD onactionon_fi .
 DATA: lo_el_context TYPE REF TO if_wd_context_node,
        r_element TYPE REF TO if_wd_context_element,
        lv_text1 TYPE string,
        lv_heading TYPE string.
 CLEAR: lv_text1,
        lv_heading.
 r_element = wd_context->get_element( ).
 CALL METHOD wd_context->get_child_node
   EXPORTING
     name      = 'NODE1'
   RECEIVING
     child_node = lo_el_context.

  • Tray
     lv_text1 = 'http://:8000/sap/bc/webdynpro/sap/yerror_message?sap-language=EN'.
     lv_heading = 'FINANCE REPORT'.
  • Set attributes for frame content
     CALL METHOD lo_el_context->set_attribute
       EXPORTING
         value = lv_text1
         name = 'TEXT1'.
  • Set attributes for frame heading
     CALL METHOD lo_el_context->set_attribute
       EXPORTING
         value = lv_heading
         name = 'HEADING'.
    ENDMETHOD.

23.Create a web dynpro application by right clicking.

24. Test Application by right clicking on above application.
OUTPUT:
Click on Sales Link From Left Tree
 

By clicking on Finance Link following will be displayed.