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.

 

clip_image002

 

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.

 

clip_image004

 

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.

 

clip_image006

 

 

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

 

clip_image008

 

 

Create an attribute for the node as shown below.

 

clip_image010

 

 

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

 

clip_image012

 

 

 

 

 

 

clip_image014

 

 

 

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.

 

clip_image016

 

 

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

 

clip_image018

 

 

 

 

 

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

 

clip_image020

 

 

Provide the ID and type of UI element.

 

clip_image022

 

 

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.

 

clip_image024

 

 

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

 

clip_image026

 

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

 

clip_image028

 

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

 

clip_image030

 

  

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

 

clip_image032

 

 

Create an event handler for the  UI element.

clip_image034

 

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.

 

clip_image036

 

 

Enter the name for the view and press enter.

 

clip_image038

 

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.

 

clip_image040

 

 

 

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

 

clip_image042

 

 

Properties of the label.

 

clip_image044

 

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

 

Insert the text view UI element.

 

clip_image046

 


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

 

clip_image048

 

Assign the label for property to the text view.

 

clip_image050

 

 

 

 

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.

 

clip_image052

 

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

 

clip_image054

 

  

 

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

 

clip_image056

 

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

 

clip_image058

 

 

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.

 

clip_image060

 

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

 

clip_image062

 

 

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

 

clip_image064

 

clip_image066

 

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

 

clip_image068

 

 

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

clip_image070

 

 

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

 

clip_image072

 

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.

 

clip_image074

 

 

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

 

clip_image076

 

Choose the first view as  destination.

clip_image078

 

 

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

 

clip_image080

 

 

 

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.

 

clip_image082

 

 

Code will be generated as below.

 

clip_image084

 

Note : I have removed the unwanted and dead codes.

 

Now set the value to the same attribute name.

 

clip_image086

 

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

 

clip_image088

 

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.

clip_image090

 

 

Codes will be generated as below.

 

clip_image092

 

 

 

 

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

 

clip_image094

 

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

 

clip_image096

 

 

Create an event handler method for the button UI element.

 

clip_image098

 

 

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.

 

clip_image100

 

 

 

Step 13: Save and activate the whole component.

 

clip_image102

 

 

Step 14 : Create an application and test the component.

 

clip_image104

 

 

 

Output:

 

clip_image106

 

 

Enter the name and press submit.

 

 

 

clip_image108

About Arun

5 Comments:

  1. 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.

    ReplyDelete

Powered by Blogger.