First Web Dynpro Design

 Scenario: Creating a simple web dynpro component and designing screen elements on the view and displaying it by a web dynpro application.

Step1. Go to Tcode- SE80.

Step2. Select ‘Web Dynpro Comp. / Intf’ and Provide a component name and hit the Enter key from keyboard.

Step3. Provide the description and click on the continue button. The system automatically suggested a name for the window and for the view. If you want to change the name of window or view, you can do so.

Step4. Save as Local Object.

Step5. Now the web dynpro component is created with the provided name. The current status is inactive. Click on the Activate button to activate it.

Step6. From the left tree, expand the Windows section and double click on the windows name . The Window structure appears in the right hand section and Expand it. The window ‘ZTEST_WDC_COMP1’ embeds the view ‘MAIN’ .

Step7. Now expand the view ‘MAIN’  from the left hand tree under the web dynpro component and double click on it. We have to put the screen elements on the view layout.

Step8. Click on the change button to put some elements on the view.

Step9. Right click on the node ‘ROOTUIELEMENTCONTAINER’ and from the menu click on Insert Element.

Step10. Provide the ID  and type as ‘TextView’ and click on the Continue button.

Step11. System provides some description fields about the element on the right hand side for the above created element.

Step12. Provide some value in the Text field and hit Enter key from key board so that the text appears in the View.

Step13. Now view design is over. Right click on the web dynpro component and click on the Activate option.

Step14. The whole web dynpro component is activated .

Step15. Now right click on the Web dynpro component name and from the option navigate along Cretae->Web Dynrpo Application.

Step16. Provide a application name and description and click on Continue button

Step17. The application generates a URL as high lighted below to view it in the web browser.

Step18. Click on the Save button and save it in local object.

Step19. The application is saved.

Step20. Thew application name appears under the web dynpro component under the Web Dynpro Application section in the left hand tree.

Step21. Now right click on the Application name and click on the TEST option

Step22. The window appears and the embedding view contents is shown.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s