Overview

In a PhixFlow application, you can configure drag-and-drop actions using actionflows and table actions. Some examples of drag and drop actions are:

• Dragging a record from a grid onto a delete area to remove it.
• Dragging a contact from one grid onto a specific company on a company table to move that contact to that company.
• Dragging items into different sections on a Kanban board to change the state of the record. See Making Kanban Boards.

Setting up Drag and Drop

To set up drag and drop on components, a 

For example, to assign a new company to a contact a user creates two grids on a screen

Image Added

The contact and company table have a relationship and linked by a CompanyID field. The contact can be dragged and dropped onto a company to update CompanyID. The contact is the Drag Type and the company grid is the Drop Target. 

Defining a Drag Type

1. Open the properties for the

1. view from which data will be dragged.
   For example, right-click on the grid and select Show the View Configuration
2. Navigate to the Actions tab

3. In

1. Action Settings → Drag Type, select or create a drag type, e.g. Move Contact.

   Note
   This drag type needs to match the drag type defined on the drop target.

   
   

2. If using an actionflow, it is essential to add Drag Mappings to attributes from the source table to attributes used within the actionflow. If using table-actions, skip this step. In this example, we need to know the ID of the contact to be updated. To add Drag Mappings

   1. Open the editor for the Drag Type by clicking on the field label

   2. Add an attribute and name this ContactID 
   3. Change the Type to Integer
   4. Save the attribute
   5. In

1. 1. Action Settings → Drag Type Mappings, click 

      Insert excerpt
      _mapping _mapping nopanel true

      to open the mapping popup.
   2. Map the ContactID from the Grid to ContactID on the Drag Type
      

Components with a drag type can be dragged and dropped onto any component which has a drop target with a matching drag type. It is on the drop target where the action is configured.

Drag Type Properties

Defining a Drop Target

1. Open the properties for the component where the data will be dropped. In the above example, this would be the Company grid.
2. Navigate to the Actions tab.
3. In Drop Targets,  click 

   Insert excerpt
   _new _new nopanel true

     to create a new one.
   1. Provide a descriptive name, such as Move Contact to New Company
   2. Select the drag type (e.g. Move Contact) which matches the drag type of the component being dragged.
   3. Select the action to run when something of the same drag type is dropped onto this component. 
   4. If setting up a table-action see Using the Drag Type and Drop Target in a Record-Action below.
   5. If setting up an actionflow, see Using the Drag Type and Drop Target in an Actionflow below

Drop Target Properties

Using the Drag Type and Drop Target in an Actionflow

Drag Types and Drop Targets can be used as inputs into an actionflow. To configure an actionflow to move a contact to a new company

1. Click Connect under Connections on the actionflow to create a new input
   1. Select the Drag Type (e.g. Move Contact). This represents the Contact that is being dragged and the record that needs to be updated. This is what is driving the actionflow.
   2. Map the Drag Type attribute (e.g. ContactID) to the interface of the actionflow.
2. Click Add under Connections on the actionflow to create a new connection for the Drop Target. The actionflow needs to lookup the new CompanyID from the drop target.
   1. Name the connection point lu
   2. Select a Lookup connection. To learn more about lookups,

1. 1. see Using Lookups in Actionflows.
   2. Click Create Connection Point
   3. Select the Drop Target (e.g. Update Company). This represents the Company that is being dropped onto.
   4. Map the required attributes to the interface of the actionflow. In this example, only CompanyID is required.
2. Create a 

   Insert excerpt
   _actionflow_calculate _actionflow_calculate nopanel true

    node by dragging and dropping from the toolbar.
   1. Name this Move Contact
   2. Connect the calculate to the input, in, of the actionflow by dragging from in to Move Contact.
      1. Map ContactID to the calculate node
   3. Connect the calculate to the lookup, lu, of the actionflow by dragging from lu to Move Contact.
      1. Click Create Lookup
      2. Name the lookup lu
      3. Map CompanyID to the calculate node
3. Open the editor for the 

   Insert excerpt
   _actionflow_calculate _actionflow_calculate nopanel true

    by clicking on the node.
4. Add a calculate attribute
   1. Name NewCompanyID
   2. Type String
   3. Order 1

   4. Expression

      Code Block
      lu.CompanyID

      
      

5. Create a 

   Insert excerpt
   _action_save _action_save nopanel true

    node by dragging and dropping from the toolbar.
   1. Name this Save Contact
   2. Select the Contact table
6. Open the editor for the 

   Insert excerpt
   _action_save _action_save nopanel true

    node.
   1. Click 

      Insert excerpt
      _attributes _attributes nopanel true

       to open the attribute picker
   2. Drag and drop the CompanyID onto the Save Attributes. The ContactID (primary key) of the table should be added by default.
7. Connect the 

   Insert excerpt
   _actionflow_calculate _actionflow_calculate nopanel true

    to the 

   Insert excerpt
   _action_save _action_save nopanel true

   1. Map ContactID to ContactID
   2. Map NewCompanyID to CompanyID

The actionflow is now configured.

Using the Drag Type and Drop Target in a Record-Action

If using a table-action on the drop target you can use the following to define the data.

•  Record-Action → Basic Settings → Filter Type options:
  • Dragged Items defines what data is expected from a dragged
  • Drop Target Items defines what to do with the data.

In addition, you can use the following variables in context parameters and record-action attribute expressions:

• _dragSource  In a drag action, all information from the source is passed to the drop target. Use this variable to select the specific information required by the target.
• _dropTarget specify the location where data can be dropped.
• _dropPosition specify drop target co-ordinate values.

Learn More

• Understanding Actionflows
• Using Table-Actions
• View

For links to all pages in this topic, see Connecting Events to Actions