Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

A simple webdynpro application


 

This tutorial explains you to create a simple Webdynpro ABAP Application which will create a simple form to user to enter the input.

 

 

Part 1: Creating a component.

 

Step 1: Go to TCode SE80. In the repository browser choose the Webdynpro comp/intf. and provide the component name and press enter.

 

clip_image002

 

Save it in a package or assign the component to the local object.

 

 

Step 2: Go to the component controller and create a context node and a context attribute as shown below.

 

clip_image004

 

 

Enter the node name and press enter.

clip_image006

 

 

Create an attribute for the node as shown below.

 

clip_image008

 

Provide the attribute name and data type and then press enter.

 

clip_image010

After creating your screen will appear like below.

 

clip_image012

 

 

Step 3: Go to the view controller and map the context node of the component controller to the context of view controller. So that the node in component controller can be accessed in the view controller.

 

Double click on the view and click on the context tab.

 

clip_image014

 

 

You will see the nodes of the component controller in the right hand side. Select the context node and drag and drop it in the context of the view controller.

 

clip_image016

 

Drag and drop the context node “NODE” to the context of the view controller.

 

clip_image018

 

 

Step 4: Go to the layout tab of the view controller to place the UI elements.

 

clip_image020

 

Right click on the root UI container and select insert element to Insert a UI element.

 

clip_image022

 

 

Insert a label UI element.

 

clip_image024

 

 

The properties with red shadow are the mandatory properties to be filled.

 

clip_image026

 

 

Provide a text for the label and you can see it on the layout.

 

clip_image028

.

 

Label for property refers to which UI element we have created this label. As of now we don’t have any other UI elements created. Now let us create a UI element Input field and assign this label to the input field.

 

In a similar way create an input UI element.

 

clip_image030

While the obligatory bindings for the UI elements are missing you can see them grayed out.

 

clip_image032

 

 

 

Property “value” is an obligatory binding for the input UI element and it has to be binded to the context attribute. So that what ever the value entered in the Input field will get binded to that particular context attribute.

  

 

To bind it to the context attribute click on the binding button.

 

clip_image034

 

Select the attribute which you want to bind and double click on it.

  

Now you can see the input field highlighted.

 

clip_image036

 

 

Double click on the label UI element and in the property “Label for”  assign this input field to the label property.

 

 

clip_image038

 

From the drop down select the input field. 

 

Now you can see the label UI element also gets highlighted.

 

clip_image040

 

Now save and activate the whole application.

 

clip_image042

 

 

 

 

clip_image044

 

 

 

 

Part 2 : Creating an Webdynpro Application.

 

To create a Webdynpro application, Right click on the component -> create-> webdynpro application.

 

clip_image046

 

 

Enter the description for the webdynpro application. It will appear on the browser tab.

 

clip_image048

 

 

 

 

clip_image050

 

Save the application. 

 

clip_image052

 

Test the application.

 

 

clip_image054

 

 

 

 

OUTPUT

 

clip_image056

About Arun

1 Comments:

Powered by Blogger.