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 it will be clearer to our users.
3. Click the Action tab.
   1. Action Method, Actionflow.
   2. Actionflow, click 

      Insert excerpt
      _addIcon _addIcon nopanel true

      .
   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 set up a simple actionflow:
      1. Click on Connect, in the dialog dialogue that opens click Companies. This tell 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 node. We will use this to construct the action details action.
         1. Name
         it
         1. , callDetails
         , and click
         2. Click Create Action.
      6. Now we need to connect the Input Connection to the Calculate node action. Click and hold on the input connection point and drag it over the calculate nodeCalculate as illustrated here:
      7. 
      8. Click on the pipe between the two items.
      9. In the The mapping screen appears, drag Number to the right. This will allow us to work with the value in incoming attributes within the calculate action node.
      10. Then click Confirm Mappings.
      11. Click n on the Calculate nodeaction, and in its properties click add in the Calculate Attributes section.
          1. Name, CallNumber.
          2. Expression, "callto:" + in.Number
          3. Save your changes, 

             Insert excerpt
             _finish _finish nopanel true

             .
      12. From the Actionflow toolbar add an Open URL node action.
          1. Name it, Make Call, and click
          2. Click Create Action.
      13. Connect the nodesaction. Hover over CallDelatils and click out, move your mouse over MakeCall and click., as illustrated here:
          1. Image Modified
      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  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  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 

      Insert excerpt
      _save _save nopanel true

      .
   7. Finally,
      1. In the CSS Properties, click 

         Insert excerpt
         _addIcon _addIcon nopanel true

         .
      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.
   In the Advanced section, tick

   1. Insert excerpt
      _view_show_config _view_show_config nopanel true

      .
2. On the

   Insert excerpt
   _property_tabs _property_tabs name action nopanel true

   , Action Settings section, toggle on 

   Insert excerpt
   _toggle_on _toggle_on nopanel true

    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.
   In
3. Click on the

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    and in the View Attributes section, double-click Web.
4. In the Grid Settings section, untick Read Only.
   1. 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 AnchorformBuildingFindComponentParentformBuildingFindComponentParent

   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  Insert excerpt_layer_slider_layer_slidernopaneltrue. 

   Using Find in Repository

   Right-click any item on an unlocked screen and select
   1. 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.
   2. Save your changes.

   Insert excerpt
   Creating a Grid Creating a Grid name autosave nopanel true

   Testing

   Switch to

   Insert excerpt
   _

   repository

   app_

   find

   mode _

   repository

   app_

   find

   mode nopanel true

    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. 

   Image Removed

   Tip
   To check whether a component is shared with multiple applications, open its properties and check the Parent Details section, which names the application or package to which the component belongs. For example a component that is shared between several applications has a package as its parent; see Package.

   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

5. Options
6. Templates
   1. Complete
   2. Blank
7. Screen Options
   1. Floating
   2. Size
   3. Open Maximised
8. Creating from an ERD
Creating from a WorkflowAvailable Unused Actions

 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.