Drag and Drop Configuration

Owned by Zoe Baldwin
Last updated: Sept 13, 2024
5 min read

What are Drag Types and Drop Targets?

Drag and drop actions allow users to click and drag an item from location to another within a screen. This allows users to intuitively interact with content, rearrange items, and trigger further actions by dropping onto a designated area. 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 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 Making Kanban Boards

How are Drag Types and Drop Targets Configured?

To set up drag and drop on components, a   Drag Type on the object you are dragging from and a   Drop Target on the object you are dropping onto is required. Components that can have   Drag Type are:

  • grids
  • cards

Any component which has an  Actions tab can be a Drop Target. The Drop Action (performed when the drop occurs) is configured in an Actionflow on the Drop Target.

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

  Drag Types and   Drop Targets are set on components on a screen.

Creating a Drag Type

  1. Right-click on the grid and select  Show the View Configuration on the component from which data will be dragged

  2. On the  Actions tab, in the Action Settings section, under Drag Type, select or create a drag type, e.g. Move Contact

  3. If creating a Drag Type, click the  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.  Apply and Close
  4. A Drag Mappings section will become available in the Action Settings
    1. A red plink indicates there are unmapped attributes
  5. Click the  Configure Mappings button
  6. Map across attributes from the table onto the   Drag Type attributes set above, to be used within the Actionflow

Components with a drag type can be dragged and dropped onto any component which has a drop target with a matching drag type.

Creating a Drop Target

  1. Click on the component where data will be dropped to open the  Properties
  2. On the  Actions tab, in the Drop Targets section, select or create a drop target, e.g. Add Contact
  3. If creating a Drop Target, click the  button
    1. Name: Enter a name for the drop target
    2. Drag Type: Select the drag type (e.g. Move Contact) that matches the drag type set on the component being dragged
    3. Drop Action: Select  Actionflow
    4. Actionflow: Select or create an Actionflow to run when a component with a matching drag type is dropped onto this component
    5.  Apply and Close  
  4. If creating an  Actionflow, select the   Drag Type as the an  input
  5. Map in the attribute(s) created on the   Drag Type
  6. 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

If you are completing this chapter as part of the Actionflow course and using a training instance, the data and screens have already been pre-loaded into the Actionflow Advanced Application. For this example, we'll be working on the Company Approval Review screen.

Example 1: Approve Company Using Drag and Drop

In this example, we'll configure company records on a grid to be draggable, and set up an area on a screen 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 by clicking on the Approvals button in the top menu
  2. Right-click on the Companies Pending Review grid and select  Show the View Configuration
  3. Click the  Actions tab
  4. In the Action Settings section, click the  icon next to   Drag Type to create a new drag type:
    1. Name: Company
    2. Click  Apply
    3. Attributes: select 
      1. Name: CompanyID
      2. Type: Integer
    4.  Apply and Close the Drag Type tab
  5. A Drag Mappings section will become available in the Action Settings on the View
  6. Click the  Configure Mappings button
  7. Map across the CompanyID attribute from the Companies   View to the   Drag Type
  8. Click Confirm Mappings
  9.  Apply and Close the View

Drop Target Setup

  1. On the Company Approval Review screen
  2. Click on the area holding the  icon
  3. Ensure the  Properties for the area, OuterBorderTop, is selected
  4. Click the  Actions tab
  5. In the Drop Targets section, click the  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  to create a new Actionflow
      1. Name: Company Approval

Actionflow Setup

  1. Connect the input of the Company   Drag Type
  2. Map in the CompanyID attribute 
  3. Create a  Calculate action
    1. Name: Update Status and Audit
  4. Add three Output Attributes:
    1. NewApprovedStatus: this should contain a string with the new status
    2. NewUpdatedByName: this should contain details of the user making the change using the internal variable _user - see Internal Variables
      1. Review the Companies table data to see the formatting of this attribute

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

       How?
      Name: NewApprovedStatus, Type: String
      "Approved"
      Name: NewUpdatedByName, Type: String
      _user.name + " (" + _user.fullUsername + ")"
      Name: NewUpdatedTime, Type: Datetime
      now()
       Checkpoint

  5. Connect the  input to the  Calculate action
  6. Hover over the Calculate action and click, out
  7. Click anywhere on the canvas to create a new  Save 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
 Checkpoint

Testing

  1. Close and reopen the Company Approval Review screen,  Lock 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 area holding the  icon as a Drop Target. Remember to change the Expression in the Output Attribute to "Rejected".