5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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

1. 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.

Sign up below
Name: Email:

1 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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

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

Step 2: Component Controller

1. 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 2. Provide a Node Name as PA0002 and Dictionary Structure as PA0002 and then select Add Attribute from Structure.

Sign up below
Name: Email: Submit

2 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

3. 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

Step 3: Designing the View Layout

1. Click on MAIN View.

Sign up below
2. Go to the Context in the view and then drag and dropName: the PA0002 node which appears in Email: Submit

3 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

Right side (Component Controller) of the View.

Web dynpro ABAP 9 Click For Larger Image 3. Now, go to the Layout Tab in View and right click the ROOTUIELEMENTCONTAINER and then choose Insert element.

Web dynpro ABAP 10 Click To See Larger Image

4. Provide ID and select type as Label.

5. Again right click the ROOTUIELEMENTCONTAINER and then choose Insert element. Select InputField UI element this time.

6. Now select the EMPLOYEE_NUMBER_LBL and provide the Text property as Employee Number in the Property Editor.

Sign up below
Name: Email: Submit

4 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

7. 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.

Web dynpro ABAP 14 Click for A Larger Image 8. This is how the value property will look after binding it with the required Context Attribute.

9. 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.

Sign up below
Name: Email: Submit

5 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

10. Similarly, insert a Label and TextView UI elements for First Name, Last Name, Date of Birth and Nationality Output Fields.

11. This is how the ROOTELEMENTCONTAINER should look after all the required UI elements are inserted.

Step 4: Adding ABAP Code

1. Now we will insert Code to the actions that were created in Step 3. Here, we will fetch Sign up below data from back-end for the employee number entered by the user. Click on the Actions Tab of the View. Name: Email:

Submit

6 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

2. Double click on SHOW_DETAILS Action

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

Sign up below
Name: Email: Submit

7 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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

Step 5: Creating Web Dynpro Application

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

2. Give your application a name and description.

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

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

Output In The Web Browser

Sign up below
Name: Email: Submit

8 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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
Share:

Get The Free

SAP Training Newsletter
- Learn About New Modules I n SAP - Enhance Y our Existing SAP Knowledge - Learn Smarter Ways T o 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

Rating: 0.0/5 (0 votes cast)

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

Rating: 0.0/5 (0 votes cast)

Sign up below
Name: Email: Submit

Reply to this comment

9 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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

Rating: 0.0/5 (0 votes cast)

Reply to this comment

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

Rating: 0.0/5 (0 votes cast)

Reply to this comment

kaustubh says: May 25, 2012 at 7:17 pm thanks pete kaustubh

Rating: 0.0/5 (0 votes cast)

Reply to this comment

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.

Sign up below
Name: Email: Submit

10 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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 TO SAP 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 Dont Miss The Seasonal Video + eBook SAP Training Special December 27, 2012

Archives
January 2013

Sign up below
Name: Email: Submit

11 of 12

6/02/2013 10:36 AM

5 Easy Steps To Create A Web Dynpro ABAP Application | SAP...

http://www.saptraininghq.com/5-easy-steps-to-create-a-web-dy...

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 Dont 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

Sign up below
Name: Email: Submit

12 of 12

6/02/2013 10:36 AM