A Simple ALV Report

This tutorial explains you how to create a simple ALV report.

Step 1: Go to the Tcode SE80 and create a webdynpro component.

Assign the component to the package or save it in the local object.

Step 2: In the main component, Add the component “SALV_WD_TABLE” to the used components table and provide a component use name and press enter. You can now see the component usage created for the component.

Step 3: Go to the context tab of the component controller and create a context node and attributes as shown below.

Enter the node properties as below and click on add attribute from the structure.

Choose the required attributes and press enter.

Context node and its attributes will be created as below.

Step 3: In the properties tab of the view controller create a controller usage for the used component.

Double click on the interface controller to create a component usage with controller access.

Controller usage will be created as below.

By doing so it will create two methods in the interface for the view controller.

The first method wd_cpifc_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference for the interface controller of the ALV component.

The second method wd_cpuse_ followed by the name which we have provided for the component in the used component list of the component framework will be created. This will get us the object reference component usage for the ALV component created in our controller. By the above step you would now be able to see the component usage for the ALV component created in our component which will not be earlier adding the interface controller to our view controller.

Step 4 : Go to the layout tab of the view controller and create a view container UI element as shown below.

Provide the ID and type for the UI element.

The purpose of this view container UI element is to hold the view of the another component or another view of the same component. Since we are reusing the functionality of the standard webdynpro component the result will be displayed in the view of that component. In order to display the result in our window we created a view container element and bring the view of the ALV component in our window.

Step 5: Go the window tab of the window controller, to add the view of the ALV component to the view container UI element which we have created earlier.

Right click on the view container and select embed view to add the view.

Select the view to be embedded as table from the pop up.

Table view of component SALV_WD_TABLE will be embedded in the view container as below.

Step 6: Go to the Interface controller usage of the component usage. Here you will see a context node called data. This context node is of generic type and it is being binded with the ALV table. If we map the data in our context node to this context node it will be displayed in the ALV table which can be seen in our view container.

Click on the controller usage button and choose component controller as the controller usage.

Drag and drop the context node EKPO of component controller to the DATA node of the ALV table.

You can now see the binding created between these two nodes.

Step 7: Go to the Do init method of the component controller and initialize some values to the context node to be displayed in the table.

Code will be generated as below.

Note: I have removed the unwanted code.

Initialize some values as shown below.

Code:

DATA lo_nd_ekpo TYPE REF TO if_wd_context_node.
DATA lt_ekpo TYPE wd_this->Elements_ekpo.

lo_nd_ekpo = wd_context->get_child_node( name = wd_this->wdctx_ekpo ).

SELECT *
         from ekpo
         into CORRESPONDING FIELDS OF TABLE lt_ekpo
         UP TO 5 ROWS.

lo_nd_ekpo->bind_table( new_items = lt_ekpo set_initial_elements = abap_true ).