drag and drop functionality in web dynpro abap application

12
SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com © 2009 SAP AG 1 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.

Upload: raj-reddy

Post on 20-Jan-2016

117 views

Category:

Documents


0 download

DESCRIPTION

Drag and Drop Functionality in Web Dynpro ABAP Application

TRANSCRIPT

Page 1: Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 1

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.

Page 2: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 2

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

Page 3: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 3

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.

Page 4: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 4

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.

Page 5: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 5

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.

Page 6: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 6

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!

Page 7: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 7

Page 8: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 8

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:

Page 9: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 9

-------------------------------------------------------------------------------------

----------

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:

Page 10: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 10

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.

Page 11: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 11

Related Content

www.sdn.sap.com

For more information, visit the Web Dynpro ABAP homepage.

Page 12: Drag and Drop Functionality in Web Dynpro ABAP Application

Drag and Drop Functionality in Web Dynpro ABAP Application

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 12

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.