Navigate between Views in Web Dynpro

Introduction

In our previous articles we have already seen how to create a view in Web Dynpro. In Web Dynpro we can create multiple views under a component. It is also important to embed that view in the window to make it visible. In this article we will explore how to navigate between Views in Web Dynpro. Before jumping directly to the navigation concept, we will start with the concept of plugs in Web Dynpro.

Navigate between Views in Web Dynpro

A Web Dynpro application needs following to navigate between two views within a window:

  1. Views: At least two views which will have the navigation concept implemented.
  2. Navigation Links: A Navigation link is the connection between the above views.
  3. Plugs: A plug is the port that exists at both the ends of the Navigation link.

The above concepts can be understood with the diagram shown below:

Navigating between Views in Web Dynpro

Plugs

A plug is a junction used for accessing or existing a view. Either you will access a view or exist a view; and for both case we have two different plugs. These are:

Inbound Plug

This is a plug which is used to enter a view. Every inbound plug must be linked to an outbound plug else it produces errors.

Outbound Plug

This is a plug which is used to exit a view. Every outbound plug must be linked to an inbound plug else it produces errors.

Navigation Link

A Navigation link is the connection between two views. It needs plugs to execute a navigation.

Step by step process to create a Navigation between views

Step 1: Go to SE80, create a web Dynpro component ZTest_PLUGS.

Step 2: Go to main view, insert a button, provide button text as ‘Press’, and create action method for button ON_PRESS.

Step 3: Right click on component -> create -> view, provide name as DETAILS_VIEW and enter.

Step 4: Go to “DETAILS_VIEW” view, insert a button, provide button text as ‘Back’, create action method for button ON_BACK.

Step 5: Go to main view, outbound plugs tab, add outbound plug as GOTO_DETAILS_VIEW and inbound plugs tab add inbound plug as IN_MAIN.

Step 6: Go to DETAILS_VIEW view, outbound plugs tab, add outbound plug as GOTO_MAIN and inbound plugs tab add inbound plug as IN_DETAILS.

Step 7: Expand window, drag and drop MAIN, “DETAILS_VIEW” view into window.

Step 8: Expand two views, right click on GOTO_ DETAILS_VIEW -> Create Navigation Link, press F4, select destination view as DETAILS_VIEW and enter.

Step 9: Right click on GOTO_MAIN -> Create Navigation Link, press F4, select destination view as MAIN and enter.

Step 10: Go to main view actions tab, double click on ON_PRESS method and add below code.

wd_this->FIRE_GOTO_ DETAILS_VIEW_PLG( );

Step 11: Go to DETAILS_VIEW view actions tab, double click on ON_BACK method and add below code.

wd_this->FIRE_GOTO_MAIN_PLG( );

Step 12: Save and Activate the components.

Step 13: Run and Test the components.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.