Create Two views and Navigate – Hands on Web Dynpro


Create a new Web Dynpro Component called ZWD_##_SIMPLE_APPLICATION. Change the proposed window name to MAIN.

Locate the Component Controller node in the project structure that is located immediately under the component. Double click on Component Controller to open the Custom Controller editor.
Add a new node to the Custom Controller Context, having the name FlightInfo

On the popup enter sflight in the field Dictionary structure and press Add Attribute from structure.


Choose fields carrid and connid and press Continue.

Change property Input Help Mode of the attributes carrid and connid to automatic. This setting will provide both input fields on the Input_View (will be created next) with a F4 help for value selection.

Create a view called Input_View and navigate to the context tab. Use drag & drop to copy and map the node FlightInfo from the context of the Component Controller to the Context of the View Controller. The two attributes carrid and connid are automatically created.

Navigate to the view’s Layout tab. Change the property Layout of the ROOTUIELEMENTCONTAINER to MatrixLayout.

Create a group with the name Group_1. Change the Layout property to MatrixLayout and the LayoutData property to MatrixHeadData. Change the property Text of the element Caption_1 to Please fill in values!

Right mouse click on Group_1 and choose Container- Create container form from the context menu



Choose context node FlightInfo and press Confirm entry.

The two Labels and Inputfields for the context attributes carrid and connid have been created. Change the property LayoutData of Connid_Label_1 to MatrixHeadData.

Make a copy of view Input_View and name it Output_View. Adjust the Description on the properties tab to Output View.

Change the text of Caption_1 to Your input was….


Enable property readOnly for both input fields.


Navigate to the tab Inbound Plugs on the Output_View and create a Inbound Plug named to_output_view.

Navigate to the tab Outbound Plugs on the Intput_View and create a Outbound Plug named from_input_view.

Go to the Main window (on the window tab) and embed the two views Input_View and Output_View.

Set Input_View as default.

Expand the node of embedded view Input_View, right mouse click on the outbound plug and choose Create Navigation Link from the context menu. Choose Destination View
via F4 help and press Continue.

As a result a new node with a chain symbol appears under the outbound plug.

Create a button element named Go_Button under Group_1 of the view Input_View. Insert Go!
for property Text Create action Go for the button. Enter a description and choose outbound plug From_Input_View. Press Continue.


Right mouse click on the component node and select Create -> Web Dynpro Anwendung (Web Dynpro Application) from the context menu.

Create the application having the following attributes:

    Name: (accept default)

    Decription:    Simple Web Dynpro Application


Accept all default settings and press Save and run your application.


Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: