This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.
Navigation in WebDynpro
Table of Contents Navigation between different Views .................................................................................... 3
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:
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 <CONTEXT> to <NODE_SEARCH> 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.
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 <CONTEXT> to <NODE_DISPLAY> 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.
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
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:
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:
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.
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.