Drag and Drop functionality in web Dynpro ABAP - SCN

Drag and Drop Functionality in
Web Dynpro ABAP

Applies to:

This document applies to SAP ECC 6.0, SAP Netweaver 2007 and above. For more information, visit the
Web Dynpro ABAP homepage.

Summary

This document describes how the drag and drop property can be implemented in Web Dynpro ABAP .
Author: Shaira Madhu
Company: Applexus Software Solutions (P) Ltd
Created on: 1 December 2010

Author Bio

Shaira Madhu is working as SAP Technology Consultant with Applexus Software Solutions (P) Ltd..

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 1

Drag and Drop Functionality in Web Dynpro ABAP

Table of Contents

Drag and Drop ....................................................................................................................................................3
Procedures for the Users ................................................................................................................................3
Procedures for the Developers .......................................................................................................................3
Data Transport ................................................................................................................................................4
Drag and Drop UI Elements support...............................................................................................................4
A Sample Application for Implementing Drag and Drop . ...............................................................................5
Output............................................................................................................................................................13

Related Content ................................................................................................................................................17
Disclaimer and Liability Notice..........................................................................................................................18

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 2

Drag and Drop Functionality in Web Dynpro ABAP

Drag and Drop

With drag and drop a user can select UI elements from a UI area (source), drag them from the source, and
drop them into another UI element area (target). Source and target can be either the same UI element or two
different UI elements.

In Web Dynpro specific UI elements can be used as the source and the target of a drag and drop operation.

Procedures for the Users

Drag and drop functions as follows:

1. The user drags a UI element, for example, an image, data in a table or tree, or an ItemListBox with
the mouse button held down.

2. While the user holds the mouse button down, a ghost image indicating the action being undertaken
is displayed on the screen.

If the user moves the mouse pointer over a UI element that is defined as a DropTarget, this is either
indicated by a dotted line around the container or by a line displayed in bold between the relevant
lines. If the user moves the ghost image across areas that are not defined as DropTargets, or across
areas whose tags do not match, a prohibitory sign is displayed.

3. When the user drops the ghost image, the onDrop event of the associated UI element is triggered.

The application developer must ensure that the data is actually moved or copied, that is, that the
actions are executed.

Procedures for the Developers

To implement drag and drop proceed as follows:

1. To define a drag source, add DragSourceInfo to the UI element in question.
2. To define a drag target, add DropTargetInfo to the UI element in question.
3. To define which drag source can be moved to which drag target, specify the corresponding string

(same name) for property tag of the relevant DragSourceInfo and DropTargetInfo.

You can also use multiple tags. You separate the tags with blank spaces.

The system does not differentiate between uppercase and lowercase letters in tags. You can use an
asterisk (*) as a wild card at the end of the tags for example, grid*. This will match for grid_1, grid_2
ect.

You are not allowed to use the following characters:

 Colon (:)
 Comma (,)
 Semicolon (;)
 Backslash (\)
 Slash (/)
 Point (.)

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 3

Drag and Drop Functionality in Web Dynpro ABAP

Data Transport

The data is transported using property DragSourceInfo.data: When data is dropped, an event is triggered
and DragSourceInfo.data is transferred as the event parameter. If applicable, additional information, such as
the insertion position, is transferred in an event parameter.

Drag and Drop UI Elements support.

UI Elements Action
Single nodes and end nodes can be moved.

Tree Nodes can be inserted into a Tree in certain places:

 Between existing child nodes

 In the first and last position within a parent node

 As a new child node in an existing node, regardless of whether child
nodes already exist or not

Multiple nodes can only be selected for drag and drop if at least one of the tags
is common to all nodes. In an empty Tree there is only one possible insertion
position (first = last position).

GridLayout In the GridLayout single cells of the layout can be moved, or UI elements (for
example, an Image) can be inserted between cells.

Drag&Drop is only possible with one-column GridLayouts.

So that a cell can be moved with the mouse, it needs a handle that you can
grasp it with. This handle is either an Image or a SectionHeader, or a Caption in
this cell with isDragHandle= true.

The Captions of Tabs cannot be used as drag handles.

