Reusability of components in Web Dynpro for ABAP

...Previous

Bind the View Context node FLIGHTS to the Table Flights using create binding option in Context Menu.

Click on Context (1) of pop up and then select node Flights (2)                  

Make sure that the binding for all required context attributes is enabled (all checkboxes are activated) and press Confirm Entry (Enter).      

The result should look like this.

Now open window ZDEMO_FLIGHTS by clicking on Windows and double-clicking on ZDEMO_FLIGHTS. Switch to change mode. Open the view structure and move the view FLIGHTS inside the window structure on the right hand side by Drag and Drop.

Activation, Creation of a Web Dynpro Application and Execution:

1. Activate all objects of Web Dynpro component ZDEMO_FLIGHTS.

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

A dialog will appear. Enter the values as seen here and hit enter. After the application has been created, then click save.

To start the application, right click on your Web Dynpro application entry and select context menu entry Test.

A browser will be started to run the Web Dynpro application. The result page should look like this:  

Component Two:

In this Web dynpro component we will use above component to show flight details, if the search details are entered by user in this component. 

Creating a Web Dynpro Component: 

Create Webdynpro component using Tcode SE80 with name ZDEMO_SEARCH_FLIGHTS. 

Declaration of Flights Component with in ZDEMO_SEARCH_FLIGHTS for     Component Usage:

Double click the component in the Object tree and choose the tab Used Components. Create a new component use flights using the component ZDEMO_FLIGHTS by adding the entries in used component list.

Click here to continue...