Navigation in WebDynpro - SAP Q&A...Navigation in WebDynpro . On pressing the ‘Back’ button, the...

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 1

Navigation in WebDynpro

Applies to: SAP ECC 6 and above

Summary Tw

his document will help in learning the navigation between various views of a WebDynpro component. This ill also explain how to navigate between different WebDynpro components using easy steps.

Author: Anand D. Kolte

Company: Infosys

Created on: 27 April 2009

Author Bio Anand Kolte is working with Infosys for the past 2.5 years in SAP ABAP technology. His main experience is in SAP with variety of work in ABAP. Mainly on Reports, FMs, Interfaces, BAPIs, SAP Scripts, performance analysis etc. As a part of small development he also learned WebDynpro.


Table of Contents Navigation between different Views .................................................................................... 3

Step 1: .............................................................................................................................. 3 Step 2: .............................................................................................................................. 3 Step 3: .............................................................................................................................. 4 Step 4: .............................................................................................................................. 4 Step 5: .............................................................................................................................. 5 Step 6: .............................................................................................................................. 6 Step 7: .............................................................................................................................. 6 Step 8: .............................................................................................................................. 7

Demo: .......................................................................................................................................................................... 8

Navigation between different WebDynpro components: .................................................... 10 Step 1: ............................................................................................................................ 10 Step 2: ............................................................................................................................ 10 Step 3: ............................................................................................................................ 10 Step 4: ............................................................................................................................ 11 Step 5: ............................................................................................................................ 15

Demo Time!! .............................................................................................................................................................. 15

Related Content ................................................................................................................ 16 Disclaimer and Liability Notice ........................................................................................... 17



Navigation between different Views Lets us create a simple WebDynpro application to study how to navigate between different views in WebDynpro.

Step 1: Go to transaction SE80 and create a web-dynpro component.

As you can see above, we have created a web-dynpro component with name ‘ZNAVIGATION1’ with two nodes NODE_SEARCH and NODE_DISPLAY and two views VIEW_MAIN and VIEW_DISPLAY.

VIEW_MAIN consists of user search parameters and VIEW_DISPLAY displays the search results in tabular format.

Step 2: We have created the search layout in VIEW_MAIN and display layout in VIEW_DISPLAY as follows:



Note that Airline code is mandatory.

Step 3: Create inbound plug IN_MAIN and outbound plug OUT_FROM_MAIN for view VIEW_MAIN as shown below:

Similarly, create inbound plug IN_DISPLAY and outbound plug OUT_FROM_DISPLAY for view VIEW_DISPLAY.

Step 4: Then go to window WIN_MAIN in window tab, right click on the window name and select embed view. A popup will appear as shown:



Give the display view in view to be embedded. So now we have both the views in window WIN_MAIN embedded. The main view will be embedded by default.

Step 5: Then link the outbound plug of view VIEW_MAIN to the inbound plug of VIEW_DISPLAY.

Right click on the OUT_FROM_MAIN plug of main view and select ‘Create navigation Link’. A popup will appear as shown below:

Give the destination view as VIEW_DISPLAY and inbound plug as IN_DISPLAY.

Do the same thing for plug OUT_FROM_DISPLAY but here give the destination view as VIEW_MAIN and inbound plug as IN_MAIN.



Step 6: If you want to pass some parameters from one view to another during navigation, you can do so by passing the parameters in outbound plugs. In our case we will be passing the three fields from main view.

W_CARRID, W_CONNID and W_FLDATE.

Step 7: Now in VIEW_MAIN we have a button called ‘Search Flights’. Create an action ‘FIND’ for this button and in the event handler method ONACTIONFIND of this action write the following code:

===================================================================