Image The image can be moved.
ItemListBox
Single entries can be moved.
Entries can be inserted into a ItemListBox in certain places:

 Between existing entries
 In the first and last positions in a list
In an empty ItemListBox there is only one possible insertion position (first = last
position).

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 4

Table Drag and Drop Functionality in Web Dynpro ABAP
DropTarget
Single table rows can be moved.

Rows can be inserted into a Table in certain places:

 Between existing rows

 In the first and last positions with the rows

In an empty Table there is only one possible insertion position (first = last
position).

DropTarget is the target of a Drag&Drop operation; it defines where a UI
element moved by Drag&Drop ends up. The DropTarget itself is not visualized,
it is just an invisible frame or an invisible container around another UI element
and prepares an area for the insertion of contents.
A DropTarget requires information about the corresponding DropTargetInfo and
the UI element or the UI elements which are visualized

A Sample Application for Implementing Drag and Drop .

This application shows how to incorporate a drag and drop functionality.

This application have a group of images . This images can be drag and drop into a Main List but cannot be
drop into Sub List. User can add item in Sub List only from Main list. Deletion from Sub List can be done by
drag and drop the Selected item to Main List. Deletion from the Main List can be done either by drop it into
Sub List or by drop in the image for delete (DropTarget).

Create a node LIST_MAIN with cardinality 0:n and attributes MAIN_IMAGE type string, MAIN_DESC type
string.

Create another node LIST_SUB with cardinality 0:n and attributes SUB_IMAGE type string ,SUB_DESC
type string.

Map this two nodes to View context.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 5

Drag and Drop Functionality in Web Dynpro ABAP

Add a Group. And Add Image in Group as shown below snap shot.

Check the IsDragHandle property of the UIElement Img_1 to enable Drag and Drop property.RightClick the
img_1 and click ‘INSERT_DRAG_SOURCE_INFO’.

Assign an arbitrary variable the tags property of ’DRAGSOURCEINFO’ .Here I used tags as ‘input_1’.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 6

Drag and Drop Functionality in Web Dynpro ABAP

Create 5 more images
IMG_2 with DRAGSOURCEINFO tags as ‘input_2.
IMG_3 with DRAGSOURCEINFO tags as ‘input_3.
IMG_4 with DRAGSOURCEINFO tags as ‘input_4.
IMG_5 with DRAGSOURCEINFO tags as ‘input_5.
IMG_6 with DRAGSOURCEINFO tags as ‘input_6.

Refer below snapshot.

Create an ItemListBox in a Group.Attach a label for the listBoxItem

Bind the Data Source to node LIST_MAIN from the context.Again bind text to MAIN_DESC and Image to

MAIN_IMAGE.Set the visibleItems to 5. Right click ItemListbox and Insert DRAG_SOURCE_INFO with
Tags ‘output’ and DRAG_TARGET_INFO with Tags ‘input*’.If we give tags as ‘Input*’ it will become s target
for the sourceTags starting with ‘input’.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 7

Drag and Drop Functionality in Web Dynpro ABAP

Create an Action for the ILB_MAIN as shown in below snapshot.

Double click Event Add_main and write the following code

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 8

Drag and Drop Functionality in Web Dynpro ABAP

METHOD onactionadd_main .
*--Data Declarations

DATA lo_nd_list_main TYPE REF TO if_wd_context_node.
DATA lo_el_list_main TYPE REF TO if_wd_context_element.
DATA ls_list_main TYPE wd_this->element_list_main.
DATA x_main TYPE wd_this->element_list_main.
DATA t_main TYPE TABLE OF wd_this->element_list_main.
DATA lv_main_ind TYPE i.

lo_nd_list_main = wd_context->get_child_node( name = wd_this->wdctx_list_main ).
*--Get the data from node LIST_MAIN

CALL METHOD lo_nd_list_main->get_static_attributes_table
IMPORTING
table = t_main.

*--Check for index = 0.
IF index = 0.

*--Default value 1
lv_main_ind = 1.

ELSE.
lv_main_ind = index.

ENDIF.

CASE tags.
WHEN 'input_1'.
x_main-main_image = '~Pictogram/Airplane'.
x_main-main_desc = 'Airplane'.
INSERT x_main INTO t_main INDEX lv_main_ind.

