Sales Orders Assignment Enterprise Application Development

First Web Dynpro Application

This simple application will introduce you to many of the basic elements of Web Dynpro
applications. The application consists of two views and allows the user to navigate back
and forth between the views. On the first view the user can enter his or her name and this
will be displayed on the second view.

Create the Project Structure

The first thing you have to do is create the project. Select File – New – Project which will
open the new project wizard. Select Web Dynpro in the left pane and then hit Next.

On the next screen enter <user id>_FirstApp for the Project name and leave the default
values in the other fields and hit Finish.

Ross Hightower Page 1 2/19/2025

Sales Orders Assignment Enterprise Application Development

The wizard will create the basic project structure which will appear in the Web Dynpro
Explorer window on the upper left view.

In the next step we’ll create an

application, component, window and
view. We could accomplish all of
this in multiple individual steps but
we’ll let the wizard do it for us.

Right-click on the Applications node

in the Web Dynpro Explorer and
select Create Application. When the wizard appears enter FirstApp for the Name and
edu.ucf.<user id>.firstapp for the Package. The package is the location of the files in
which the metadata describing your project is stored. You can find them under C:\
Documents and Settings\<username>\Documents\SAP\workspace\<user id>_FirstApp\
src\packages\edu\ucf\<user id>\firstapp. Select Next.

Ross Hightower Page 2 2/19/2025

Sales Orders Assignment Enterprise Application Development

On the next screen select Create a new component and hit Next. Enter the values as
shown in the figure below (except the package which should have your user id) and hit
Finish.

Ross Hightower Page 3 2/19/2025

Sales Orders Assignment Enterprise Application Development

After you hit finish the wizard will create the elements you described. You’ll also notice
that the Navigation Modeler and the Data Modeler are opened in the upper right pane.

Ross Hightower Page 4 2/19/2025

Sales Orders Assignment Enterprise Application Development

Creating a Second View

Our application has two views between which the user can navigate. The wizard created
the first view and embedded it in the window. The Navigation Modeler shown above
shows the view StartView embedded in the FirstAppWindow.

If the Navigation Modeler isn’t open you can open it by double-clicking the window
FirstAppWindow in the Web Dynpro Explorer or right-clicking the window name and
selecting Open Navigation Modeler from the Context menu. The next thing we need to

Ross Hightower Page 5 2/19/2025

Sales Orders Assignment Enterprise Application Development

do is add the second view. Click on the Embed a view icon ( ) in the Navigation
Modeler tool bar and click on the Navigation Model background. Select Embed a new
view on the wizard that appears and hit Next. Enter ResultView for the name on the next
screen and select Finish.

The screen below shows the Navigation Modeler after the views have been resized and
repositioned. Notice that StartView is dark blue. This indicates that the default property
for the view is set to true meaning it will be first view that is displayed when the
application is executed.

You can see the properties of the views by selecting the view and then selecting the
Properties tab at the bottom of the screen.

Creating Navigation Links

The next thing we need to do is create the navigation scheme between the views. The
steps include:

1. Create outbound plugs on both views.

Ross Hightower Page 6 2/19/2025

Sales Orders Assignment Enterprise Application Development

2. Create inbound plugs on both views

3. Connect the outbound to the inbound plugs.

Create outbound plugs

If it isn’t already open, open the Navigation Modeler. To create an outbound plug select
the outbound plug icon ( ) from the Navigation Modeler toolbar then click on the
view. Create an outbound plug on each of the views as follows:

Plug Name View

toResultView StartView
toStartView ResultView

Create inbound plugs

Creating inbound plugs follows a similar procedure except you use the inbound plug icon
( ). Create the following inbound plugs:

Plug Name View

fromResultView StartView
fromStartView ResultView

You can leave the default values for all the fields. Notice that the wizard will create an
Event Handler method called onPlug<plug name>. This method will be executed when

Ross Hightower Page 7 2/19/2025

Sales Orders Assignment Enterprise Application Development

navigation occurs via the plug. You can add code here you want to execute before the
view is rendered on the screen.

Create navigation links

To create the navigation links use the Create a navigation link icon ( ) in the
Navigation Modeler toolbar. Click on an outbound plug in one view and then drag and
release on the inbound plug of another view.

This is what it should look like after creating both navigation links.

Creating Actions and Implementing Navigation

Actions are used to allow the application to respond to user input. In this step we will:
1. Create an action that will be bound to a UI element
2. Implement the event handler that will respond to the action

The first thing we need to do is open the View Designer of the StartView by double-
clicking it in the Web Dynpro Explorer. The View Designer will appear in the middle
pane as shown below.

Ross Hightower Page 8 2/19/2025

Sales Orders Assignment Enterprise Application Development

