Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Excerpt | ||
---|---|---|
| ||
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:
|
|
|
|
|
How are Drag Types and Drop |
Targets Configured?To set up drag and drop on components, a
|
have
Any component which has an
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 |
|
For example, right-click on the grid and select Show the View Configuration
|
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
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
HTML Comment | ||
---|---|---|
| ||
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
- a grid backed by the Companies table
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
- Open the Company Approval Review screen screen by clicking on the Approvals button in the top menu
- Right-click on the Companies Pending Review grid and select
Insert excerpt _view_show_config _view_show_config nopanel true - Click the
Insert excerpt _property_tabs _property_tabs name action nopanel true - In the Action Settings section, click the
icon next toInsert excerpt _add_icon _add_icon nopanel true
to create a new drag type:Insert excerpt _drag_type _drag_type nopanel true - Name:
Company
- Click
Insert excerpt _save _save nopanel true - Attributes: select
Insert excerpt _add_icon _add_icon nopanel true - Name:
CompanyID
- Type:
Integer
- Name:
the Drag Type tabInsert excerpt _finish _finish nopanel true
- Name:
- A Drag Mappings section will become available in the Action Settings on the View
- Click the
buttonInsert excerpt _mappings_configure _mappings_configure nopanel true - Map across the CompanyID attribute from the Companies
to theInsert excerpt _action_view _action_view nopanel true Insert excerpt _drag_type _drag_type nopanel true - Click Confirm Mappings
the ViewInsert excerpt _finish _finish nopanel true
Drop Target Setup
- On the Company Approval Review screen
- Click on the area holding the icon
- Ensure the
for the area, OuterBorderTop, is selectedInsert excerpt _property_settings _property_settings nopanel true - Click the
Insert excerpt _property_tabs _property_tabs name action nopanel true - In the Drop Targets section, click the
icon to add a new drop target:Insert excerpt _add_icon _add_icon nopanel true - Name:
CompanyApproval
- Drag Type: Select the Company Drag Type you set up above
- Drop Action:
Actionflow
- Actionflow: click
to create a new ActionflowInsert excerpt _add_icon _add_icon nopanel true - Name:
Company Approval
- Name:
- Name:
Actionflow Setup
- Connect the input of the Company
Insert excerpt _drag_type _drag_type nopanel true - Map in the CompanyID attribute
- Create a
actionInsert excerpt _action_calculate _action_calculate nopanel true - Name:
Update Status and Audit
- Name:
- Add three Output Attributes:
- NewApprovedStatus: this should contain a string with the new new status
- NewUpdatedByName: this should contain details of the user making the change using the internal variable _user - see Internal Variables
- Review the existing Companies table data to see the formatting of the this attribute
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
- Connect the
to theInsert excerpt _input _input nopanel true
actionInsert excerpt _action_calculate _action_calculate nopanel true - Hover over the Calculate action and click, out
- Click anywhere on the canvas to create a new
actionInsert excerpt _action_save _action_save nopanel true - Name:
Save Company
- Type:
Update
- Table:
Companies
- Name:
- 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
- On Close and reopen the Company Approval Review screen,
the screenInsert excerpt _lock _lock nopanel true - Drag a company from the Companies Pending Review grid onto the Approve icon
- 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 icon as a Drop Target. Remember to change the Expression in the Output Attribute to "Rejected".