Show TOC

Drag and DropLocate this document in the navigation structure

Use

With drag and drop users can select UI element entries or view elements themselves (source), drag them, and drop them onto a different view element (target). Source and target can be either the same view element or two different view elements.

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

Note

To ensure accessibility of your application, you must also enable a task to be executed without drag and drop.

Procedure for End Users

Drag and drop functions as follows:

  1. The user drags a UI element, for example, an Image, a row from a Table, a node of a Tree, or entries in an ItemListBox by holding down the mouse button.

  2. While the user holds down the mouse button, a "ghost" image appears on the screen (a copy of the dragged objects), which follows the movement of the mouse cursor. If the user moves the mouse pointer over a UI element on which the user can drop the object, this is displayed either as a box with a dotted line border (for example, MatrixLayout), as a row inserted between other rows (for example, Table), or it is is highlighted (for example, table rows). Otherwise the mouse pointer displays a prohibitive sign. A view element or its entries can be dropped onto a target object, if a DropTargetInfo is defined for the target object (see below), and at least one target and source tags match. When the user drops the object, the onDrop event of the target is triggered.

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

Procedure for Developers

Note

The Web Dynpro ABAP framework provides visualization for drag and drop: Functions like swapping, sorting, adding, and deletion of entries must be programmed by the application.

To implement drag and drop, proceed as follows:

  1. To define a drag source, add DragSourceInfo to the view element in question.

  2. To define a drag target, add DropTargetInfo to the view element in question.

  3. To define which drag source can be moved to which drag target, specify the corresponding string (same name) for property tags 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. It is possible to use an asterisk ( *) as a wildcard at the end of the tags in the DropTargetInfo, for example, grid*).

    You are not allowed to use the following characters:

    • Colon ( :)

    • Comma ( ,)

    • Semicolon ( ;)

    • Backslash ( \)

    • Slash ( /)

    • Point ( .)

    You can use this property to define your own development standards. As software architects you should pay attention to which tags you use, and how you design them.

  4. You can set an action handler for the onDrop event of the target.

Data Transport

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

Caution

Since the data is transferred through a client, the data property must not contain any security data, nor large data sets. It is preferable that the data values are a type of reference to the actual data.

The same applies for drop actions: The system must always check whether a drop action is permitted, similar to an input check for an InputField.

Features

Drag and drop is provided for:

UI Element

Action

Tree

Single nodes and end nodes can be moved.

Objects can be dropped into a Tree in certain places:

  • Between existing child nodes

  • In the first and last position within a parent node

  • On an existing node, regardless of whether there is already a child node there 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

MatrixLayout

In GridLayout and MatrixLayout single cells of this layout can be moved, or objects inserted between cells.

Note

Drag and drop is only possbile with a one-column GridLayout. In MatrixLayout drag and drop is only possible with individual rows .

To drag a cell with the mouse, you have to "grip" it with the mouse. A grip is either an Image, a SectionHeader, or a Caption in this cell with isDragHandle= true .

In the test application WDR_TEST_DRAG_AND_DROP under GridLayout there is a TransparentContainer with a GridLayout. This TransparentContainer has multiple child UI elements, for example, a TransparentContainer with the title "Here you cannot drag". The SectionHeader behind this has a isDragHandle = false . In comparison, in TransparentContainer there is an Image with which you can move the container back and forth ( isDragHandle = true ).

In the test application WDR_TEST_DRAG_AND_DROP three groups are displayed under MatrixLayout : The first group contains five lines that can be moved about by drag&drop within the group. You can also move between the different groups by using drag&drop.

Caution

Exception:

The Captions of Tabs cannot be used as drag handles.

Image

The image can be moved.

ItemListBox

Entries are moved by selecting them (multiple selection SHIFT + mouse click), and dragging them.

Objects 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).

Table

Single table rows can be moved.

Objects 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).

You can also move rows.

DropTarget

See DropTarget :

Accordion

In an Accordion two types of drag and drop are possible:

  • Drag and drop UI elements, for example, an Image, onto an AccordionItem

    Example

    In an application four Images are displayed on the left. These Images can be used as the drag source. If an Image is dropped onto an AccordionItem, the Image is displayed in the content of the AccordionItems.

  • Drag and drop AccordionItems before or after another AccordionItem

    Example

    The AccordionItems in an application can be moved in the right sequence using drag and drop.

You can test this behavior using component WDR_TEST_ACCORDION in the system.

Drag and Drop in Tables

See Drag and Drop in Tables .

Drag and Drop in Layouts

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

Note

Drag and drop is only possbile with a one-column GridLayout. In MatrixLayout drag and drop is only possible with individual rows.

For drag and drop in layouts you need events and aggregations. Proceed as follows:

  1. When you initialize UIs in WDDOMODIFYVIEW (if possible, only when this method is first called), you need the MatrixLayout or GridLayout of the TransparentContainer or Group, in which you want to insert elements or whose child elements you want to move by drag and drop.

  2. Instantiate a DragSourceInfo and a DropTargetInfo, then insert the LayoutData into it.

  3. Set an action for the onDrop event of LayoutData.

  4. If you want to drag the child elements (that is, the cells of the layout - MatrixHeadData, and the following MatrixDatas or GridDatas), set property dragData of LayoutDatas, so that you can identify the cells later when you drop them. The value of dragData of a dropped layout cell appears later as the data event parameter in the onDrop event.

  5. Since layout cells need handles for the user to be able to grip them, you can use Captions, Images or SectionHeaders as grips by setting their isDragHandle property to true.

Example

WDR_TEST_DRAG_AND_DROP

The test component WDR_TEST_DRAG_AND_DROP is provided in the system. Here you can find scenarios where it is used.

Note

Any further programming must be done yourselves.

Drag and drop for various uses is demonstrated in this test component:

  • Browse and collect

    Here a user selects one or more entries, and drags them to a position on a different UI element. The data is either copied or moved. The same DragSourceInfo is used for all lines. Entries can be added wherever a DropTargetInfo is defined.

    Browse and collect is available for the following UI elements:

  • Generic Drag and Drop

    The user moves a UI element, and drops it onto a DropTarget. Image , GridLayout , and MatrixLayout can be used for this. In this case a DropTarget is used as a wrapping UI element.

  • Runtime Authoring

    You can define the following UI elements as drag handles (property isDragHandle), to sort various screen areas. The following UI elements can be moved in this way:

Event onDrop is provided for the following UI elements:

Figure 1: Example of Browse and Collect
Figure 2: Example of Generic Drag and Drop with Image