Saturday, December 18, 2010

Building Tree structure in Web Dynpro application and Calling another Web Dynpro application on clicking the nodes

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. GROUP
  2. TRAY
  3. TREE
  4. TREE ITEM
  5. IFRAME
  6. IMAGE

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 TREE! 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/y_excel_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/y_error_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. 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 should be 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 Web

DynPro application.


2 comments:

Shilpi said...

Useless Application.
Most of the steps are missing.
My Serious suggestion is to test the application first (following each step ) before posting .

Ivan Diaz Salas said...

useless.
more elaborate please !!

Tutorials on SAP-ABAP

Adobe Interactive Forms Tutorials

Business Server Pages (BSP)

Userexits/BADIs

Web Dynpro for ABAP (Step by step procedure for web dynpro,Tutorials on Web Dynpro,)

ALV Tutorials

Blog Archive

goodsites