Part 1: Creating a component.

Step 1: Go to TCode SE80. In the repository, the browser chooses 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 below.

 

Step 3: Go to the view controller and map the context node of the component controller to the context of the view controller. So that the node in the 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 on 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 the 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 bound to the context attribute. So that whatever the value entered in the Input field will get bonded to that particular context attribute.

 

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