Navigation between Views

Hello Guys..

Today's post about Navigation between views. Once you able to understand this post. Then I am sure that you able to create a navigation between views.

To enable the Navigation link between views. You have to use the INBOUND and OUTBOUND plugs. The screen to make you understand how Navigation link worked.

As you can see that each view has plugs IN and OUT. To navigate from one view to another, each OUTBOUND plug from the view 1 must be linked with an INBOUND plug of the view 2 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 you 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 triggered first.

OUTBOUND Plug:
OUTBOUND plug is used to call its subsequent views. Whenever a OUTBOUND plug is trigger it call the INBOUND plug of the other view to which the navigation link is created for.

So lets do it practically.

Objective: Create a component with two views in window and establish the link between views using plugs.

Step1. Go to Object Navigator using Tcode SE80 to create Webdynpro Component.

Step2. Create a Webdynpro Component, say ZWD_LINK (By default one window and one view will be
created)

Step3. Create one more View, Say VIEW2, Right click on View Controller and select Create

Provide the of View in View field and Description(optional) and press the enter key. And Save the component. Now in your component there is One Window( ZWD_LINK) and two views (MAIN & View2). As you can see in belows screen.

Step4.  Now go to MAIN View and click on Inbound Plugs Tab to create an Inbound Plug, Say IN1

To create an outbound plug, Click on Outbound Plugs Tab, say OUT1

Till Now we have created one inbound plug and one outbound plug in MAIN View.
In Similar manner, Create one Inbound plug(say IN2 ) and outbound plug (OUT2) in VIEW2 View.

Step5. Go to Window, ZWD_LINK and place the VIEW2 in window controller by drag and drop. Then your window structure will look like this

Step6. Now we have establish the link between these two views. We can do this simply this way
Select the IN1 of MAIN View and drag and drop on OUT2 of VIEW2. One pop up window will be open and press the enter key.

Similarly select the IN2 of VIEW2 and drag & drop on OUT1 of MAIN View.

Then your window structure will look like this.

Step7. Now go to MAIN View Layout and create an Button and provide the following properties of
                                 Text : Next
                                 OnAction Event: Next                    

Double click on onAction NEXT property of Button UI A pop up window will be open. And substitute the outbound plug name as OUT1 in outbound plug filed and press the enter key.

Now if you double click on NEXT onAction Events. Then you will see the below code. Its generate automatic when we substitute the outbound plug in above steps. 

Note: To trigger the outbound plug use the belwo syntax

                      

                   wd_this->fire__plg( ).

                 
Step8. Similarly, Go to VIEW2 Layout and place the Button UI Element and provide the below properties of Button
                                                  Text : Back
                                                  onAction Event: Back
And substitute the outbound plug as OUT2.

Step9. Now save you component and Activate the component.
Step10. Create an Application and run your application. So you below to see the output. Click on Next Button then it show the Button of View2.

So that's it. Hope you guys able to understand the simple topic but mostly used in component. 

Thanks & don't forget to comment.