This example exercise is meant to show how to create a display file capable of drag and drop between subfiles.
Example Steps
Open the Profound UI Visual Designer, start with a new display file and name the record format
SFLCTL1
.Add an empty panel labeled
Drag and Drop
.Add an exit button labeled
Exit
bound to an indicator namedBTNEXIT
.Add two single column subfiles with output fields as shown below.
Set the id of the first subfile to
Grid1
and the second subfile toGrid2
.Set the
record format name
of the first subfile (Grid1
) toSFLA
and the second subfile (Grid2
) toSFLB
.Add an output field to each subfile bound to
FIELDA
andFIELDB
respectively. These fields are20A
.Bind an indicator named
SFLCLR
to theclear subfile
property of both subfiles. (The same indicator can be used with both subfiles.)For both subfiles, set the properties as shown:
Select the
SFTCTL1
record format and bind the following fields to the properties shown:Save the display file as
DRAGD
and compile it to your library.Compile the code below into your
QRPGLESRC
. A file is attached here to import into your library:DRAGR.RPGLE
.The important piece of code is shown below.
Using the data taken from
DragFromId
andDragToId
, we can determine the subfile that the item was taken from, and where it was dropped. Then using theRemoveItem()
andInsertItem()
sub procedures included in the code, we can then remove the item from the original subfile and insert it into the correct position on the new subfile.
Properties
Property Name | Promptable | Possible Values | Bindable? | Available In |
---|---|---|---|---|
Allow Drag | ❌ (DROPDOWN) | true or false | ✅ | Profound UI |
Use Proxy | ❌ (DROPDOWN) | true or false | ✅ | Profound UI |
Drop Targets | ✅ | Comma Delimited List of Element IDs | ✅ | Profound UI |
OnDragStart | ✅ | Any Valid JavaScript | ❌ | Profound UI |
OnDragEnter | ✅ | Any Valid JavaScript | ❌ | Profound UI |
OnDragLeave | ✅ | Any Valid JavaScript | ❌ | Profound UI |
OnDrop | ✅ | Any Valid JavaScript | ❌ | Profound UI |
Global JavaScript Object: pui.dragDropInfo
The pui.dragDropInfo
object contains information related to the drag and drop events. This object can be accessed in the events OnDrop
, OnDragLeave
, OnDragStart
, and OnDragEnter
.
Properties and Usage
// The object contains many properties, but // here are a few useful ones used as examples // of how to retrieve the property value in // JavaScript. // Retrieve the element id of the selected // subfile record. var ddID = pui.dragDropInfo["dd element id"]; // Retrieve the relative record number of the // selected element to drag/drop. var ddRecNum = pui.dragDropInfo["dd record number"]; // Returns the target element id of the where // the selection is to be dropped. var targetID = pui.dragDropInfo["target element id"]; // Returns the relative record number of where // the selection is after it has been dropped. var targetRecNum = pui.dragDropInfo["target record number"]; // Log values to browser console to see values. console.log( "DD Element ID:", ddID, "\nDD Element Record Number:", ddRecNum, "\nDD Target Record Number:", targetID, "\nDD Target Record Number:", targetRecNum )
Customizing with CSS
As of Profound UI Version 5, Fix Pack 1.2
, the style of the drop target line can be set using custom CSS. By default a dashed, gray line appears to indicate drop target when you drag a grid item over a valid drop target:
You can change the default style by adding a CSS rule into a custom style sheet under the /www/profoundui/htdocs/profoundui/userdata/custom/css/
folder (where profoundui
is the installation folder).
/* Set color of target line to be red, dashed, and 2px wide.*/ .grid-drop-target { border-top: 2px dashed red; }
The width of the line is 2 pixels, and the line color is #CCCCCC
by default. If the grid's border width property is set, then the border width overrides any custom CSS:
If the grid's border color property is set, then the border color overrides any custom CSS: