5 easy steps to create a web dynpro abap application

Home

Beginner Guide – SAP ABAP Training

About

Contact

SAP ABAP

Focus On SAP ABAP Articles And Training

SAP BI / BW

Dive Into SAP BI & BW Articles And Training

SAP Consulting

SAP Consulting – Freelance And Permanent

Everything SAP

Up To Date SAP Industry News From Around The Web

Videos

Video – Presentations & How-To Tutorials.

Home » Everything SAP, Featured, SAP ABAP

5 Easy Steps To Create A Web Dynpro

ABAP Application

Submitted by Pete on April 10, 2012 – 4:19 pm5 Comments

Rating: 5.0/5 (2 votes cast)

Summary: This is a step by step

guide for those ABAP consultants

who want to try their hand at Web

Dynpro ABAP. By following these 5

easy steps anyone who has

knowledge of ABAP can create their

first fully functioning Web

Dynpro ABAP Application which

fetches data from an SAP back-end

system. This example Web Dynpro

Applications displays the personal

information of an employee whose

personal number (PERNR) is

provided.

Step 1. Create Web Dynpro Component

Go to Transaction SE80, choose Web-Dynpro-Comp./Intf in the object list and provide

a new name (Y_FIRST_WEBDYNPRO) and click on Display.

1.

Name: Email:

Sign up below

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP... http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

1 of 12 6/02/2013 10:36 AM

Confirm you want to create the object by clicking on Yes.2.

Enter the description and choose the Type radio button as Web Dynpro Component.3.

Step 2: Component Controller

Go to Component Controller and Right click on the CONTEXT, select Create and then

select Node.

Web dynpro ABAP 4 –

Click To See Larger

Image

1.

Provide a Node Name as PA0002 and Dictionary Structure as PA0002 and then select

Add Attribute from Structure.

2.

Name: Email: Submit

Sign up below


2 of 12 6/02/2013 10:36 AM

Select the following attributes from the PA0002 structure.

This is how the context should look like after you have completed Step 2.3.

Web Dynpro ABAP 7 –

Click To See A Larger

Image

3.

Step 3: Designing the View Layout

Click on MAIN View.1.

Go to the Context in the view and then drag and drop the PA0002 node which appears in2. Name: Email: Submit

Sign up below


3 of 12 6/02/2013 10:36 AM

Right side (Component Controller) of the View.


Click For Larger Image

Now, go to the Layout Tab in View and right click the

ROOTUIELEMENTCONTAINER and then choose Insert element.


Click To See Larger

Image

3.

Provide ID and select type as Label.4.

Again right click the ROOTUIELEMENTCONTAINER and then choose Insert element.

Select InputField UI element this time.

5.

Now select the EMPLOYEE_NUMBER_LBL and provide the Text property as Employee

Number in the Property Editor.

6.

Name: Email: Submit

Sign up below


4 of 12 6/02/2013 10:36 AM

Now, we will bind the Value property of the InputField UI element to the context. This

is done by clicking on the selected area and then selecting the context attribute PERNR.


Click for A Larger Image

7.

This is how the value property will look after binding it with the required Context Attribute.8.

Insert a Button UI element which will be used to fetch the data from the back-end. Bind

the event property of the UI element with action SHOW_DETAILS.

9.

Name: Email: Submit

Sign up below


5 of 12 6/02/2013 10:36 AM

Similarly, insert a Label and TextView UI elements for First Name, Last Name, Date of

Birth and Nationality Output Fields.

10.

This is how the ROOTELEMENTCONTAINER should look after all the required UI

elements are inserted.

11.

Step 4: Adding ABAP Code

Now we will insert Code to the actions that were created in Step 3. Here, we will fetch

data from back-end for the employee number entered by the user. Click on the Actions

Tab of the View.

1.

Name: Email: Submit

Sign up below


6 of 12 6/02/2013 10:36 AM

Double click on SHOW_DETAILS Action2.

Below is a screenshot of the ABAP Code that goes between method and endmethod.3.

Name: Email: Submit

Sign up below


7 of 12 6/02/2013 10:36 AM

