Guide

This exercise is designed to show how to create a display file capable of drag and drop.

Procedure

1. Open the Profound UI Visual Designer, start with a new display file and name the record format SFLCTL1.
2. Add an empty panel labeled Drag and Drop.
3. Add an exit button labeled "Exit" bound to an indicator named BTNEXIT.
4. Add two single column subfiles with output fields as shown below.
   
5. Set the id of the first subfile to Grid1 and the second subfile to Grid2
6. Set the record format name of the first subfile (Grid1) to SFLA and the second subfile (Grid2) to SFLB.
7. Add an output field to each subfile  bound to FIELDA and FIELDB respectively. These fields are 20A.
8. Bind an indicator named SFLCLR to the "clear subfile" property of both subfiles. (The same indicator can be used with both subfiles.)
9. For both subfiles, set the properties as shown:
   
10. Select the SFTCTL1 record format and bind the following fields to the properties shown:
    
11. Save the display file as DRAGD and compile it to your library.

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

     Expand source

           
    
         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.

     Expand source

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

This property determines if the element can be drag and dropped.

Promptable? DROPDOWN
Possible Values: True, False
Bindable? YES
Product: ProfoundUI

Use Proxy

This property determinse if a drag and drop proxy is created. If set to true, instead of dragging the element around, a proxy element is created and moved instead.

Promptable? DROPDOWN
Possible Values: True, False
Bindable? YES
Product: ProfoundUI

OnDragStart

Initiates a client-side script when the user first starts to drag the element. Information about the drag and drop operation is provided using the global pui.dragDropInfo object.

Promptable? YES
Possible Values: Any valid JavaScript code
Bindable? NO
Product: ProfoundUI

Drop Targets

Specifies a list of target id's, which identify where this element can be dropped.

Promptable? YES
Possible Values: Comma separated list of element id's
Bindable? YES
Product: ProfoundUI

OnDragEnter

Initiates a client-side script when the user drags an element over a validdrop target during a drag operation. Information about the drag and drop operation is provided using the global pui.dragDropInfo object.

Promptable? YES
Possible Values: Any valid JavaScript code
Bindable? NO
Product: ProfoundUI

OnDragLeave

Initiates aclient-side script when the user moves an element out of a valid drop target during a drag operation. Invormatio about the drag and drop operation is provided using the global pui.dragDropInfo object.

Promptable? YES
Possible Values: Any valid JavaScript code
Bindable? NO
Product: ProfoundUI

OnDrop

Initiates a client-side script when the mouse is released during a drag and drop operation. Information aobut the drag and drop operation is provided using the global pui.dragDropInfo object.

Promptable? YES
Possible Values: Any valid JavaScript code
Bindable? NO
Product: ProfoundUI

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

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 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 profoundui/userdata/custom/css/ folder (where profoundui is the installation folder). This rule makes the drop target line red:

.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: