Guide

This example exercise is designed meant to show how to create a display file capable of of drag and drop between subfiles.Procedure

Example Steps

1. Open the Profound UI Visual Designer, start with a new display file and name the record

   format

   format SFLCTL1 .

   
   

2. Add an empty panel

   labeled

   labeled Drag and Drop .

   
   

3. Add an exit button

   labeled "

   labeled Exit

   " bound

    bound to an indicator

   named

   named BTNEXIT .

   
   

4. Add two single column subfiles with output fields as shown below.
   

   Image Removed

   Image Added

   
   

5. Set the id of the first subfile

   to

   to Grid1

   and

    and the second subfile

   to

   to Grid2.

   
   

6. Set

   the

   the record format name

   of

    of the first subfile ( Grid1 ) to SFLA and the second subfile ( Grid2 )

   to

   to SFLB .

   
   

7. Add an output field to each subfile  bound

   to

   to FIELDA

   and

    and FIELDB respectively. These fields are 20A .

   
   

8. Bind an indicator

   named

   named SFLCLR to

   the "

   the clear subfile

   " property

    property of both subfiles. (The same indicator can be used with both subfiles.)

   
   

9. For both subfiles, set the properties as shown:
   

   Image Removed

   Image Added

   
   

10. Select

    the

    the SFTCTL1 record format and bind the following fields to the properties shown:
    

    Image Removed

    Image Added

    
    

11. Save the display file

    as

    as DRAGD

    and

     and compile it to your library.

    
    

12. Compile the code below into your your QRPGLESRC. A file is attached here to import into your library: DRAGR.RPGLE.

    Code Block
    linenumbers true collapse true
    H DFTACTGRP(*NO) * FDRAGD CF E WorkStn Handler('PROFOUNDUI(HANDLER)') F SFile(SFLA : RRNA) F SFILE(SFLB : RRNB) D RRNA S 5I 0 D RRNB S 5I 0 D ArrayA S 20A DIM(100) D CountA S 5I 0 D ArrayB S 20A DIM(100) D CountB S 5I 0 D RemoveItem PR D rm_ARRAY 20A DIM(100) D rm_Index 5I 0 CONST D InsertItem PR D in_ARRAY 20A DIM(100) D in_Index 5I 0 CONST D in_Value 20A CONST D in_Count 5I 0 D ClearEmpty PR D cl_ARRAY 20A DIM(100) D cl_Count 5I 0 D Item S 20A /FREE ArrayA(1) = 'Red'; ArrayA(2) = 'Green'; ArrayA(3) = 'Mouse'; ArrayA(4) = 'Dog'; ArrayA(5) = 'Kangaroo'; ArrayA(6) = 'Ant'; ArrayA(7) = 'Purple'; ArrayA(8) = 'White'; ArrayA(9) = 'Cat'; ArrayA(10) = 'Camel'; ArrayA(11) = 'Horse'; CountA = 11; ArrayB(1) = 'Orange'; ArrayB(2) = 'Gound Hog'; ArrayB(3) = 'Yellow'; ArrayB(4) = 'Black'; ArrayB(5) = 'Hog'; CountB = 5; Dou BTNEXIT = *On; // Clear the subfiles. SFLCLR= *On; Write SFLCTL1; SFLCLR= *Off; // Load subfile A with Array A FOR RRNA = 1 TO CountA; FIELDA = ArrayA(RRNA); WRITE SFLA; ENDFOR; // Load subfile B with Array B FOR RRNB = 1 TO CountB; FIELDB = ArrayB(RRNB); WRITE SFLB; ENDFOR; // Display the subfile. ExFmt SFLCTL1; If BTNEXIT = *Off; If DragFromId = 'Grid1' And DragToId = 'Grid1'; Chain DragFromRN SFLA; RemoveItem(ArrayA : DragFromRN); InsertItem(ArrayA : DragToRN : FIELDA : CountA); ENDIF; If DragFromId = 'Grid1' And DragToId = 'Grid2'; Chain DragFromRN SFLA; RemoveItem(ArrayA : DragFromRN); InsertItem(ArrayB : DragToRN : FIELDA : CountB); ENDIF; If DragFromId = 'Grid2' And DragToId = 'Grid2'; Chain DragFromRN SFLB; RemoveItem(ArrayB : DragFromRN); InsertItem(ArrayB : DragToRN : FIELDB : CountB); ENDIF; If DragFromId = 'Grid2' And DragToId = 'Grid1'; Chain DragFromRN SFLB; RemoveItem(ArrayB : DragFromRN); InsertItem(ArrayA : DragToRN : FIELDB : CountA); ENDIF; ClearEmpty(ArrayA : CountA); ClearEmpty(ArrayB : CountB); EndIf; // end if exit = off. EndDo; *InLr = *On; Return; /END-FREE P RemoveItem B D RemoveItem PI D rm_ARRAY 20A DIM(100) D rm_Index 5I 0 CONST /FREE rm_ARRAY(rm_Index) = 'EMPTYEMPTY'; return; /END-FREE P RemoveItem E P InsertItem B D InsertItem PI D in_ARRAY 20A DIM(100) D in_Index 5I 0 CONST D in_Value 20A CONST D in_Count 5I 0 D I s 5I 0 D Index s like(in_Index) /FREE Index = in_Index + 1; * Shift each element from the end of the array forward, starting from * the end and working backward to the destination index spot. for i = in_Count downto Index; in_ARRAY(i+1) = in_ARRAY(i); ENDFOR; * The destination spot gets the parameter value. in_ARRAY(Index) = in_Value; * Increment the size of the array (how many elements are filled). in_Count+=1; return; /END-FREE P InsertItem E P ClearEmpty B D ClearEmpty PI D cl_ARRAY 20A DIM(100) D cl_Count 5I 0 D lookIndex s 5I 0 D i s 5I 0 /FREE lookIndex = %lookup('EMPTYEMPTY':cl_ARRAY); if lookIndex > 0; for i = lookIndex to cl_Count; cl_ARRAY(i) = cl_ARRAY(i+1); ENDFOR; cl_Count-=1; ENDIF; return; /END-FREE P ClearEmpty E

    The important piece of code is shown below.

    Code Block
    collapse true
    If BTNEXIT = *Off; If DragFromId = 'Grid1' And DragToId = 'Grid1'; Chain DragFromRN SFLA; RemoveItem(ArrayA : DragFromRN); InsertItem(ArrayA : DragToRN : FIELDA : CountA); ENDIF; If DragFromId = 'Grid1' And DragToId = 'Grid2'; Chain DragFromRN SFLA; RemoveItem(ArrayA : DragFromRN); InsertItem(ArrayB : DragToRN : FIELDA : CountB); ENDIF; If DragFromId = 'Grid2' And DragToId = 'Grid2'; Chain DragFromRN SFLB; RemoveItem(ArrayB : DragFromRN); InsertItem(ArrayB : DragToRN : FIELDB : CountB); ENDIF; If DragFromId = 'Grid2' And DragToId = 'Grid1'; Chain DragFromRN SFLB; RemoveItem(ArrayB : DragFromRN); InsertItem(ArrayA : DragToRN : FIELDB : CountA); ENDIF;

    Using the data taken from from DragFromId and  and DragToId, we can determine the subfile that the item was taken from, and where it was dropped. Then using the the RemoveItem() and  and InsertItem() sub  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

