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.
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.
Enter the node name and press enter.
Create an attribute for the node as shown below.
Provide the attribute name and data type and then press enter.
After creating your screen will appear like below.
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.
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.
Drag and drop the context node “NODE” to the context of the view controller.
Step 4: Go to the layout tab of the view controller to place the UI elements.
Right click on the root UI container and select insert element to Insert a UI element.
Insert a label UI element.
The properties with red shadow are the mandatory properties to be filled.
Provide a text for the label and you can see it on the layout.
.
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.
While the obligatory bindings for the UI elements are missing you can see them grayed out.
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.
Select the attribute which you want to bind and double click on it.
Now you can see the input field highlighted.
Double click on the label UI element and in the property “Label for” assign this input field to the label property.
From the drop down select the input field.
Now you can see the label UI element also gets highlighted.
Now save and activate the whole application.
Part 2 : Creating an Webdynpro Application.
To create a Webdynpro application, Right click on the component -> create-> webdynpro application.
Enter the description for the webdynpro application. It will appear on the browser tab.
Save the application.
Test the application.
OUTPUT
Nice work Arun
ReplyDelete