Introduction

Actions allow users to interact with the screens and data on them. There are many ways actions can be triggered - in this chapter we will look at buttons, double-clicks and drag and drop.

Buttons

We have set up a number of buttons on this course. Actions are associated with a button in their Properties → Action tab. For more information on setting up actions see: Understanding Actionflows.

Double-Click

We can set a default action on a grid of data, or a card container, so that when a user double-clicks on a record the action is triggered. To apply an action to double-click on a grid:

1. Open your screen with the grid the action should be applied to. For this example, we will use the Companies List screen.
2. Right-click on the grid and select Show the View Configuration.
   1. Make sure the screen is unlocked.
3. In the properties click, the Actions tab. This is where we set up our double-click response.
   1. The Double Click Action is set to actionflow. This is what you will use unless you have been using an older version of PhixFlow.
   2. Actionflow, this is where we select the actionflow we want to use: 

      1. Insert excerpt
         _actionflow _actionflow nopanel true

          will open a list of available actions.

      2. Insert excerpt
         _addIcon _addIcon nopanel true

          enables you to add a new actionflow.
   3. For our example, we will not make any changes here.

Drag and Drop Concept

We can set up a screen so that items can be dragged and dropped on an area which then triggers an action. For example, we could drag an employee onto a company record and have PhixFlow run an actionflow which updates the company an employee works for.

Drag and Drop works by defining:

1. Drag Types, specifies the type of item being dragged. We specify attributes that are being dragged and map these to attributes in the data. 
2. Drop Handlers, specify which drag types can be dropped on a specific item. Drop handlers are responsible for triggering the action associated to the drag type and drop handler combination. Drag types are associated with specific drop handlers to ensure we only trigger the required actionflow. A drop handler can have multiple drag types associated with it.

The following image illustrates the configuration at a conceptual level:

Drag and Drop Setup

We will create a drag and drop configuration in our application where we drag an employee onto a company and this will trigger an actionflow that updates the employee with a new employer (company). As illustrated below:

1. Open the Companies List screen.

   1. Insert excerpt
      _unlock _unlock nopanel true

       it so it's editable.
2. Drag Type
   1. Click on the Employees Card Container.
   2. In the properties click the Actions tab.
   3. Next to Drag Type click 

      Insert excerpt
      _addIcon _addIcon nopanel true

      1. Name, EmployeeDrag.
      2. Click 

         Insert excerpt
         _save _save nopanel true

         . This is necessary as it creates the drag type so we we can add attributes.
      3. In the Attributes section click 

         Insert excerpt
         _addIcon _addIcon nopanel true

         .
         1. Name, EmployeeID
            1. This can be any name, it is just a placeholder to be mapped to. This allows us to reuse the drag type on another item and simply map the appropriate attribute into these placeholders.
         2. Type, Integer.

         3. Insert excerpt
            _save _save nopanel true

             your changes.
      4. Close the Drag Type repository pane.
   4. On the Employee Card Container, click the 

      Insert excerpt
      _mapping _mapping nopanel true

       button.
      1. Drag EmployeeID from the left onto EmployeeID on the right. This is associating the EmployeeID from our Employee card container with the EmployeeID attribute placeholder on our drag type. 
      2. Click Confirm Mappings.

   5. Insert excerpt
      _save _save nopanel true

       your changes.
   6. The setup should look like the following. Here the mapping screen has been left open for reference. Click on the image to enlarge it if necessary:
      1.  
   7. The drag type is set up.
3. Drop Target
   1. On the Companies grid, right-click and select Show the View Configuration.
      1. Action settings are placed on the view rather backing the grid.
   2. In the Actions tab click in the Drop Targets section:
      1. Name, EmployeeDrop
      2. Drag Type, EmployeeDrag
      3. Drop Action, Actionflow

      4. Insert excerpt
         _save _save nopanel true

          your changes.
      5. Actionflow, click 

         Insert excerpt
         _addIcon _addIcon nopanel true

         1. Name, Employee Changer.
            1. Note: The employee record we are dragging is the driving data so we send this in and then lookup the detail of the company we are dropping on.
         2. In the Connections section, click the Connect box.
         3. From the dialogue that pops up select EmployeeDrag and click Connect Inputs.
            1. 
         4. In the Mapping dialogue drag EmployeeID to the right.
            1. Actionflows are a topic in themselves and beyond the scope of this course. For more information on Actionflows see Understanding Actionflows.
         5. Click Confirm Mappings.
         6. Still in the connections, click 

            Insert excerpt
            _addIcon _addIcon nopanel true

            1. Name, Company.
            2. Type, Lookup.
            3. Click Create a Connection Point.
         7. From the dialogue that opens, click EmployeeDrop. This is the company record we are dropping on. This provides us access to its information in the lookup.
         8. Click Connect Input.
         9. The Mapping screen opens, drag CompanyID from the left (this is the data we are dropping on) to the area on the right to create an incoming attribute returned by the lookup.
            1. 
         10. Click Confirm Mappings.
         11. The correct data is now coming into the actionflow. Now we need to use it in the actionflow.
         12. From the Actionflow Toolbar, drag a Calculate action onto the actionflow.
             1. Name, CompanyData.
         13. Connect and the Input Connection Points to the Calculate action as illustrated here:
             1. 
         14. Click on the Calculate action, in the properties, in the Calculate Attributes section, click

             Insert excerpt
             _addIcon _addIcon nopanel true

             : 
             1. Name, NewCompanyID.
             2. Type, Integer.
             3. Expression, lu.CompanyID.
                1. This is referencing the attribute CompanyID coming in from the pipe called lu.

             4. Insert excerpt
                _save _save nopanel true

                 your changes.
             5. We will use this new CompanyID when we update the employee.
         15. From the Actionflow toolbar, drag a Save action onto the actionflow. Enter the following details and click Create Action:

             1. 

         16. Connect the Calculate action to the new Save action, and set up the mappings as follows, click the image to enlarge it:
             1. 
         17. Ensure all your property tabs have been saved.
4. Testing
   1. Close the Companies List screen and reopen it to refresh the drag and drop handlers.
   2. Switch to 

      Insert excerpt
      _app_mode _app_mode nopanel true

      .
   3. Now you will be able to drag employees onto a new company as illustrated here:
      1.