Reusability of components in Web Dynpro for ABAP

By Suman Kumar Chinnam, YASH Technologies

Summary:

Web dynpro Application to demonstrate the usage of custom component into other component. We will develop one webdynpro component (ZDEMO_FLIGHTS) and make the methods of this Component controller available for cross components. We develop another component (ZDEMO_SEARCH_FLIGHTS) and we reuse the methods of component (ZDEMO_FLIGHTS) in component (ZDEMO_SEARCH_FLIGHTS).  This is a typical example of reusable components that are built to display a special set of data and can be used in several other components.

Development Objectives:

At the end of this tutorial, you will be able to understand “Using one Component’s methods in another component (Reusing the Components)”.

Application One: Development of Reusable Component

1. Create a Webdynpro component using TCode SE80 with name ZDEMO_FLIGHTS.

Creating Component Controller Context and Methods:

2. Click on Component Controller in the Object tree.

Create the context node

Maintain the properties according to the screen shot below. Enter Node name FLIGHTS, Select SFLIGHT as Dictionary Structure and “0…n” for the Cardinality.

Select button Add Attribute from Structure and select all components of structure SFLIGHT.

Now go to Methods tab in the Component Controller, add the method to get Fights details and check the interface checkbox in order to access this method in other components.

Add the Importing parameters and implement the Method to get the Flight details from Table SFLIGHT.

Creating a View:

Click on the Web Dynpro component ZDEMO_FLIGHTS in the object tree and open the context menu to create a new view.

Create view FLIGHTS.

 Defining the View Context Mapping

Open view FLIGHTS and switch to tab Context. Map context node FLIGHTS to the view context of FLIGHTS using Drag and Drop.  

Adding UI Elements to the View:

Add table Element to Layout.

    

Click here to continue...