WHEN 'input_2'.
x_main-main_image = '~Pictogram/AlarmClock'.
x_main-main_desc = 'AlarmClock'.
INSERT x_main INTO t_main INDEX lv_main_ind.

WHEN 'input_3'.
x_main-main_image = '~Pictogram/Car'.
x_main-main_desc = 'Car'.
INSERT x_main INTO t_main INDEX lv_main_ind.

WHEN 'input_4'.
x_main-main_image = '~Pictogram/Laptop'.
x_main-main_desc = 'Laptop'.
INSERT x_main INTO t_main INDEX lv_main_ind.

WHEN 'input_5'.
x_main-main_image = '~Pictogram/Compass'.
x_main-main_desc = 'Compass'.
INSERT x_main INTO t_main INDEX lv_main_ind.

WHEN 'input_6'.
x_main-main_image = '~Pictogram/Train'.
x_main-main_desc = 'Train'.
INSERT x_main INTO t_main INDEX lv_main_ind.

*-- Drag and Drop from SUB LIST
WHEN 'input_sub'.
DATA lo_nd_list_sub TYPE REF TO if_wd_context_node.
DATA lo_el_list_sub TYPE REF TO if_wd_context_element.
DATA ls_list_sub TYPE wd_this->element_list_sub.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 9

Drag and Drop Functionality in Web Dynpro ABAP

DATA lt_sub TYPE TABLE OF wd_this->element_list_sub.
DATA lx_sub TYPE wd_this->element_list_sub.
DATA lv_sub_ind TYPE i.
*--Read the data from node LIST_SUB
lo_nd_list_sub = wd_context->get_child_node( name = wd_this->wdctx_list_sub ).
CALL METHOD lo_nd_list_sub->get_static_attributes_table

IMPORTING
table = lt_sub.

*--Get The Selected Item from SUB LIST
CALL METHOD lo_nd_list_sub->get_lead_selection_index
RECEIVING
index = lv_sub_ind.

IF lv_sub_ind NE 0.

READ TABLE lt_sub INTO lx_sub INDEX lv_sub_ind.

*Delete selected from SUB LIST

DELETE lt_sub INDEX lv_sub_ind.

lo_nd_list_sub->bind_table(

EXPORTING

new_items = lt_sub ).

ENDIF.
*--Add the Selected item to MAIN LIST

x_main-main_image = lx_sub-sub_image.
x_main-main_desc = lx_sub-sub_desc.
INSERT x_main INTO t_main INDEX lv_main_ind.

ENDCASE.
*--Bind the Internal table to Node

CALL METHOD lo_nd_list_main->bind_table
EXPORTING
new_items = t_main.

ENDMETHOD.

Create another ItemListBox and attach a label as created previously. Bind Data source to LIST_SUB. Bind

property Text to SUB_DESC and image to SUB_IMAGE.Set the visibleItems to 5. Insert
DRAG_SOURCE_INFO with tags ‘OUTPUT’and DRAG_TARGET_INFO with tags ‘INPUT_SUB’. Create

Action as shown below.

SAP COMMUNITY NETWORK D
© 2010 SAP AG
SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
10

Drag and Drop Functionality in Web Dynpro ABAP

Double the Event add_sub and write the code .
METHOD onactionadd_sub .

CASE tags.

WHEN 'output'.

*--Data Declarations

DATA lo_nd_list_sub TYPE REF TO if_wd_context_node.

DATA ls_list_sub TYPE wd_this->element_list_sub.

DATA lt_sub TYPE TABLE OF wd_this->element_list_sub.

DATA lx_sub TYPE wd_this->element_list_sub.

DATA lo_nd_list_main TYPE REF TO if_wd_context_node.

DATA ls_list_main TYPE wd_this->element_list_main.

DATA lx_main TYPE wd_this->element_list_main.

DATA lt_main TYPE TABLE OF wd_this->element_list_main.

DATA lv_main_ind TYPE i.

DATA lv_sub_ind TYPE i. lo_nd_list_sub = wd_context-

>get_child_node( name = wd_this->wdctx_list_sub ).

