Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Drag Types and Drop Targets

Using drag and drop in an application allows users to click and drag an item from location to another within the user interface (UI). This feature is an intuiative way for users to interact with content, rearrange items, and trigger 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 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.

Drag and Drop: Screen Setup

  1. 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 types are grids and card components. Any component which has an actions tab can be a drop target. The action is configured on the drop target.

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

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

Creating a Drag Type

  1. Open the properties for the 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 Action Settings → Drag Type, select or create a drag type, e.g. Move Contact.

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

  4. 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 Action Settings → Drag Type Mappings, click  Add Mapping to open the mapping popup.
    6. 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.

Creating 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  Create New  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

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

Drag Type Setup

  1. Open the Company Approval Review screen
  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. Attributes: select 
      1. Name: CompanyID
      2. Type: Integer
    3.  Apply and Close
  5. A Drag Mappings section will become available in the Action Settings
  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 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

       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. On 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 Reject area as a Drop Target. Remember to change the Expression in the Output Attribute to "Rejected".

3.09 Loop Action Configuration

  • No labels