Grid Buttons

We can embed actions within a grid to perform specific activities, such as deleting the record or sending an email. For our example, we will enable users to click a button and make a call.

1. On the Companies grid click Telephone Button.
2. We will set Label to Call, as it will be clearer to our users.
3. Click the Action tab.
   1. Action Method, Actionflow.
   2. Actionflow, click .
   3. Name, CallCompany.
   4. Click Confirm.
   5. The actionflow will open. We will look at actionflows in more detail later in the course. Here we will set up a simple actionflow:
      1. Click on Connect, in the dialogue that opens click Companies. This tells PhixFlow we need data from the companies grid.
      2. Click Connect Input.
      3. In the mapping screen that opens, drag Number to the right-hand side and click Confirm Mappings, as illustrated below. This creates an input mapping attribute that the actionflow can use:
      4. 
      5. From the Actionflow toolbar add a Calculate action.
         1. Name, callDetails
         2. Click Create Action.
      6. Now we need to connect the Input Connection to the Calculate action. Click and hold on the input connection point and drag it over the Calculate as illustrated here:
      7. 
      8. Click on the pipe between the two items.
      9. The mapping screen appears, drag Number to the right. This will allow us to work with the incoming attributes within the calculate action node.
      10. Then click Confirm Mappings.
      11. Click on the Calculate action, and in its properties click add in the Calculate Attributes section.
          1. Name, CallNumber.
          2. Expression, "callto:" + in.Number
          3. Save your changes,  Apply and Close.
      12. From the Actionflow toolbar add an Open URL action.
          1. Name, Make Call
          2. Click Create Action.
      13. Connect the action. Hover over CallDelatils and click out, move your mouse over MakeCall and click, as illustrated here:
          1. 
      14. In the mapping screen that opens, drag CallNumber to URL.
      15. Click Confirm Mapping.
          1. To access the mappings at any point click the pipe connecting the two action nodes.
   6. Close the Actionflow.
4. On the view attribute TelephoneButton, we see the actionflow has been set.
5. It is recommended that an icon be set for the action button to indicate its purpose.
6. Create an Icon Style
   1. Name, TelephoneCall.
   2. Background Image, add the phone-call.svg icon from the zip downloaded earlier.
   3. Background Repeat, no-repeat.
   4. Background Position, center.
   5. Background Size, contain. This resizes the image to make it fit into the available space and is a useful CSS property.
   6. Then click  Apply.
   7. Finally,
      1. In the CSS Properties, click .
      2. CSS Tag, opacity.
      3. Value, 1
   8. Save all changes.
7. If you lock the screen, clicking the call button will open your computer's default call software.

Check Point

The screen should look similar to this:

In-Grid Editing

PhixFlow can be configured to allow users to make edits to records directly in a grid.

1. Open the View Configuration for the Companies grid.
   1. Right-click and select  Show the View Configuration.
2. On the  Actions tab, Action Settings section, toggle on  Auto Save.
   1. This will automatically save any changes made in the grid, however, it is possible to specify an action that goes beyond a simple save such as performing validation of input.
3. Select an Auto Save Action Method of  Actionflow.
4. Click  to open the list of available Actionflows, then drag and drop the Save Actionflow into the Auto Save Actionflow box
   1. This is the Actionflow that was created by PhixFlow in 7. Editing Content on a Screen - Part 1
5. On the Actionflow window, select Click to Connect and choose your Companies data
6. Map across the CompanyID attribute and close the Actionflow
7. On the View Configuration for the Companies grid, in the View Attributes section, double-click Web.
8. In the Grid Settings section, untick Read Only.
   1. This allows us to type into the field directly. 
   2. Relational attributes will appear as a drop down list. Adding non-primary table attributes from a related table onto the form will be added as Read-Only by default.
9. Save your changes.

Testing

Switch to Application Mode and double-click a cell in the Website column to add a website to a company. Note for a save to occur the user must click out of the cell they updated.