Allow Drag

...

Properties

...

...

Use Proxy

...

OnDragStart

...

Drop Targets

...

OnDragEnter

...

OnDragLeave

...

OnDrop

...

pui.dragDropInfo

Overview

pui.dragDropInfo is a global object containing information about the drag/drop operation. This object is available on the following events OnDrop, OnDragLeave, OnDragStart, and OnDragEnter.

Retrieving Data

You can retrieve data from the global object by placing a property value within the object. The object contains a number of properties, but the most useful are listed below.

For example:

pui.dragDropInfo["target record number"]

Useful Properties

dd element id - This property returns the element id of the selected subfile record.

dd record number - Returns the relative record number of the selected element to drag/drop.

target element id - This returns the target element id of the where the selection is to be dropped.

target record number - This returns the relative record number of where the selection is after it has been dropped.

Custom CSS Style

...

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:

Image RemovedImage Added

You can change the default style by adding a CSS rule into a custom style sheet under the sheet under the /www/profoundui/htdocs/profoundui/userdata/custom/css/ folder  folder (where where profoundui is the installation folder). This rule makes the drop target line red:

/* Set color of target line to be red, dashed, and 2px wide.*/
.grid-drop-target {
  border-top: 2px dashed red; 
}

Image RemovedImage Added

The width of the line is 2 pixels, and the line color is is #CCCCCC by default. If the grid's s border width property is set, then the border width overrides any custom CSS:

Image RemovedImage Added

If the grid's s border color property is set, then the border color overrides any custom CSS:

Image Removed

 Image Added