Building Tree Structure in WebDynpro Application and Calling Another WebDynpro Application on Clicking the Nodes

7/28/2019 Building Tree Structure in WebDynpro Application and Calling Another WebDynpro Application on Clicking the Nodes

http://slidepdf.com/reader/full/building-tree-structure-in-webdynpro-application-and-calling-another-webdynpro 1/15

Building Tree structure in WebDynpro application

and Calling another WebDynpro application on

clicking the nodes

By Twinkal Patel, YASH Technologies

Scenario:

Calling a Web Dynpro application from another Web Dynpro application. The links to other Web Dynpro applications are displayed in the form of TREE structure.

Steps :

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:

1. GROUP2. TRAY3. TREE4. TREE ITEM

5. IFRAME6. IMAGE

Insert Element GROUP in the view by right clicking. Here name of the group element isgiven 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 TREE! And create one tree item type as below.

Click here to continue....

16. Bind DATASOURCE property of TreeItemType with TREETYPE node.

http://www.saptechnical.com/Tutorials/WebDynproABAP/Tree/Page2.htm

http://www.saptechnical.com/Tutorials/WebDynproABAP/Tree/Page2.htm



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_nodeEXPORTINGname = 'NODE1'

RECEIVINGchild_node = lo_el_context.

* Traylv_text1 = 'http://:8000/sap/bc/webdynpro/sap/y_excel_upload?sap-language=EN'.lv_heading = 'SALES REPORT FOR UPLOADING DATA'.

* Set attributes for frame contentCALL METHOD lo_el_context->set_attributeEXPORTINGvalue = lv_text1name = 'TEXT1'.

* Set attributes for frame headingCALL METHOD lo_el_context->set_attributeEXPORTING

value = lv_headingname = 'HEADING'.

ENDMETHOD.

22. Now click on Methods tab in view and select onactionon_fi method and write a code as given below.Here codis 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_nodeEXPORTINGname = 'NODE1'

RECEIVINGchild_node = lo_el_context.

* Traylv_text1 = 'http://:8000/sap/bc/webdynpro/sap/y_error_message?sap-language=EN'.lv_heading = 'FINANCE REPORT'.

* Set attributes for frame contentCALL METHOD lo_el_context->set_attribute

EXPORTINGvalue = lv_text1name = 'TEXT1'.

* Set attributes for frame headingCALL METHOD lo_el_context->set_attributeEXPORTINGvalue = lv_headingname = 'HEADING'.

ENDMETHOD.

23. Right click on Application and select Create then Mime Object and then Import as shown as below.



Select an image from your desktop that you want to display as logo.

24. Now in view’s layout right click on ROOTUIELEMENTCONTAINER and insert an element image. Order shoulbe like below for image.

25.Set Property of image like below.

Width : 870 px.

Set its Source property by pressing F4. as below.



26.Create a web dynpro application by right clicking.

27. 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.



Note: Here you can use more than one IFRAME element in the same view for displaying various reports or WebDynPro application.

Documents

Building Tree Structure in WebDynpro Application and Calling Another WebDynpro Application on Clicking the Nodes