Upload
others
View
44
Download
2
Embed Size (px)
Citation preview
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 1
Web Dynpro ABAP: Toolbar in ALV
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
Company: Siemens IT Solutions and Services Pvt. Ltd.
Created on: 03 November 2010
Author Bio
J.Jayanthi is a Certified ABAP consultant with HR ABAP knowledge.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 2
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
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 3
ALV in Web Dynpro ABAP
Normally ABAP Consultants will create the toolbar button in ALV programmatically. We are going to see how to display button in ALV toolbar using Webdynpro ABAP and how and where to write the functionality of the button.
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 displayed by the browser if the view is embedded in a window. Singleton
The property "Singleton" specifies the number of instances that can exist in a dependent context node (that does not belong directly to the root node). If the property "Singleton" is set, exactly one instance of the node exists. Its content changes when the lead selection of the parent node changes. If the property "Singleton" is not set, one instance per parent instance exists. The content of the instances does not change when the lead selection of the parent changes.
Supply Function
We can specify the name of a method which we can use to fill the context node at runtime in supply function.
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.
Creating Web Dynpro
Go to SE80 and select Web Dynpro Comp./Intf. and provide the name(say ZZZ_JAYTEST9) to create. Then enter the description and choose the type as Web Dynpro Component.
Enter the ALV for component use with component type SALV_WD_TABLE as below in the properties of the webdynpro ZZZ_JAYTEST9. This will create the component usages by name ALV.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 4
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.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 5
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.
Here Singleton property is set in VBAP node.
Uncomment the code which appears automatically and keep additionally only the logic for data selection.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 6
View
In Layout of the Main view, create ViewContianerUIElement using Insert element by right clicking the ROOTUIELEMENTCONTAINER.
In properties tab, design the properties as below.
Now in Context, drag and drop VBAK from right side to Left side. Delete the child node VBAP which we don’t
require in Main view. symbol shows it is mapped.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 7
Create another view say POPUP.
In the context tab, Drag and Drop only the child node VBAP to the view from component controller.
In the layout tab of POPUP view, Insert an element(say T1) Table. Set the datasource property as below.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 8
Then right click T1 and select Create Binding.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 9
Bind the elements as below.
Now the layout will appear as below.
Select the method WDDOINIT (For Main View) in methods tab.
Use Web Dynpro code wizard to generate code automatically.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 10
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.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 11
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.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 12
Embedding View
Right click and embed the view Main as below.
For the another window POP, embed the table as below.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 13
Handling the Button Action
Create method ONITEM as Event Handler with Event ON_FUNCTION as below in Main view.
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.
Then in the code part, check the r_param->id = ‘BUTTON’.
Use the code wizard as below for generating POPUP message.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 14
Creating Web Dynpro Application
Create Web Dynpro Application by right clicking the Webdynpro (ZZZ_JAYTEST9).
Right click the Web Dynpro component and activate.
Code
Supply Function method Get_item in Component Controller.
WDDOINIT in Main view.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 15
ONITEM Event Handler in Main View.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 16
Output
Select a line and click item.
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 17
Related Content
Web Dynpro ABAP - Supply Function and ALV
Specifying User Interface Elements
For more information, visit the Web Dynpro ABAP homepage
Web Dynpro ABAP: Toolbar in ALV
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 18
Disclaimer and Liability Notice
This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.
SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document, and anyone using these methods does so at his/her own risk.
SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this document.