The tabs along the bottom allow you to switch among the various components of the
view and the view controller. Select the Actions tab and select New next to the Actions
list. Enter the Name and Text as shown below. Notice the ToResultView outbound plug
is selected in the Fire plug list. Select Finish.

The new action is shown in the Actions list.

Ross Hightower Page 9 2/19/2025

Sales Orders Assignment Enterprise Application Development

Repeat these steps to create the action Back with text Back in the ResultView. When
you’re done the wizard automatically creates the code to fire the plug. Select the
Implementation tab. This shows the View Controller implementation. On the bottom left
pane you will see the Outline of the implementation.

Ross Hightower Page 10 2/19/2025

Sales Orders Assignment Enterprise Application Development

You can go quickly to a method by selecting its name in the Outline. Select the Event
Handler onActionGo (this is for the StartView). The method looks like this:

onActionGo()
public void onActionGo(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )
{
//@@begin onActionGo(ServerEvent)
wdThis.wdFirePlugToResultView();
//@@end
}

To trigger the navigation from StartView to ResultView the application calls the method
wdFirePlugToResultView(). Notice the format is wdFirePlug<outbound plug name>.
The predefined private variable wdThis refers to the current controller. The wdThis
variable is always required when you make calls to the view controllers private interface
IPrivate<view name>.

Before these methods can be executed, the action to which they are attached have to be
assigned to a UI element on the view layout. That’s what we’ll do next.

Designing the View Layouts

Next, we design the interface.

Ross Hightower Page 11 2/19/2025

Sales Orders Assignment Enterprise Application Development

StartView layout
If you haven’t done so, open the View Designer for the StartView and select the Layout
tab.

This shows the palette on which you will create the view layout. Theoretically, you can
drag UI elements from the list on the left but I’ve found this problematic. I use the
Outline view on the bottom left.

Notice there are two UI elements on the layout by default. The RootUIElementContainer
is an element called TransparentContainer into which all the other UI elements are
inserted. There is also a TextView called DefaultTextView which I usually delete.

Ross Hightower Page 12 2/19/2025

Sales Orders Assignment Enterprise Application Development

The first thing to do is to delete the DefaultTextView. Right-click the element in the
Outline view and select Delete.

Next, we’ll enter a container element called a Group. This is just my personal preference
to add all the later UI elements into Group elements. To add the element, right-click on
the RootUIElementContainer and select Insert Child from the context menu.

In the wizard choose the Group element and enter StartGroup as the id.

Ross Hightower Page 13 2/19/2025

Sales Orders Assignment Enterprise Application Development

The properties are shown immediately to the right of the Outline. If the properties are
not shown select the Properties tab at the bottom of the screen. Set the following
properties:

Property Value
Group in RootUIElementContainer with id StartGroup
Layout Gridlayout
colCount 3
cellPadding 5
design sapcolor
Caption in StartGroup (added automatically with StartGroup)
Text Welcome to your first Web Dynpro
Application

The figure below shows how to change the layout property. Many of the properties are
changed by drop-down lists rather than typing.

Next insert the following UI elements:

Property Value
Label in StartGroup with id label
Text Your name
labelFor Name (set this after adding the InputField)
paddingTop Large
InputField in StartGroup with id name
Tooltip Enter your name here
Value Leave this blank, we’ll fix it later
Button in StartGroup with id Go
Action Go (The action we created above)
Tooltip Go to next view

Ross Hightower Page 14 2/19/2025

Sales Orders Assignment Enterprise Application Development

Notice the text we entered when we created the action Go appears on the button when the
action is assigned to the button.

The view should look like the figure below when you’re done:

Notice that we specified a Gridlayout for the Group with 3 columns. Each UI element we
added was inserted into a column. You can experiment with the layout by changing the
layout type and colCount of the Group container to see how it affects the layout.

ResultView layout
For the ResultView delete the DefaultTextView and add the following UI elements:

Property Value
Group in RootUIElementContainer with id ResultGroup
Layout Gridlayout
colCount 2
cellPadding 5
Design sapcolor
Caption in ResultGroup (added automatically with StartGroup)
text Leave it blank, we’ll set this in code
TextView in ResultGroup with id message
Text Your application is running successfully!
colSpan 2
paddingTop Large
Button in StartGroup with id Back
Action Back (The action we created above)
Tooltip Return to start view

The layout should look something like the figure below.

Ross Hightower Page 15 2/19/2025

Sales Orders Assignment Enterprise Application Development

Defining Data Binding for UI Elements

In this step we’ll create the data contexts that allow the user to enter data that is
transferred from the StartView to the ResultView. This involves the following steps:

1. Create the context in the Component Controller.

2. Map the Component Controller context to the StartView and the ResultView.
3. Bind the InputField on the StartView and the TextView on the ResultView to
context attributes.
4. Generate a dynamic string to display on the ResultView.

Create the Component Controller context

