Drag and Drop Functionality in Web Dynpro ABAP Application Applies to: SAP version ECC 6 NetWeaver 2007 and above. For more information, visit the Web Dynpro ABAP homepage. Summary This document provides a clear idea of how to use drag and drop functionality in ABAP Web Dynpro with the help of simple application. This functionality helps a lot in making Web dynpro application user friendly and enable user to drag and drop objects on browser. Author: Anand Kolte Company: Infosys Created on: 22 February 2010 Author Bio My name is Anand Kolte and I am working with Infosys from past 3 years in SAP ABAP technology. I got good exposure in SAP with variety of work in ABAP. I worked mainly on Reports, FMs, Interfaces, BAPIs, SAP Scripts, performance analysis etc. As a part of small development I also learned Web Dynpro and hence wanted to share my knowledge on drag/drop functionality through this document. 2009 SAP AG 1
Table of Contents Purpose... 3 Creating Web Dynpro component... 3 Layout Design... 4 Coding... 8 Creating a Web Dynpro application... 9 Related Content... 11 Disclaimer and Liability Notice... 12 2009 SAP AG 2
Purpose To provide a clear idea of how to use drag and drop functionality in ABAP Web Dynpro with the help of simple application The most awaited drag and drop functionality is now available in ABAP Web Dynpro. It is available on systems running version ECC 6.0 with NetWeaver 2007. Let us take a look at how we can make use of this functionality. We will create a small application in Web Dynpro with drag/drop options available for user. In this application, we will give a list of products company XYZ is selling online and user can put any of these products to shopping cart and buy them. Since we are focusing on only drag/drop functionality, we will not worry about how the sales order processing happens at SAP ABAP end. Let us start with the development of our Web Dynpro application. Creating Web Dynpro component Go to Object Navigator SE80 and select Web Dynpro Comp./Intf. from the drop down. I am giving name ZANAND_DRAG_DROP to our application. 2009 SAP AG 3
Here I gave default window name as WINDOW1 and view name as MAIN. Create a node for holding purchased product details. I have created node NODE_PRODUCTS and added following attributes to it. Part Number Part Description Quantity Unit of measure Net price Currency Preview of Image For making this application user-friendly, we will upload images of few products so that user can drag them to shopping cart. Upload these images to our Web Dynpro component as MIME objects. Layout Design 1. Create a transparent container and a group inside it. Create images inside it. Please refer the snapshot below: In this image you can see I have uploaded 5 images to our application and inserted elements of type IMAGE inside group GROUP1. Then assigned one image source to every element. 2009 SAP AG 4
Note the property isdraghandler of this image. It has to be checked for enabling this image for dragging. 2. For specifying the dragging attributes, we will add a drag source to each image. Right click on image and select INSERT DRAG_SOURCE_INFO. Fill the details on this drag source. Please refer to snapshot below: Create drag source for every image. The tag name will help us identify which image we are dragging. 3. Now for dropping these products, we require a drop target. Lets upload two more images one for shopping cart and other for trash in case customer wants to remove any product from cart. We will create a new container for putting these cat and trash images. Lets say CONTAINER2. Here we will not add images directly inside container but instead, will first create a DROP target in this container. Right click on container to create an element of type DropTarget. In the events property of this drop target create an action ADD for ondrop event. Now, right click on this DropTarget and select INSERT UIELEMENT to add shopping cart image. Give the source name as cart image name from MIME objects. Now, right click again on the DropTarget object and select INSERT DROP_TARGET_INFO. Please refer to the snapshot below: Note the tag name in this drop target info. It is new* means it can accept any drag enabled source with tag starting from new like our all product images. 2009 SAP AG 5
Now repeat the same procedure for trash drop target. Here the image to be displayed is of trash can and let us keep the tag as OUT*. Create action REMOVE for event ondrop of this drop target. 4. Create a table in the same view for displaying the products customer has purchased so far. One row will be added every time he adds a product to cart. And when he drags the product out from this table, that row should disappear from table. For this, we need to make our table also a drag-enabled source. In the snapshot below you can see that there is only one drag source added for a table. This is because here we can identify any row by its lead selection index. Tag for this drag source is set as OUT_TO_TRASH. Note that the last column of the table is of type image just to show customer which product corresponds to that record. Looks good! 2009 SAP AG 6
2009 SAP AG 7
Coding The design part is over! Now we need to code in two action handler methods that we created for drop target. The code for method ONACTIONADD is given below: ---------------------------------------------------------------------------------------------- METHOD onactionadd. DATA lo_nd_node_products TYPE REF TO if_wd_context_node. DATA ls_node_products TYPE wd_this->element_node_products. DATA lt_node_products LIKE TABLE OF ls_node_products. * navigate from <CONTEXT> to <NODE_PRODUCTS> via lead selection lo_nd_node_products = wd_context->get_child_node( name = wd_this->wdctx_node_products ). CALL METHOD lo_nd_node_products->get_static_attributes_table IMPORTING table = lt_node_products. CASE tags. WHEN 'new_camcorder'. ls_node_products-part_no = 'CMCR1121'. ls_node_products-description = 'SONY CAMCORDER 1440x1080 60i'. ls_node_products-price = '1000.00'. ls_node_products-preview = 'Camcorder.png'. WHEN 'new_digicam'. ls_node_products-part_no = 'DSC34i21'. ls_node_products-description = 'CANON DIGI 15MP 10x'. ls_node_products-price = '499'. ls_node_products-preview = 'Digicam.png'. WHEN 'new_hard_drive'. ls_node_products-part_no = 'HDDST500'. ls_node_products-description = 'TRANSCEND 500GB HDD'. ls_node_products-price = '120'. ls_node_products-preview = 'hard_drive.png'. WHEN 'new_laptop'. ls_node_products-part_no = 'DLLT3268'. ls_node_products-description = 'DELL GEN-X P4 DUO 2.8GHZ'. ls_node_products-price = '999'. ls_node_products-preview = 'Laptop.png'. WHEN 'new_lcdtv'. ls_node_products-part_no = 'SM6T45S'. ls_node_products-description = 'SAMSUNG LCD 32 INCH'. ls_node_products-price = '799'. ls_node_products-preview = 'LCD_TV.png'. ENDCASE. ls_node_products-quantity = '1'. ls_node_products-unit = 'PCE'. ls_node_products-currency = 'USD'. APPEND ls_node_products TO lt_node_products. lo_nd_node_products->bind_table( lt_node_products ). ENDMETHOD. ------------------------------------------------------------------------------------- ---------- As you see, there is nothing great in this code. The code for method ONACTIONREMOVE is given below: 2009 SAP AG 8
------------------------------------------------------------------------------------- ---------- method ONACTIONREMOVE. DATA lo_nd_node_products TYPE REF TO if_wd_context_node. DATA lo_el_node_products TYPE REF TO if_wd_context_element. DATA ls_node_products TYPE wd_this->element_node_products. data lt_node_products like table of ls_node_products. data l_index type i. * navigate from <CONTEXT> to <NODE_PRODUCTS> via lead selection lo_nd_node_products = wd_context->get_child_node( name = wd_this->wdctx_node_products ). * get index of lead selection l_index = lo_nd_node_products->get_lead_selection_index( ). CALL METHOD lo_nd_node_products->get_lead_selection_index receiving index = l_index. CALL METHOD lo_nd_node_products->get_static_attributes_table IMPORTING table = lt_node_products. delete lt_node_products index l_index. lo_nd_node_products->bind_table( lt_node_products ). endmethod. Creating a Web Dynpro application Now create a Web Dynpro application for our component and save it. Then execute it using a browser. The screenshot of application on browser is given below: 2009 SAP AG 9
Drag any product image to shopping cart and a corresponding new row will appear in table. Drag any row from table to trash and it will disappear from table. Finally we can pass this table to backend SAP for further processing. As I said earlier, we are not bothered about entire sales order processing. Note that this application will not allow you to drag product image to trash and table row to shopping cart because of tags restrictions we have given. 2009 SAP AG 10
Related Content www.sdn.sap.com For more information, visit the Web Dynpro ABAP homepage. 2009 SAP AG 11
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. 2009 SAP AG 12