*--Read data from node LIST_SUB

lo_nd_list_sub->get_static_attributes_table(

IMPORTING

table = lt_sub ).

*--Read data from node LIST_MAIN

lo_nd_list_main = wd_context->get_child_node( name = wd_this-

>wdctx_list_main ).

lo_nd_list_main->get_static_attributes_table(

IMPORTING

table = lt_main ).

*--get the selected index of Main List

lo_nd_list_main->get_lead_selection_index(

RECEIVING

index = lv_main_ind ).

*--Delete selected item from Main List

READ TABLE lt_main INTO lx_main INDEX lv_main_ind.

DELETE lt_main INDEX lv_main_ind.

*Bind internal table to node LIST_MAIN

lo_nd_list_main->bind_table(

EXPORTING

new_items = lt_main ). lx_sub-sub_desc = lx_main-

main_desc.

lx_sub-sub_image = lx_main-main_image.

IF index NE 0.

lv_sub_ind = index.

ELSE.

lv_sub_ind = 1.

ENDIF.

*--Add the select item to Sub List

INSERT lx_sub INTO lt_sub INDEX lv_sub_ind.

*--Bind data to node LIST_SUB

lo_nd_list_sub->bind_table(

EXPORTING

new_items = lt_sub ). ENDCASE.

ENDMETHOD.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 11

Drag and Drop Functionality in Web Dynpro ABAP

Create UIElement DropTarget. Insert Image and DROP_TARGET_INFO for DropTarget . The entries in the
ILB_MAIN can be done by Drag and Drop an item to the DropTarget.
Assign ‘output’ to tags property for DROP_TARGET_INFO, so that the itemcan be dragged from the main
list and dropped into DropTarget. As we have assigned the tags property DRAG_SOURCE_INFO of the
Main list to ‘Output’.

Create an event for DropTarget.

Double ckick the Event Delete _main.

METHOD onactiondelete_main .
CASE tags.
WHEN 'output'.

*--Data Declarations
DATA lo_nd_list_main TYPE REF TO if_wd_context_node.
DATA lo_el_list_main TYPE REF TO if_wd_context_element.
DATA ls_list_main TYPE wd_this->element_list_main.
DATA lt_main TYPE TABLE OF wd_this->element_list_main.
DATA lx_main TYPE wd_this->element_list_main.
DATA lv_main_ind TYPE i.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 12

Drag and Drop Functionality in Web Dynpro ABAP

lo_nd_list_main = wd_context->get_child_node( name = wd_this-
>wdctx_list_main ).
*--Read the data from node LIST_MAIN to an internal table

lo_nd_list_main->get_static_attributes_table(
IMPORTING
table = lt_main ).

*--Get the selected index of main list
lo_nd_list_main->get_lead_selection_index(
receiving
index = lv_main_ind ).

IF lv_main_ind EQ 0.

lv_main_ind = 1.

ENDIF.

*--Delete the selected fron Main List

DELETE lt_main INDEX lv_main_ind.

*--Bind the internal table to nose LIST_MAIN

lo_nd_list_main->bind_table(

EXPORTING

new_items = lt_main ).

ENDCASE.

ENDMETHOD.

Our Design part has been completed.
Activate the Web Dynpro component .Create Web Dynpro Application and test.

Output.
Output of the application looks like this:

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 13

Drag and Drop Functionality in Web Dynpro ABAP

Items can be added to Main List from the Image List.

User cannot add Image from Image list to Sub List

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 14

Drag and Drop Functionality in Web Dynpro ABAP

Item to Subl ist can be added from Main List only.

User can delete Item from Main List by drag and Drop it into Delete Image

User cannot Delete item from Sub List by Drag and Drop into Delete Image.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 15

Drag and Drop Functionality in Web Dynpro ABAP

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 16

Drag and Drop Functionality in Web Dynpro ABAP

Related Content

Drag and Drop - SAP Documentation
DropTarget - SAP Help Portal
ItemListBox - SAP Help Portal
For more information, visit the Web Dynpro ABAP homepage.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 17

Drag and Drop Functionality in Web Dynpro ABAP

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.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com | UAC - uac.sap.com
© 2010 SAP AG 18