Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
nameactionflow
nopaneltrue


Excerpt
nameDragDrop

Image Added 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 
.
Drag

How are Drag Types and Drop

: Screen Setup

Targets Configured?

To set up drag and drop on components, a 

Insert excerpt
_drag_type
_drag_type
nopaneltrue
 on the object you are dragging from and a 
Insert excerpt
_drop_target
_drop_target
nopaneltrue
 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.

have 

Insert excerpt
_drag_type
_drag_type
nopaneltrue
are:

  • grids
  • cards

Any component which has an

Insert excerpt
_property_tabs
_property_tabs
nameaction
nopaneltrue
 can be a Drop Target. The Drop Action (performed when the drop occurs) is configured in an Actionflow on the Drop Target.

Image Added

For example, to assign a new company to

a contact

an employee, a user creates two grids on a screen

The

contact

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

CompanyID 

CompanyIDfield. The

contact

employee 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

attribute for the employee

Creating Drag and Drop Actions

Insert excerpt
_drag_type
_drag_type
nopaneltrue
s and 
Insert excerpt
_drop_target
_drop_target
nopaneltrue
s are set on components on a screen.

Creating a Drag Type

Open the properties for the view 
  1. Right-click on the grid and select
    Insert excerpt
    _view_show_config
    _view_show_config
    nopaneltrue
     on the component from which data will be dragged
.
For example, right-click on the grid and select Show the View Configuration
  • Navigate to the Actions tab
  • In Action Settings →
    1. On the

      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
      , 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

  • Open the editor for the Drag Type by clicking on the field label

  • Add an attribute and name this ContactID 
  • Change the Type to Integer
  • Save the attribute
  • In Action Settings → Drag Type Mappings, click 
    1. If creating a Drag Type, click the
      Insert excerpt
      _add_icon
      _add_icon
      nopaneltrue
       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
        nopaneltrue
    2. A Drag Mappings section will become available in the Action Settings
      1. A red plink indicates there are unmapped attributes
    3. Click the 
      Insert excerpt
      _
    mapping
    1. mappings_configure
      _mappings_
    mapping
    1. configure
      nopaneltrue
    to open the mapping popup.
    1.  button
    2. Map
    the ContactID from the Grid to ContactID on the Drag Type
    1. across attributes from the table onto the 
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
      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

    Open the properties for the component where the
    1. Click on the component where data will be dropped
    . In the above example, this would be the Company grid.
  • Navigate to the Actions tab.
  • In Drop Targets click 
    1. to open the
      Insert excerpt
      _property_settings
      _property_settings
      nopaneltrue
    2. On the
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
      , i
      n the Drop Targets section, select or create a drop target, e.g. Add Contact
    3. If creating a Drop Target, click the
      Insert excerpt
      _add_
    new
    1. icon
      _
    new
    1. add_icon
      nopaneltrue
      to create a new one.
  • Provide a descriptive name, such as Move Contact to New Company
    1.  button
      1. Name: Enter a name for the drop target
      2. Drag Type: Select the drag type (e.g. Move Contact)
     which
      1.  that matches the drag type
    of
      1. set on the component being dragged
    .Select the action to run when something of the same
      1. Drop Action: Select
        Insert excerpt
        _actionflow
        _actionflow
        nopaneltrue
      2. Actionflow: Select or create an Actionflow to run when a component with a matching drag type is dropped onto this component
  • If setting up a table-action see Using the Drag Type and Drop Target in a Record-Action below.
  • If setting up an actionflow, see Using the Drag Type and Drop Target in an Actionflow below
      1. Insert excerpt
        _finish
        _finish
        nopaneltrue
          
    1. If creating an 
      Insert excerpt
      _actionflow
      _actionflow
      nopaneltrue
      , select the
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
      as the an
      Insert excerpt
      _input
      _input
      nopaneltrue
    2. Map in the attribute(s) created on the 
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
    3. Then configure your Actionflow as required, e.g. delete a record, move that contact to a company, change the state of the record, etc.


    HTML Comment
    hiddentrue

    Drag Types and Drop Targets Properties

    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
    Tip

    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 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 screen by clicking on the Approvals button in the top menu
    2. Right-click on the Companies Pending Review grid and select 
      Insert excerpt
      _view_show_config
      _view_show_config
      nopaneltrue
    3. Click the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
    4. In the Action Settings section, click the 
      Insert excerpt
      _add_icon
      _add_icon
      nopaneltrue
       icon next to 
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
       to create a new drag type:
      1. Name: Company
      2. Click 
        Insert excerpt
        _save
        _save
        nopaneltrue
      3. Attributes: select 
        Insert excerpt
        _add_icon
        _add_icon
        nopaneltrue
        1. Name: CompanyID
        2. Type: Integer
      4. Insert excerpt
        _finish
        _finish
        nopaneltrue
         the Drag Type tab
    5. A Drag Mappings section will become available in the Action Settings on the View
    6. Click the 
      Insert excerpt
      _mappings_configure
      _mappings_configure
      nopaneltrue
       button
    7. Map across the CompanyID attribute from the Companies
      Insert excerpt
      _action_view
      _action_view
      nopaneltrue
       to the 
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
    8. Click Confirm Mappings
    9. Insert excerpt
      _finish
      _finish
      nopaneltrue
       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
      nopaneltrue
       for the area, OuterBorderTop, is selected
    4. Click the 
      Insert excerpt
      _property_tabs
      _property_tabs
      nameaction
      nopaneltrue
    5. In the Drop Targets section, click the 
      Insert excerpt
      _add_icon
      _add_icon
      nopaneltrue
       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
        nopaneltrue
         to create a new Actionflow
        1. Name: Company Approval

    Actionflow Setup

    1. Connect the input of the Company 
      Insert excerpt
      _drag_type
      _drag_type
      nopaneltrue
    2. Map in the CompanyID attribute 
    3. Create a 
      Insert excerpt
      _action_calculate
      _action_calculate
      nopaneltrue
       action
      1. Name: Update Status and Audit
    4. Add three Output Attributes:
      1. NewApprovedStatus: this should contain a string with the new 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 existing Companies table data to see the formatting of the this attribute
      3. NewUpdatedByTime: this should contain the date and time the user updates the record

        Expand
        titleHow?


        Code Block
        themeEmacs
        titleName: NewApprovedStatus, Type: String
        "Approved"


        Code Block
        themeEmacs
        titleName: NewUpdatedByName, Type: String
        _user.name + " (" + _user.fullUsername + ")"


        Code Block
        themeEmacs
        titleName: NewUpdatedTime, Type: Datetime
        now()
        Expand
        title



        Checkpoint
        Image Modified

    5. Connect the 
      Insert excerpt
      _input
      _input
      nopaneltrue
       to the 
      Insert excerpt
      _action_calculate
      _action_calculate
      nopaneltrue
       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
      nopaneltrue
       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
    Expandtitle

    Checkpoint

    Image Modified

    Testing

    1. On Close and reopen the Company Approval Review screen, 
      Insert excerpt
      _lock
      _lock
      nopaneltrue
       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