Hi, I provide training in SAP UI5. Also feel free to checkout my new web page https://saptechblog.com
Webdynpro ABAP

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.

 

clip_image002

 

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.

 

clip_image004

 

 

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

 

clip_image005

 

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

 

clip_image006

 

Choose the required attributes and press enter.

 

 

clip_image007

 

Context node and its attributes will be created as below.

 

clip_image008

 

 

 

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

 

clip_image009

 

 

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

 

clip_image010

 

 

Controller usage will be created as below.

 

clip_image012

 

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

 

clip_image013

 

 

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.

clip_image014

Provide the ID and type for the UI element.

clip_image015

clip_image016

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.

clip_image018

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

clip_image020

 

 

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

clip_image022

 

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.

clip_image023

 

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

clip_image025

 

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

clip_image026

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

clip_image027

 

 

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.

 

clip_image029

 

Code will be generated as below.

clip_image031

Note: I have removed the unwanted code.

 

Initialize some values as shown below.

 

clip_image033

 

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 ).

 

 

Save and activate the whole component.

 

Step 8: Create a webdynpro application to test the component.

clip_image035

 

Output:

 

clip_image037

 

About Arun

0 Comments:

Post a Comment

Powered by Blogger.