1. 1
Data Binding, Context Mapping & Navigation
Exercise
Data Binding, Context Mapping & Navigation
Exercise
Chapter: Context at Design Time
Theme: Binding UI elements to the view context,
mapping view context nodes to the
component controller context and create
navigation between two views
At the end of this Exercise, you will be able to:
• Create a node and child attributes in a context
• Map a view context node to component controller’s context
• Bind UI elements to the view context
• Create navigation between two views
1 Development Objectives
This exercise has the following objectives:
- Make the data stored in the context of the component controller available to view
controllers.
- Create some UI elements on the view layout that can display the data in the
context of the view controller.
- Create navigation between two views.
The context of the component controller will act as the data source. Then using
context mapping, the data will be shared with two view controllers. Once the data is
available to the context of the view controller, UI elements can be added to the view
layout. These UI elements will then be bound to the context of the view controller. At
last the navigation from one view to the other one will be enabled.

2. 2
Data Binding, Context Mapping & Navigation
Exercise
2 Result
In this exercise, you will create a new
component with two views. You will add
two input fields and a push button on the
first view.
On the second view you will create only
display fields for displaying your input
from the first view.
You also will have to create the
navigation between these two views.
Template Solution:
Web Dynpro Component: WD_03S_SIMPLE_APPLICATION
Application: WD_03S_SIMPLE_APPLICATION
Group number: ## stands for the two-digit group number
3 Developing
3-1 Create Component
Create a new Web Dynpro Component called
ZWD_##_SIMPLE_APPLICATION. Change the proposed window name
to MAIN.
3-2 Build Context in the component controller
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.

3. 3
Data Binding, Context Mapping & Navigation
Exercise
- 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 automatisch. This setting will provide both input fields on the
Input_View (will be created next) with a F4 help for value selection.
3-3 Create Input_View
3-3-1 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.
3-3-2 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-Formular erzeugen
(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.
3-4 Create Output_View
3-4-1 Make a copy of view Input_View and name it Output_View. Adjust the
Description on the properties tab to Output View.
3-4-2 Change the text of Caption_1 to Your input was….
3-4-3 Enable property readOnly for both input fields.
3-5 Create Navigation from Input_View to Output_View
3-5-1 Navigate to the tab Inbound Plugs on the Output_View and create a
Inbound Plug named to_output_view.
3-5-2 Navigate to the tab Outbound Plugs on the Intput_View and create a
Outbound Plug named from_input_view.
3-5-3 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 OUTPUT_VIEW via F4 help and press
Continue.

4. 4
Data Binding, Context Mapping & Navigation
Exercise
As a result a new node with a chain symbol appears under the outbound
plug.
3-5-4 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.
3-6 Create Web Dynpro Application
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)
Description: Simple Web Dynpro Application
Accept all default settings and press Save and run your application.