method ONACTIONFIND . DATA lo_nd_node_search TYPE REF TO if_wd_context_node. DATA lo_el_node_search TYPE REF TO if_wd_context_element. DATA ls_node_search TYPE wd_this->element_node_search. * navigate from to via lead selection lo_nd_node_search = wd_context->get_child_node( name = wd_this->wdctx_node_search ). * get element via lead selection lo_el_node_search = lo_nd_node_search->get_element( ). * get all declared attributes lo_el_node_search->get_static_attributes( IMPORTING static_attributes = ls_node_search ). * Fire outbound plug OUT_FROM_MAIN wd_this->fire_out_from_main_plg( w_carrid = ls_node_search-carrid " sflight-carrid w_connid = ls_node_search-connid " sflight-connid w_fldate = ls_node_search-fldate " sflight-fldate ). Endmethod.

==================================================================



Step 8: Now in the HANDLEIN_DISPLAY method of display view, add the same importing parameters.

Write the following code in this method:

==================================================================

METHOD handlein_display . TYPES : BEGIN OF ty_flights, carrid TYPE sflight-carrid, connid TYPE sflight-connid, fldate TYPE sflight-fldate, price TYPE sflight-price, currency TYPE sflight-currency, planetype TYPE sflight-planetype, seatsmax TYPE sflight-seatsmax, seatsocc TYPE sflight-seatsocc, paymentsum TYPE sflight-paymentsum, END OF ty_flights. DATA : lt_flights TYPE STANDARD TABLE OF ty_flights, ls_where(72) TYPE c, lt_where LIKE TABLE OF ls_where, l_nd_node_display TYPE REF TO if_wd_context_node. CONCATENATE 'CARRID = ''' w_carrid '''' INTO ls_where. APPEND ls_where TO lt_where. IF NOT w_connid EQ '0000'. CONCATENATE 'CONNID = ''' w_connid '''' INTO ls_where. CONCATENATE 'AND' ls_where into ls_where SEPARATED BY space. APPEND ls_where TO lt_where. ENDIF. IF NOT w_fldate IS INITIAL. CONCATENATE 'FLDATE = ''' w_fldate '''' INTO ls_where. concatenate 'AND' ls_where into ls_where SEPARATED BY space. APPEND ls_where TO lt_where. ENDIF. SELECT carrid connid fldate price currency planetype seatsmax seatsocc paymentsum



FROM sflight INTO TABLE lt_flights WHERE (lt_where). * navigate from to via lead selection l_nd_node_display = wd_context->get_child_node( name = wd_this->wdctx_node_display ). l_nd_node_display->bind_table( lt_flights ). ENDMETHOD.

==================================================================

Step 9:

After this, create an action BACK for back button in display view. In the event handler method ONACTIONBACK of this action write the following code:

==================================================================

method ONACTIONBACK .

wd_this->fire_out_from_display_plg(

).

endmethod.

==================================================================

Your WebDynpro application is ready to test now:

Demo: We have created an application for this component by name ZNAVIGATION_1.

Copy and paste the link in this application in your browser and you will see the first screen as shown below:

Enter the Airline code as ‘AA’ and flight conn. no. as 0064.

Hit the ‘Search Flights’ button.

The results will be displayed in tabular format in the Display View as follows:



On pressing the ‘Back’ button, the control will navigate to the main view.

This was all about navigation between two views of same WebDynpro component.

Now we will see how to navigate between two different web-dynpro components.

So for this demo we will first delete the VIEW_DISPLAY view from component ZNAVIGATION1.

Now create a new web-dynpro component with name ZNAVIGATION2. Give the default view name as VIEW_DISPLAY and default window name as WIN_MAIN2.

Design the layout of VIEW_DISPLAY in component ZNAVIGATION2 exactly similar to layout that was of the display view in component ZNAVIGATION1. We have created node NODE_DISPLAY for component ZNAVIGATION2 and mapped it to the display view.

Now we have two independent web-dynpro components:

ZNAVIGATION1 with view VIEW_MAIN ( Search layout )

ZNAVIGATION2 with view VIEW_DISPLAY ( Display layout )



Navigation between different WebDynpro components:

Step 1: Go to component ZNAVIGATION1 and add component ZNAVIGATION2 in used components.

Similarly, add component usage of ZNAVIGATION1 in the used components of ZNAVIGATION2.

Step 2: Create all the required inbound and outbound plugs as stated below:

In the main view of ZNAVIGATION1, create inbound plug named IN_VIEW_MAIN and outbound plug named as OUT_VIEW_MAIN.

In the window WIN_MAIN of ZNAVIGATION1, create standard inbound plug IN_WIN_MAIN1 and check the interface checkbox. Create standard outbound plug named OUT_WIN_MAIN1.

In the display view of ZNAVIGATION2, create inbound plug names as IN_VIEW_DISPLAY and outbound plug named as OUT_VIEW_DISPLAY.

In the window WIN_MAIN2 of ZNAVIGATION2, create a standard inbound plug IN_WIN_MAIN2 and check the interface checkbox. Create standard outbound plug named OUT_WIN_MAIN2.

Step 3: Embedding views of one component into the window of other component:

Go to window WIN_MAIN of ZNAVIGATION1. In the windows tab right click on the window name and select ‘Embed View’. A popup will appear. Put an F4 on the component field and select



ZNAVIGATION2.

We have just embedded a view from other component into this component’s window.

Do the same thing for component ZNAVIGATION2. When the popup appears, select the component as ZNAVIGATION1.

Step 4: Mapping the inbound and outbound plugs of both the components:

Link the outbound plug OUT_VIEW_MAIN of main view of ZNAVIGATION1 to inbound plug IN_WIN_MAIN2 of window WIN_MAIN2 of component ZNAVIGATION2.



Similarly, link the outbound plug OUT_VIEW_DISPLAY of display view of ZNAVIGATION2 to inbound plug IN_WIN_MAIN1 of window WIN_MAIN of component ZNAVIGATION1.

Then link the outbound plug OUT_WIN_MAIN1 of window WIN_MAIN of component ZNAVIGATION1 to the inbound plug IN_VIEW_MAIN of main view of same component.

The linkage of plugs in window WIN_MAIN of component ZNAVIGATION would look like:



Similarly, link the outbound plug OUT_WIN_MAIN2 of window WIN_MAIN2 of component ZNAVIGATION2 to the inbound plug IN_VIEW_DISPLAY of display view of the same component.

The linkage of plugs in window WIN_MAIN2 of component ZNAVIGATION2 would look like:



Note that we are passing parameters W_CARRID, W_CONNID and W_FLDATE from outbound plugs OUT_VIEW_MAIN of main view of component.

Also, adding these parameters to the event handler methods of corresponding inbound plug.

Now we are done with linking plugs. The only thing remaining is coding in the various methods.



Step 5: The method ONACTIONFIND in main view of component ZNAVIGATION1 will remain same except the name of outbound plug. It will now be OUT_VIEW_MAIN.

In the event handler method HANDLEIN_WIN_MAIN2 of window WIN_MAIN2 of component ZNAVIGATION2 paste the same code as given above in this document for method HANDLEIN_DISPLAY.

In the method ONACTIONBACK of display view of component ZNAVIGATION2 the code would be:

=================================================================

method ONACTIONBACK .

wd_this->fire_out_view_display_plg(

).

endmethod.

=================================================================

Demo Time!! Use the same procedure what we have used above for our testing. We will get exactly same results but in this case when we hit ‘Search Flights’ button, the control will go to the component ZNAVIGATION2 and will display results in the display view of this component.

On pressing ‘Back’ button on the display view, the control will again come back to the component ZNAVIGATION1 to the main screen.



Related Content http://help.sap.com/saphelp_nw2004s/helpdata/en/7c/3545415ea6f523e10000000a155106/frameset.htm

http://www.saptechnical.com/Tutorials/WebDynproABAP/views/navigation.htm

http://www.saptechies.com/sap-pdf-books-download/WDA_WD4AWDF4A11246429001.pdf


http://help.sap.com/saphelp_nw2004s/helpdata/en/7c/3545415ea6f523e10000000a155106/frameset.htmhttp://www.saptechnical.com/Tutorials/WebDynproABAP/views/navigation.htmhttp://www.saptechies.com/sap-pdf-books-download/WDA_WD4AWDF4A11246429001.pdf



Disclaimer and Liability Notice This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.

Applies to:SummaryAuthor BioTable of ContentsNavigation between different ViewsStep 1: Step 2: Step 3: Step 4:Step 5:Step 6:Step 7:Step 8:Demo:

Navigation between different WebDynpro components:Step 1:Step 2:Step 3:Step 4:Step 5:Demo Time!!

Related ContentDisclaimer and Liability Notice

Navigation in WebDynpro - SAP Q&A...Navigation in WebDynpro . On pressing the ‘Back’ button, the...

Documents

Transcript of Navigation in WebDynpro - SAP Q&A...Navigation in WebDynpro . On pressing the ‘Back’ button, the...