Click on Save and Activate all the inactive objects created in this tutorial.4.

Step 5: Creating Web Dynpro Application

Create Web Dynpro Application by right clicking the Web Dynpro.1.

Give your application a name and description.2.

Right click on the Web Dynpro component and activate it.3.

Output : Right click on the application and select Test to run your application.4.

Output In The Web Browser

Name: Email: Submit

Sign up below


8 of 12 6/02/2013 10:36 AM

Share:

Update: A follow on article is now available here: How To Use Inbound And Outbound Plugs In

SAP Web Dynpro ABAP Programs

5 Easy Steps To Create A Web Dynpro ABAP Application, 5.0 out of 5 based on 2 ratings

Get The Free

SAP Training Newsletter

- Learn About New Modules In SAP

- Enhance Your Existing SAP Knowledge

- Learn Smarter Ways To Work With SAP

Name:

Email:

5 Comments »

JOCA says:

April 12, 2012 at 9:56 am

This documentation was very helpfull, it is quite simple and easy to follow.

Could you please provide an example with more than one view using the outbound and

inbounds plugs.

Kind regards and many thanks

José Carneiro


Reply to this comment »

Pete says:

April 12, 2012 at 10:03 am

Hi José,

Thanks for the kind words. I will add your request to tutorial queue.

Pete


Reply to this comment » Name: Email: Submit

Sign up below


9 of 12 6/02/2013 10:36 AM

kaustubh says:

May 25, 2012 at 6:38 pm

hi

Can u please send me how to configuration of alert in r/3 please provide the step

by with screen shot

Thanks

Kaustubh Mane



Pete says:

May 25, 2012 at 7:13 pm

Hi Kaustubh,

I will add it to the list of topics that have been requested

Thanks,

Pete



kaustubh says:

May 25, 2012 at 7:17 pm

thanks pete

kaustubh



Leave a comment!

Add your comment below, or trackback from your own site. You can also Comments Feed via

RSS.

Be nice. Keep it clean. Stay on topic. No spam.

Name (required)

Mail (will not be published) (required)

Website (optional)

You can use these tags:

<a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b>

<blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q

cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register

at Gravatar.

Name: Email: Submit

Sign up below


10 of 12 6/02/2013 10:36 AM

Notify me of follow-up comments by email.

Notify me of new posts by email.

Beginners Guide To ABAP Course

SAP Training

Social

Follow @PeterMoxon

Join Pete

on Google+

BEGINNERS GUIDE TOSAP ABAP

Peter Moxon

Buy New

Privacy Information

Latest Popular Comments

The Best 31 SAP ABAP Programming Training Videos

January 30, 2013

AUTOMATIC PAYMENT PROGRAM IN SAP

January 13, 2013

Book Extract – Introduction To Using The SAP ABAP Debug Tools

January 11, 2013

CONCEPT OF THE NEW GENERAL LEDGER IN SAP

January 10, 2013

Don’t Miss The Seasonal Video + eBook SAP Training Special

December 27, 2012

Archives

January 2013 Name: Email: Submit

Sign up below


11 of 12 6/02/2013 10:36 AM

December 2012

November 2012

October 2012

September 2012

August 2012

July 2012

June 2012

May 2012

April 2012

March 2012

February 2012

December 2011

October 2011

September 2011

March 2011

Recent Posts

The Best 31 SAP ABAP Programming

Training Videos

AUTOMATIC PAYMENT PROGRAM IN SAP

Book Extract – Introduction To Using The

SAP ABAP Debug Tools

CONCEPT OF THE NEW GENERAL

LEDGER IN SAP

Don’t Miss The Seasonal Video + eBook

SAP Training Special

Pages

About

Beginner Guide – SAP ABAP Training

Contact Us

Cookie Policy

Guest Articles Welcome

Policies

Categories

Everything SAP

Featured

SAP ABAP

SAP BI / BW

SAP Consulting

Videos

This website is not affiliated with, sponsored by, or approved by SAP AG.

This site uses cookies More info

Name: Email: Submit

Sign up below


12 of 12 6/02/2013 10:36 AM

5 easy steps to create a web dynpro abap application

Documents