Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

Navigation between two views


Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. Several views can be embedded to an window but is necessary that we should only display one view in a window at a time. The view which is assigned as a default view will be displayed every time when the window is initialized. To move between the views embedded to the window we need to create a navigation link for which the inbound and outbound plugs are necessary.


To navigate from one view to another, each outbound plug from the first view must be linked with an inbound plug of the second view with the help of a navigation link.




Inbound Plug:

The inbound plug defines the start point of the view. It handles the incoming from the other view into its view. An event handler method will be created at the time of creation of inbound plug in which we can handle the incoming to the view. When the inbound plug of this view is called by the outbound plug of the another view this event handler method gets triggerd first.


Outbound Plug:

Outbound plug is used to call its subsequent views. Whenever a outbound plug is triggered it call the inbound plug of the other view to which the navigation link is created for.


In the previous example “Read the input and setting the output” we have seen how to read the data enter by the user and set it in the output. There we have read the input and set the output in the same view. Here in this scenario we will read the input entered by the user in the first screen and set the output in the second screen so that we will learn how to navigate between views.



Step 1: Go to the tcode SE80 and create a webdynpro component as shown below.




Assign the component to the package or save it in the local object.


Step 2: In the context tab of the component controller, create a node with an attribute in it.


Note: The nodes created in the component controller are public and is accessible throughout all the view.





Enter the name for the node and choose the cardinality as 1..1 and press enter.





Create an attribute for the node as shown below.





Enter the attribute name, choose a type and press enter.













Step 3 : Go to the Context tab of the view controller and drag and drop the node created in the component controller into context of the view controller so that the node can be accessible in our view.





After drag and dropping the context node the  view context will look like.








Step 4 : Go to the layout of the view controller and insert a label UI element as shown below.





Provide the ID and type of UI element.





In the property of the label UI element Provide the text for the label and leave the label for property as it is. We will fill it after creating a corresponding input UI element for it.





Step 5 : In a similar way insert a input field UI element.




Bind the obligatory property of the UI element value to the context attribute name.




Set the label for property of the label UI element to our Input field.





Step 6 : Insert a button UI element and create an event handler method for it.





Create an event handler for the  UI element.



In the outbound plug box if we provide the outbound plug the coding's to navigate to the view that the outbound plug points will be generated inside our event handler method. As of now we haven’t created any outbound plug. We will call it later in the program using code wizard.



Step 7 :


Create a another view in the component as shown below.





Enter the name for the view and press enter.




Step 8: In the context tab of the second view  drag and drop the node of the component controller to the context of our view.






In the layout tab of the second view, insert a label and a text view UI element and bind it to the attribute name.





Properties of the label.




Lets assign the label for property to the text view after creating the text view.


Insert the text view UI element.




Bind the text property of the text view to the attribute name.




Assign the label for property to the text view.







So far we have created two views with an option to enter a name in the first view and display it in the second view. The data will be transferred from one view to another using the node of the component controller. Once we read the input entered by the user and set it in the node, the result will be displayed where ever it is binded. So when we read the name and set it in the attribute name it will be displayed wherever our attribute name is binded.


Note : Read Binding concept for more clarity on this.


Now the point is we have to navigate from one screen to another. By default the view which we created at the timeof creation of the component will be the default view in the window and it will be displayed now all we have to do is to shift the view within the windows.


Step 9:


Create the inbound plugs an outbound plug for the views.


Go to the inbound plug tab of the view v_main and create an inbound plug. By the time of creation of inbound plug, an associated event handler method will be created.

This method can be used if some initialization is to be done while  incoming to the view.




Similarly create an outbound plug to navigate from the first view to the second view.






Similarly create an inbound plug and outbound plug for the second view.




In outbound plug tab of the second view create an outbound plug.





Step 10:


Go to the Window controller and you will be able to see only the view v_main which was create at the time of creation of component will be there.




Now embedd the second view which we created in our window and create a navigation link between views.





Choose the view to be embedded as our second view from the popup.






You will now be able to see both the views under our window.





Right click on the outbound plug to create the navigation link.




Select create navigation link and choose the destination view using F4 help an press enter.




Now you will see the navigation link is formed between the views indicated by a chain symbol. Now when ever the outbound plug out_main is triggered the system will navigate from the first view to the second view. Similarly create the path from second view to the first view.





Create a navigation link from second view to the first view.




Choose the first view as  destination.




Now navigation link from the second view to the first view is created.






Step 11:


Now let us write the logic to read the input entered by the user and set it in the context node.


In the event handler method of the button UI element in the first view write the logic to read the input and set the context node.




The Input field is binded to the context attribute name so Reading the context node attribute will give the value entered by the user.


Using the code wizard read the context node attribute name.





Code will be generated as below.




Note : I have removed the unwanted and dead codes.


Now set the value to the same attribute name.




Code will be generated by the code wizard. after deleting already declared attributes and removing unwanted I have kept the remaining.




When click on the submit button we have to navigate from the first we to second view. So let us trigger the outbound plug of the first view to navigate to the second view.


In the code wizard general tab, choose the radio button start navigation and select the outbound plug using f4 help.




Codes will be generated as below.







Now the code in the event handler for the button will be.




Step 12: Inorder to navigate back from the second view to the first view create a button back in the second view.





Create an event handler method for the button UI element.





If you provide the outbound plug at the time of creation of event then the coding for the navigation will also be created inside that event handler method.






Step 13: Save and activate the whole component.





Step 14 : Create an application and test the component.











Enter the name and press submit.





About Arun


  1. Very Clear & Helpful. Thank You!

  2. Hi Sir,
    Your blog posts are very helpful. I kindly request you too add the post how to configure webdynpro to practice in IDES system.

  3. I just couldn't leave your website before telling you that I truly enjoyed the top quality info you present to your visitors? Will be back again frequently to check up on new posts. two way walkie talkie

  4. i am always looking for some free stuffs over the internet. there are also some companies which gives free samples. https://www.buyyoutubesubscribers.in/

  5. Very informative article. Really looking forward to read more. Really Cool.
    free instagram downloader


Powered by Blogger.