What are Drag Types and Drop Targets?

Using drag Drag and drop in an application allows actions allow users to click and drag an item from location to another within the user interface (UI)a screen. This feature is an intuiative way for allows users to intuitively interact with content, rearrange items, and trigger further actions by dropping the oitems onto a designated area. enahnce user experience and make the application more engaging and easier to use. 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 a 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 - see Making Kanban Boards.

How are Drag Types and Drop

Targets Configured?

To set up drag and drop on components, a 

have 

• grids
• cards

Any component which has an

Image Added

For example, to assign a new company to an employee, a

user creates two grids on a screen

. The

employee and company table have a relationship and are linked by a 

CompanyIDfield. The

employee can be dragged and dropped onto a company to update CompanyID

attribute for the employee. 

Creating Drag and Drop Actions

Creating a Drag Type

1. Open the properties for the view Right-click on the grid and select

   Insert excerpt
   _view_show_config _view_show_config nopanel true

    on the component 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 Action Settings →

4. On the

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

   , in the Action Settings section, under 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.

   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

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

6. Add an attribute and name this ContactID 
7. Change the Type to Integer
8. Save the attribute
In Action Settings → Drag Type Mappings, click 
9. If creating a Drag Type, click the

   Insert excerpt
   _add_icon _add_icon nopanel true

    button
   1. Name: Enter a name for the drag type
   2. Attributes: create the attributes to be used in the Actionflow, e.g. CompanyID

   3. Insert excerpt
      _finish _finish nopanel true

10. A Drag Mappings section will become available in the Action Settings
11. Click the 

    Insert excerpt
    _

    mapping

    mappings_configure _mappings_

    mapping

    configure nopanel true

    to open the mapping popup. button
12. Map the ContactID from the Grid to ContactID on the Drag Typeacross attributes from the table onto the 

    Insert excerpt
    _drag_type _drag_type nopanel true

    attributes set above, to be used within the Actionflow

Components with a drag type can 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.

Creating a Drop Target

1. Open the properties for the component where the Click on the component where 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 to open the

   Insert excerpt
   _property_settings _property_settings nopanel true

4. On the

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

   , in the Drop Targets section, select or create a drop target, e.g. Add Contact
5. If creating a Drop Target, click the

   Insert excerpt
   _add_

   new

   icon _

   new

   add_icon nopanel true

     to create a new one.
6. Provide a descriptive name, such as Move Contact to New Company
 button
1. Name: Enter a name for the drop target
2. Drag Type: Select the drag type (e.g. Move Contact) which  that matches the drag type of set on the component being dragged.Select the action to run when something of the same
3. Drop Action: Select

   Insert excerpt
   _actionflow _actionflow nopanel true

4. Actionflow: Select or create an Actionflow to run when a component with a matching drag type is dropped onto this component. 
5. If setting up a table-action see Using the Drag Type and Drop Target in a Record-Action below.
6. If setting up an actionflow, see Using the Drag Type and Drop Target in an Actionflow below

7. Insert excerpt
   _finish _finish nopanel true

     
7. If creating an 

   Insert excerpt
   _actionflow _actionflow nopanel true

   , select the

   Insert excerpt
   _drag_type _drag_type nopanel true

   as the an

   Insert excerpt
   _input _input nopanel true

8. Map in the attribute(s) created on the 

   Insert excerpt
   _drag_type _drag_type nopanel true

9. Then configure your Actionflow as required, e.g. delete a record, move that contact to a company, change the state of the record, etc.

Worked Examples

Here's a worked example using the Company Data (available from the Learning Centre).

In this example, we are using:  

• A Company Approval Review screen containing:
  • a grid backed by the Companies table
    • with a Background Filter to only companies where their Status does not equal Approved or Rejected
  • two areas containing Approve and Reject icons  - this screen was created using the Multi-Tile  template

Example 1: Approve Company Using Drag and Drop

