Navigation between different views is enabled by plugs. These can be divided into inbound and outbound plugs. Several views can be embedded to a window but it 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 the creation of an 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 another view this event handler method gets triggered first.

 

Outbound Plug:

Outbound plug is used to call its subsequent views. Whenever a outbound plug is triggered it calls 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 on 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 the 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.