Field drag-and-drop examples

To allow users to drag and drop data between character fields

This procedure describes how to allow users to copy data between two character fields: Bill To and Ship To.

1. Create two character fields:
   • Bill To
   • Ship To
2. Set properties for fields as follows:
   • For the Bill To field, set the Draggable property to True.
   • For the Ship To field, set the Droppable property to True.
3. Create an active link that copies the data to the drop target when the mouse button is released.
   1. In the Execution Options panel, enter the Ship To field in the Field field.
   2. Select the Drop execution option.

   3. Create a Set Fields active link that sets the Ship To field to contain the contents of the Bill To field.
      The Value of the Ship To field should be $Bill To$.
      Optionally, you can create an active link that responds to a Drop event of a drop target field and performs a Set Fields action:

      $PROCESS$ Application-Copy-Field-Value $DROPTGTFIELDID$ $DRAGSRCFIELDID$

      This active link is written once per drop target field and will accommodate any number of drag source data fields. The developer avoids having to write one active link per drag source field to copy data to the drop target field.
      For more information, see Process-commands.

      Tip

      To move instead of copy the data, create another Set Fields action where the Bill To field is set to NULL when the drop action occurs.

To allow users to drag and drop data between table fields

This procedure describes how to allow users to copy data between two table fields. For example, a table called "Current Inventory" includes a list of inventory items, and a manager needs to remove an item that is broken. With the drag-and-drop function implemented, the manager simply drags the item from the Current Inventory table to a table called "Remove From Inventory." During the drag sequence, a drag proxy ( ) appears and displays the number of items being dragged. A label (such as "items selected") can appear next to the number. To configure the label that appears in the drag proxy, enter text in brackets ([ ]) in the Label property for the table field. You can enter one, two, or no labels, as described in the following procedure.

1. In the form with the two table fields you want to use in the drag-and-drop sequence, set the Draggable and Droppable field properties for the table fields.

2. Set the Row Label and Row Label Plural properties for the table whose rows will be dragged.

   Field property	Description	What to enter
   Row Label	Configures the drag proxy's label when one row is selected. Enter {0} for the count, and include any text before or after {0}.	labelText{0} labelText For example:{0}item selected Using this example,  appears when the user drags over a valid drop target.  appears on an invalid drop target.
   Row Label Plural	Configures the drag proxy's label when more than one row is selected. Enter {0} for the count, and include any text before or after {0}.	labelText{0} labelText For example:{0}items selected Using this example,  appears when three rows are selected.

   If you do not enter labels, only an icon appears (for example, ).

3. Create an active link with the following actions that occur when the Drop execution option occurs on the table:

   • Run Process — Use the PERFORM-ACTION-TABLE-ADD-ROW command to add a row to the table that will be dragged to.
     For example, if the table's field ID is 536870919, then the command would look like this:

     PERFORM-ACTION-TABLE-ADD-ROW 536870919
   • Set Fields — Set the values of the cells in the new row. This means setting the value for each column in the drop target table to the value of each column field in the row being dragged.
     The following figure shows an example of the Column fields being set to the value of the Inventory ID, Description, and Name column fields being dragged. 
     
     Setting the values for columns
     

To dynamically set a field so that it is not droppable

If you create more than one set of draggable and droppable fields, when a user drags on a field, all of the droppable fields are highlighted. Instead, only the target field should be highlighted. To ensure that only the intended droppable field is highlighted, use the Change Field action to dynamically set the intended droppable field and disable to other droppable fields. For example, the Bill To and Ship To fields are one set of draggable and droppable fields on the Order Entry form. The Item Number Table and the Order List Table comprise another set. The following example explains how to dynamically set the Order List Table so that it is not highlighted when the Bill To field is dragged.

1. Create a new active link.
2. Select the associated form (in this example, Order Entry).
3. On the Execution Options panel, select the field that will be dragged.
   In this example, the field is Bill To.
4. Select Drag.
5. Create a Change Field action.
   1. Right-click on the If Actions panel, and select Add Action > Change Field.
   2. Select the field that should be droppable when the draggable field is dragged.
      In this example, the field is Ship To.
   3. From the Field Drop list, select Enable.
6. Create another Change Field action.
   1. Right-click on the If Actions panel, and select Add Action > Change Field.
   2. Select the field that should not be droppable when the draggable field is dragged.
      In this example, the field is Order List Table should not be droppable.
   3. From the Field Drop list, select Disable.
7. Save the active link.