In this example, we'll configure company records on a grid to be draggable, and setup set up an area on a screen to as a drop target to receive the record(s). When a company is dropped in the area, its Status will be updated to Approved. We'll add some additional processing to our Actionflow to update the audit details on the record, showing who made the change, along with the date and time.

Drag Type Setup

1. Open the Company Approval Review screen
2. Right-click on the Companies Pending Review grid and select 

   Insert excerpt
   _view_show_config _view_show_config nopanel true

3. Click the 

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

4. In the Action Settings section, click the 

   Insert excerpt
   _add_icon _add_icon nopanel true

    icon next to 

   Insert excerpt
   _drag_type _drag_type nopanel true

    to create a new drag type:
   1. Name: Company
   2. Attributes: select 

      Insert excerpt
      _add_icon _add_icon nopanel true

      1. Name: CompanyID
      2. Type: Integer

   3. Insert excerpt
      _finish _finish nopanel true

5. A Drag Mappings section will become available in the Action Settings
6. Click the 

   Insert excerpt
   _mappings_configure _mappings_configure nopanel true

    button
7. Map across the CompanyID attribute from the Companies

   Insert excerpt
   _action_view _action_view nopanel true

    to the 

   Insert excerpt
   _drag_type _drag_type nopanel true

8. Click Confirm Mappings

9. Insert excerpt
   _finish _finish nopanel true

    the View

Drop Target Setup

1. On the Company Approval Review screen
2. Click on the area holding the  icon
3. Ensure the

   Insert excerpt
   _property_settings _property_settings nopanel true

    for the area, OuterBorderTop, is selected
4. Click the 

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

5. In the Drop Targets section, click the 

   Insert excerpt
   _add_icon _add_icon nopanel true

    icon to add a new drop target:
   1. Name: CompanyApproval
   2. Drag Type: Select the Company Drag Type you set up above
   3. Drop Action: Actionflow
   4. Actionflow: click 

      Insert excerpt
      _add_icon _add_icon nopanel true

       to create a new Actionflow
      1. Name: Company Approval

Actionflow Setup

1. Connect the input of the Company 

   Insert excerpt
   _drag_type _drag_type nopanel true

2. Map in the CompanyID attribute 
3. Create a 

   Insert excerpt
   _action_calculate _action_calculate nopanel true

    action
   1. Name: Update Status and Audit
4. Add three Output Attributes:
   1. NewApprovedStatus: this should contain the new 
   2. NewUpdatedByName: this should contain details of the user making the change using the internal variable _user - see Internal Variables
      1. Review the existing table data to see the formatting of the attribute

   3. NewUpdatedByTime: this should contain the date and time the user updates the record
      
      

      Expand
      title How?
      Code Block theme Emacs title Name: NewApprovedStatus, Type: String "Approved" Code Block theme Emacs title Name: NewUpdatedByName, Type: String _user.name + " (" + _user.fullUsername + ")" Code Block theme Emacs title Name: NewUpdatedTime, Type: Datetime now()

      
      

      Expand
      title Checkpoint

      
      

5. Connect the 

   Insert excerpt
   _input _input nopanel true

    to the 

   Insert excerpt
   _action_calculate _action_calculate nopanel true

    action
6. Hover over the Calculate action and click, out
7. Click anywhere on the canvas to create a new 

   Insert excerpt
   _action_save _action_save nopanel true

    action
   1. Name: Save Company
   2. Type: Update
   3. Table: Companies
8. Map across the three attributes created by the Calculate action onto their relevant attributes in the Companies table, and the CompanyID from the input

Testing

1. On the Company Approval Review screen, 

   Insert excerpt
   _lock _lock nopanel true

    the screen
2. Drag a company from the Companies Pending Review grid onto the Approve icon
   1. The company should be removed from this screen and instead appear on the Companies screen

Example 2: Reject Company Using Drag and Drop (Optional)

Repeat the steps above to set up the Reject area holding the Image Added icon as a Drop Target. Remember to change the Expression in the Output Attribute to "Rejected".

3.09 Loop Action ConfigurationImage Added