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 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 setup a simple actionflow:
      1. Click on Connect, in the dialog that opens click Companies. This tell 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:
      4. 
      5. From the Actionflow toolbar add a Calculate node. We will use this to construct the action details.
      6. Name it, callDetails, and click Create Action.
      7. Now we need to connect the Input Connection to the Calculate node. Click and hold on the input connection point and drag it over the calculate node:
      8. 
      9. Click on the pipe between the two items.
      10. In the mapping screen, drag Number to the right. This will allow us to work with the value in the calculate node.
      11. Click n the Calculate node, 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 node.
          1. Name it, Make Call, and click Create Action.
      13. Connect the nodes. Hover over CallDelatils and click out, move your mouse over MakeCall and click.
          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 pipe connecting the two 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 Action 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. Finally,
      1. In the CSS Properties, click .
      2. CSS Tag, opacity.
      3. Value, 1
   7. Save all changes.

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. In the Advanced section, tick Auto Save.
   1. This will automatically save any changes, however it is possible to specify an action that goes beyond a save such as performing validation.
3. In the View Attributes section, double-click Web.
4. In the Grid Settings section, untick Read Only.
5. Save your changes.

Testing

Switch to app mode and add a website to a company. Note for a save to occur the cell must be click out of.

Adding a Chart

1. Simple Setup
2. Colour Maps
3. Link to setting up more chart types.

Finding Layouts and Components

It can be very useful to find a layout, component or container. There are two ways to do this:

Using Layers

The Layers pane is expandable from the left of the screen canvas. Select an item:

• on the canvas to highlight it in the Layers pane
• in the Layouts pane to highlight it on the canvas.

If the layer section is not visible click  Show/Hide Layer Panel. 

Using Find in Repository

Right-click any item on an unlocked screen and select  Find in Repository Alternatively, to search the repository, expand the Components section and navigate to the component. The position of the components on a screen is reflected in their order and nesting in the repository list. 

Styles 

explanation

Style Hierarchy

1. Application Styles
2. Shared Style
3. Local Styles
4. Formatting Rules
5. Overriding Styles Best Practice
6. Clearing Styles

Creating Screens from the Home page

1. Options
2. Templates
   1. Complete
   2. Blank
3. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
4. Creating from an ERD
5. Creating from a Workflow
   1. Available Unused Actions.