Drag and Drop in Web Applications

Official Content
This documentation is valid for:

This feature lets the end user drag & drop the content associated to controls (grid content, table content, etc).
Users can, for example, drag a product from a product list to the invoice grid. Or drag them to a shopping cart image. Or whatever you imagine.

This is a way to drag information from one place to another, in order to take some actions. That information is associated with a web control, which could be a grid that loads the information, an image or a text block in the rows of a freestyle grid (representing an Item or entity), etc.

Very Important!!! The information can be dragged from and to different web components. So, you can have the products grid in a web component and the image cart in another, a new way of interaction between web components!

Let's start with an example. Suppose that you want to make a shopping form where the user can drag the products he/she wants to buy to a cart image, in order to add them to the shopping list. This can now be easily achieved. Just configure the AllowDrag property in the "products" grid, and program the drop event of the image, where the product will be added to the list. That's all!

1. First, set the AllowDrag property of the "products" grid:

dragdropimagcart2

2. Code the following for the "cart" image.

Event cart.Drop(&ProductId,&ProductName)
     //Here the code to buy the product
     msg('Buy ' +&ProductName)
EndEvent

3. At runtime, drag the selected grid row to the image.

dragdropimagcart

Download the example here.

Implementation Details

AllowDrag grid property

Enables the grid content to be dragged.

AllowDrop grid property

Enables the grid to be filled with content that was dragged from another control. The grid has to be with _no_ base table.

Drag & Drop events

Supported controls: Image, Text block, Table, Grid and FreeStyle Grid, Web Component, Button.

Drag event

Syntax: <control>.Drag((out:)parameter)

The parameter is only one, and is always an out variable parameter. This parameter will be loaded with the data you want to drag. If you need to drag several elements you have to load them into an SDT.

Drop event

Syntax: <control>.Drop(parameters)

The parameters can only be variables. This parameters will be loaded with the corresponding values of the Drag event parameters.

Note:

There is no difference between the navigation of any user event and the navigation of the Drop event (Drag event). The rules that apply for the former apply also for the latter.

Drag & Drop between different Web objects

Remember that the information can be dragged from and to different web components. So, there has to be a way to identify the information that is able to be dragged from a control and dropped into another one.
The way of identifying that is the following:


1. If you have the following source code in an object "A":
   

  Event <control>.Drop(&P1,&P2,..,&Pn)

  EndEvent

2. Any other object "B" which satisfies the following:

- has a grid with AllowDrag property set to "Yes", and the columns of the grid match exactly the parameters of the drop event, and has optionally, others:

&P1,&P2,..,&Pn,..(Others)

In this case, the user will be able to drag information from the grid to the control. The same happens if the columns are attributes named P1, P2,.. Pn.

Graphically:

Drag(X,Y,Z,T) ------------> Drop(X,Y)

Notes

  1. The same applies to AllowDrop property of grids. In that case, the grid which has AllowDrop property set to "Yes" needs to have a subset of the columns of the grid which has AllowDrag property set to "Yes".
  2. The order of columns is not relevant.
  3. If any of the variables is based on a SDT, it´s matched by DataType only, not by name.

Examples

Drag and Drop in Applications Sample 1
Drag and Drop in Applications Sample 2
Drag and Drop in Applications Sample 3
Drag and Drop in Applications Sample 4





Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.