Open the Component Controller by double-clicking the Component Controller node in
the Web Dynpro Explorer. Next, select the Context tab. It should look like the
following:

This shows the Context root node which is created by default. Now, right-click the
Context root node and select New-Value Attribute. Enter the value Username for the
Name and hit Finish.

Ross Hightower Page 16 2/19/2025

Sales Orders Assignment Enterprise Application Development

Ross Hightower Page 17 2/19/2025

Sales Orders Assignment Enterprise Application Development

Mapping the StartView context to the Component Controller context

Context mapping is how data is transferred between controllers. In this case we want to
map data between the StartView and the Component Controller.

To map contexts you need to open the Data Modeler. To open this, double-click the
FirstAppComp node in the Web Dynpro Explorer (or right-click the node and select
Open Data Modeler). This opens the Data Modeler in the top pane.

To map the context of the StartView to the context of the Component Controller use the
Create a data link tool ( ). Select the Create a data link icon, left-click on the
StartView in the top pane and drag and release on the Component Controller in the
middle pane. This opens the context mapping wizard.

Ross Hightower Page 18 2/19/2025

Sales Orders Assignment Enterprise Application Development

The context of StartView appears in the left pane and the Component Controller context
appears in the right pane. To map, click on the Username attribute and drag and release it
onto the StartView Context root node. Select the Username attribute in the next screen
and hit Finish.

Ross Hightower Page 19 2/19/2025

Sales Orders Assignment Enterprise Application Development

On the next screen you see the mapping has been accomplished.

Ross Hightower Page 20 2/19/2025

Sales Orders Assignment Enterprise Application Development

Mapping the ResultView context to the Component Controller

context
The mapping for the ResultView is slightly different. Use the Create a data link tool to
open the Context mapping wizard. Drag the Username and drop it on the ResultView
Context root node. On the next screen, edit the name in the Name column of the right
pane. Make the name HeaderText and select HeaderText in the left pane.

Ross Hightower Page 21 2/19/2025

Sales Orders Assignment Enterprise Application Development

After both mappings are created the Data Modeler will look like the following.

Ross Hightower Page 22 2/19/2025

Sales Orders Assignment Enterprise Application Development

Binding UI Elements to context attributes

Now that the context attributes have been mapped to the StartView we can bind the name
InputField on the layout to the Username attribute in the context. Open the StartView and
select the Layout tab. Select the InputField called name in the Outline view. Use the
button by the Value property and select the Username attribute and hit OK.

Now do the same for the ResultView, binding the text property of the
ResultGroup_Header caption to HeaderText.

Ross Hightower Page 23 2/19/2025

Sales Orders Assignment Enterprise Application Development

Generating a line of text dynamically using data binding

The last thing to do is to create a dynamic string to display in the message TextView.
Open the ResultView and choose the Implementation tab. Add the following code to the
onPlugFromStartView() method. Recall that this is executed automatically when the
navigation link from the StartView to the ResultView is executed.

onPlugFromStartView()
public void
onPlugfromStartView(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent
wdEvent )
{
//@@begin onPlugfromStartView(ServerEvent)
String headerText = "Congratulations ";
headerText += wdContext.currentContextElement().getHeaderText();
headerText += "!";
wdContext.currentContextElement().setHeaderText(headerText);
//@@end
}

Code Explanation

This is some fairly simple Java code. First we create a String variable and set it equal to
a string:

String headerText = "Congratulations ";

Next we retrieve the value of the HeaderText attribute from the current Context element
and append the value to the headerText string variable.

headerText += wdContext.currentContextElement().getHeaderText();

wdContext refers to this view’s context, currentContextElement() refers to current

context element under the Context root node, and getHeaderText() retrieves the value of
the HeaderText attribute. The += operator adds the value on the right side of the operator
to the value on the left side. For string variables this means to concatenate the two
strings.

Next, we concatenate an explanation point and then set the HeaderText context attribute
equal to the new string.

headerText += "!";
wdContext.currentContextElement().setHeaderText(headerText);

Ross Hightower Page 24 2/19/2025

Sales Orders Assignment Enterprise Application Development

You can use the Code Assist function to assist you in entering the code. Code Assist
provides a list of possible options. It’s a little slow so you may have to pause while it
catches up.

Deploying the Application

That’s it! Right-click on the FirstApp under the Applications node in the Web Dynpro
Explorer and select Deploy New Archive and Run. When prompted for the SDM
password, enter, the password. After a few moments a browser window will open and
the StartView will appear.

Enter your name in the InputField and hit Go.

Ross Hightower Page 25 2/19/2025

Sales Orders Assignment Enterprise Application Development

If you hit the Back button you will return to the StartView. Notice the value in the
InputField in the StartView. How did the value get there? It would be nicer if, when the
StartView reappeared, the InputField would be empty. How would you do that?

Ross Hightower Page 26 2/19/2025