8/17/2019 A Simple Application

1/14

Building a simple application

Scenario: To create and run a simple WebDynpro Application. We would accept an input value from the user on first screen and display the value entered on the second screen.

Note: Please refer to the SAP® help for detailed information of the components used in this document.

Procedure: 

1.  Go to transaction SE80. Please note that there is no separate transaction for creation of 

WebDynpro application other than SE80.

2.  Select “WebDynpro Comp./ntf! from the list "as sho#n belo#$

 

%.  Create a ne# WebDynpro component by the name &S'P(EC)*C'+,DE-.

8/17/2019 A Simple Application

2/14

 'ssin it to the local obect.

.  iht clic3 on the WebDynpro component “&S'P(EC)*C'+,DE-! an4 create a 5ie#.

 

8/17/2019 A Simple Application

3/14

 

Sa5e the application

6.  Do7bleclic3 on the C-P*E*(C*(++E.

9.  Chec3 if the application is in chane mo4e.

:.  Create a no4e as sho#n belo#;

8/17/2019 A Simple Application

4/14

8.  Create an attrib7te for the no4e as sho#n belo#;

8/17/2019 A Simple Application

5/14

 

8/17/2019 A Simple Application

6/14

 Sa5e the application.

S(,?EW= create4 earlier.

 n this step= #e #o7l4 be 4esinin the first screen of o7r application #ith the follo#inelements;

•  +abel for the inp7t fiel4

•  np7t fiel4

•  @7tton "for S7bmit$

Dra an4 4rop the element “+abel! onto the layo7t.

8/17/2019 A Simple Application

7/14

 

'fter 4rain an4 4roppin onto the layo7t= chane the teAt of the “+abel! to “Bsername! in

the riht si4e bottom of the #in4o#.

 *o# 4ra an4 4rop the “inp7t fiel4! onto the layo7t.

8/17/2019 A Simple Application

8/14

 

 *o# clic3 on the +abel element create4 earlier an4 set the property of “+abel>or! to

“*PB(,>E+D!.

 

>inally= 4ra an4 4rop the element “@7tton! on to the layo7t.

 

8/17/2019 A Simple Application

9/14

n the properties #in4o# of the @7tton= 4o the follo#in;

Chane the teAt to “S7bmit!

 

Clic3 on “Create! for the property “n'ction!.

 

Enter the 'ction an4 the 7tbo7n4 Pl7 name.

8/17/2019 A Simple Application

10/14

 

Press “! for the creation prompt of 7tbo7n4 Pl7.

Clic3 on “ConteAt!tab. Dra an4 4rop the *o4e on the riht si4e to the conteAt on the left

si4e.

Clic3 on ESF for the prompt for the no4e to copie4 an4 mappe4.

 Sa5e the application.

Clic3 on +ayo7t tab no#.

Do7bleclic3 on the “np7t,fiel4! an4 in the properties;

a$  >or the property “?al7e!= select the attrib7te “*ame! by clic3in on the bin4in

 b7tton.

We are 4one #ith 4esinin of the first screen.

10.  n this step= #e #o7l4 4esin the secon4 screen of o7r application.

ihtClic3 on the WebDynpro component an4 create another 5ie#= SEC*D,?EW.

Create a label= “Entere4 *ame! as mentione4 in the earlier step.

We #o7l4 4isplay the 5al7e entere4 on the first screen in an element calle4 “teAt 5ie#!.

8/17/2019 A Simple Application

11/14

Dra an4 4rop the element “(eAt ?ie#! onto the layo7t.

Clic3 on “ConteAt! tab an4 map the no4es as in o7r earlier step.

 

Go to (ab “nbo7n4 Pl7s! an4 create an inbo7n4 pl7 as sho#n belo#;

Go bac3 to the layo7t no#.

 *o# 4o7bleclic3 on the element “(eAt?ie#! to open the properties. >or the property “(eAt!=

clic3 on the bin4in b7tton an4 select “*ame!

11.  n this step= #e #o7l4 embe4 the abo5e create4 5ie#s in the #in4o# create4 in the first step.

8/17/2019 A Simple Application

12/14

a$  Do7bleclic3 on the #in4o# “-'*,W*DW!.

 b$  ihtclic3 on the #in4o# name an4 select “E-@ED ?EW!.

c$  Embe4 both the 5ie#s create4 earlier. Do not select the 5ie# “E-P(?EW! #hich

is create4 by 4efa7lt.

4$  EApan4 the tree.

e$   *o# rihtclic3 on “SB@-(! an4 select “Create *a5iation!.

 

8/17/2019 A Simple Application

13/14

f$  Select “SEC*D,?EW! for the 4est.5ie#.

 

$   *o# select the >S(,?EW an4 ma3e it as 4efa7lt.

 

Sa5e an4 acti5ate the application "When acti5atin= select all the siA components relate4 to this

#eb4ynpro application. f all siA components are acti5ate4= only then yo7r application eAec7tes$  

 *o# yo7r application is rea4y to eAec7te. +ets loo3 at the metho4 of testin this application.

Testing your WebDynpro Component 

1.  ihtclic3 on the WebDynpro Component an4 create WebDynpro 'pplication.

8/17/2019 A Simple Application

14/14

 

2.  Witho7t chanin any 5al7es= press S'?E.

%.  EAec7te yo7r WebDynpro application.