What is a For Each Action?

Image Removed

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 

   Insert excerpt
   _

1. drag_

1. type _

1. drag_

1. type nopanel true

1.  on the object you are dragging from and a 

   Insert excerpt
   _

1. drop_

1. target _

1. drop_

1. target nopanel true

Creating For Each Actions

The input expression provides the source of the data to be iterated over. Typically, this will be a simple expression pointing at an Input Attribute, using the syntax, Connector.AttributeName.

If an empty record set or empty list is provided then no output will be generated.

This field is mandatory (PhixFlow version 11.1 +).

// Receives a list of Invoice IDs, these are iterated over using

in.InvoiceID     

Attributes mapped into the For Each action will appear here. 

If adding a new input attribute, a Name and Type are required. See Understanding Data Types.

Attributes mapped out of the For Each action will appear here.

If adding a new output attribute, a Name, Type and Expression are required. This is a PhixScript expression. Values returned by the Input Expression are available in this expression as:

See also:

• Expression Basics
• Internal Variables
• Functions

Name: Invoices

Type: String 

Expression: _result.value

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

   Note
   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 

      Insert excerpt
      _mapping _mapping nopanel true

      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 

   Insert excerpt
   _new _new nopanel true

     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 For Each ExampleApproval Review screen containing:
  • an multi-line string field and Save button that will be used by the user to enter a list 
  • a string field that will be used to create a filter
  • a grid backed by the ForEachExample tablea 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 take a list of values inputted by a user and convert these into individual records.

Image Removed

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.

Image Added

Drag Type Setup

1. Open the Company For Each Example screenAdd an Approval Review screen
2. Right-click on the Companies Pending Review grid and select 

   Insert excerpt
   _view_show_actionflowconfig _view_actionflowshow_config nopanel true

    to the Save button
3. Configure the Input as the CompanyForEachExample form
4. Map the attribute Text into the Actionflow

Calculate Action - Convert List to Array

1. Click the 

   Insert excerpt
   _

1. property_

1. tabs _property_tabs name action

1. nopanel true

1. In the Action Settings section, click the 

   Insert excerpt
   _

1. add_

1. icon _

1. add_

1. icon nopanel true

1.  icon next to 

   Insert excerpt
   _

1. drag_type _drag_

1. type nopanel true

    to

1. Map across the Text attribute

1. create a new drag type:
   1. Name:

Calculate Action - Create Session ID (Optional)

1. 1. Company

1. 1. Attributes: select 

      Insert excerpt
      _

1. 1. add_

1. 1. icon _

1. 1. add_

1. 1. icon nopanel true

1. 1. 1. Name:

1. 1. 1. CompanyID
      2. Type:

1. 1. 1. Integer

   2. Insert excerpt
      _finish _finish nopanel true

For Each Action - Convert Array to Records

1. A Drag Mappings section will become available in the Action Settings
2. Click the 

   Insert excerpt
   _

1. mappings_

1. configure _

1. mappings_

1. configure nopanel true

1. Create a  button
2. Map across the CompanyID attribute from the Companies

   Insert excerpt
   _action_

   for_each

   view _action_

   for_each

   view nopanel true

    action 
   1. Name: Convert to Records
3. Connect it to the Calculate action and map across the Split attribute
4. On the For Each action, enter the following:
   1. Input Expression: in.Split
   2. Input Attributes: Split
   3. Create two Output Attributes: 
      1. Name: Name
         1. Type: String
         2. Expression: trim(_result.value)
            1. The trim function is used here to remove the whitespace after the comma separator in the list
            2. If this was not used and the list "one, two, three" was entered, the records "two" and "three" would be saved with prefixed whitespace
      2. Name: LastUpdated
         1. Type: Datetime
         2. Expression: now()
5.  to the 

   Insert excerpt
   _drag_type _drag_type nopanel true

6. Click Confirm Mappings

7. Insert excerpt
   _finish _finish nopanel true

Expand
title Checkpoint
Image Removed

Create a Sequence Number for UID (Optional)

Create a Sequence in your application to give each record a unique value. Alternatively, the UID attribute can be left unmapped and PhixFlow will automatically create a unique identifier.

1. Open the  the View

Drop Target Setup

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

   Insert excerpt
   _property_repositorysettings _repositoryproperty_settings nopanel true

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

   Insert excerpt
   _property_sequencestabs _sequencesproperty_tabs name action nopanel true

5.  option, then click In the Drop Targets section, click the 

   Insert excerpt
   _add_icon _add_icon nopanel true

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

      Insert excerpt
      _add_

   finish

   1. icon _

   finish

   1. add_icon nopanel true

Image Removed

Add the Sequence Number to the UID Attribute (Optional)

1. 1.  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_

1. calculate _action_

1. calculate nopanel true

    action

1. 1. Name: Update Status and Audit
2. 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?

Save Action 

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

Image Removed

1. 1. Image Added

      
      

2. Connect the 

   Insert excerpt
   _

1. input _

1. input nopanel true

    to

1. the 

   Insert excerpt
   _action_

1. calculate _action_

1. calculate nopanel true

    action

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

   Insert excerpt
   _

1. action_

1. save _

1. action_

1. save nopanel true

Image Removed

Output - Map SessionID Onto Screen (Optional) 

If you have created a SessionID attribute, an output will need to be created to map this value onto the SessionID String Field on the screen, so that it can be used for filtering.

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

Filter Setup (Optional)

Create a Default Filter that filters the view by the values in the SessionID field

Testing

1. On the Company For Each ExampleApproval Review screen, 

   Insert excerpt
   _lock _lock nopanel true

    the screen
2. Enter a list into the Text field, e.g. Extra Small, Small, Medium, Large, etc. and click Save
   1. Your list will be converted into individual records in the grid
3. Enter another list and you will see that the previous list disappears as the grid is being filtered by the SessionID 
4. Once you have confirmed your default filter is working, hide it 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".

Image Added

3.09 Loop Action Configuration