Professional Documents
Culture Documents
Applies to:
SAP ECC 6.0. For more information, visit the Web Dynpro ABAP homepage.
Summary
The article elaborates the use of button in ALV toolbar. Functionality of the button in toolbar is to display the
details in popup window based on selected line.
Author:
J.Jayanthi
Author Bio
J.Jayanthi is a Certified ABAP consultant with HR ABAP knowledge.
Table of Contents
ALV in Web Dynpro ABAP.................................................................................................................................. 3
Prerequisites ....................................................................................................................................................... 3
Goal. ..................................................................................................................................................... 3
Creating Web Dynpro...................................................................................................................................... 3
Component Controller ..................................................................................................................................... 4
View.. ............................................................................................................................................ 6
Step 1: ........................................................................................................................................................... 10
Step 2: ........................................................................................................................................................... 10
Step 3: ........................................................................................................................................................... 10
Step 4: ........................................................................................................................................................... 10
Step 5: ........................................................................................................................................................... 11
Step 6: ........................................................................................................................................................... 11
Step 7: ........................................................................................................................................................... 11
Component Usages ...................................................................................................................................... 11
Embedding View ........................................................................................................................................... 12
Handling the Button Action ........................................................................................................................... 13
Creating Web Dynpro Application ................................................................................................................. 14
Code. ............................................................................................................................................................. 14
Output ................................................................................................................................................. 16
Related Content ................................................................................................................................................ 17
Disclaimer and Liability Notice .......................................................................................................................... 18
Prerequisites
Component
The component is the central, reusable unit of the application project. You can create any number of views in
a component and arrange them in any number of windows.
Component Usages
Web Dynpro components can be nested. This means that you can integrate any number of other, already
existing components into a component.
View
The view is the smallest unit of a Web Dynpro application visible for the user. The layout elements and dialog
elements - for example, tables, text fields, or buttons - required for the application are arranged in a view.
The view contains a controller and a controller context in which the application data to be processed is stored
in a hierarchical structure. This allows the linking of the graphical elements with the application data.
Window
A window is used to group multiple views and to specify the navigation between the views. A view can only
Goal
In this article, Sales order details will be displayed initially in the main window and based on selected sales
document, toolbar button will display the Sales order item details in popup window.
We are going to use two views one for initial Sales Document display and another one for Popup Window.
We need to use Component SALV_WD_TABLE for ALV display. In POPUP window, table will be used for
diaplying vbeln and posnr. Since we need the item details of the sales order only when the particular sales
document is clicked, we will use supply function.
Component Controller
Go to Component Controller and Right click the context. Then select Create Node VBAK with dictionary
structure as VBAK. Then select the fields required for display from VBAK table using ADD ATTRIBUTE
FROM STRUCTURE button. In this example, we are selecting VBELN, VKORG, VTWEG and SPART.
Then remove the dictionary structure VBAK from the node VBAK and set other properties of the node VBAK
as below.
Create a node VBAP inside the node VBAK and add the attributes VBELN and POSNR from VBAP.
Then set the property of VBAP as below. Create a supply function GET_ITEM.
View
In Layout of the Main view, create ViewContianerUIElement using Insert element by right clicking the
ROOTUIELEMENTCONTAINER.
Now in Context, drag and drop VBAK from right side to Left side. Delete the child node VBAP which we dont
require in Main view.
In the layout tab of POPUP view, Insert an element(say T1) Table. Set the datasource property as below.
Step 1:
Choose the radio button Read context for the node MAKT.
Keep the below generated code and delete the rest which is not required.
Step 2:
Then select the data by the below logic.
Step 3:
Then bind the table.
Step 4:
Instantiate Used Component ALV.
Step 5:
Get the model using the method GET_MODEL.
Step 6:
Now create button and set the label of the button.
Step 7:
Interface class IF_SALV_WD_FUNCTION_SETTINGS contains all methods for managing user-defined,
application-specific functions. Using the IF_SALV_WD_FUNCTION_SETTINGS~CREATE_FUNCTION
method, we can create an object for user-defined, application-specific function. Functions that are created
using this method are arranged on the left margin of the ALV output. Using the SET_EDITOR method, we can
specify which UI element is displayed in the toolbar so that the user can trigger the required function.
Component Usages
Create Controller usage and then Drag and drop the node VBAK from right to left in Data.
Embedding View
Right click and embed the view Main as below.
Create another window POP to display the POPUP. Inside the window, embed the table.
Go to code part of the method and make sure the below parameters appears.
Code
Supply Function method Get_item in Component Controller.
Output
Related Content
Web Dynpro ABAP - Supply Function and ALV
Specifying User Interface Elements
For more information, visit the Web Dynpro ABAP homepage