Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
nameanalysis
nopaneltrue



Overview

PhixFlow can display any Table data as a grid on GUI screens. This page will show you how to add data as a grid to any screen, using a worked example of creating a grid of employees from various companies.

Tip

This page refers to data that you can download from the PhixFlow Learning Centre.


Creating an Employees Grid

Once you have a screen created it is simple to add any data to it. To add data:

  1. Click 
    Insert excerpt
    _table_list
    _table_list
    nopaneltrue
     
  2. Drag and drop the desired table onto the screen. In this instance, the Employees table is dragged onto a screen.
  3. PhixFlow then asks how to display the data using:Image Modified
  4. Click Grid 
  5. The attribute picker should then appear. Drag and drop the attributes to display directly onto the grid.

Image Removed



Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone

Image Added

Marking Columns as Editable 
Anchor
Editable
Editable

By default all grid attributes are read only. Grids can be made editable by

  1. Click on the attribute column header to open its property editor
  2. Open Grid Settings
  3. Untick Read Only

    Info

    Strings, Bigstrings, Integers, Floats and Decimals allow users to type to change its value

    Dates and Datetimes have a date picker to change its value

    Display name attributes will automatically appear as a drop down. Selecting a different value, e.g. Company, will automatically update the ID stored in the foreign key attribute


Saving Data

To save changes to editable attributes

  1. Right click on a grid and Show the view configuration
  2. Open the Advanced section
  3. Tick Auto Save
    This will automatically save any changes made to the grid. An action can be added as a save action below this field if required.

Drop Downs

Any attribute can have a drop down added for a user to select a value. See View Attribute

Attribute Column Formatting 
Anchor
Formatting
Formatting

Attribute columns displayed on a grid can be styled to improve their display to users.

Labels

Some attributes may have technical names that make no sense to users on the front end. To relabel an Attribute

  1. Click on the attribute column header to open its properties
  2. Open the section Grid Settings
  3. Add a label to the field Label

It is possible to group attributes together using the label. In the Employees grid we can group and relabel the attributes first_name and last_name.

  1. To first_name add Name, First
  2. To last_name add Name, Last

Any attributes that are adjacent to each other with a matching label before a comma will group.

Setting Grid Colours 
Anchor
gridColours
gridColours

Table Attribute

It is possible to set the background colour for an attribute using a Formatting rule. See Applying Formatting Rules.

Table Row

It is also possible to change the colour for a selected row, this is set:

For your Application

  1. Go to Application Properties → Style Tab → Style Settings section → Row Selection Style
  2. Update the existing sytme by clicking on Row Selection Style hyperlink or add a new style. see Screen Styling.

Hiding Columns

Some columns might not make sense to users on the front end but are important for functionality, for example the primary key of the table. To hide a particular attribute

  1. Click on the attribute column header to open its properties
  2. Open the section Grid Settings
  3. Tick Always Hidden

It is also possible to conditionally hide a column. To conditionally hide a column

  1. Click on the attribute column header to open its properties
  2. Open the section Grid Settings
  3. Add an expression to Hide if evaluates to true, for example 

    Code Block
    _client.mobile

    This expression will hide a column if the screen is being used on a mobile device.

Column Widths

There are multiple ways to change the column widths. To change widths using the editor

  1. Click on the attribute column header to open its properties
  2. Open the section Grid Settings
  3. Add a number, e.g. 100 to Grid Default Width (pixels). The column will then always be 100px. Or,

  4. Add a number to Minimum Width. Adding 100 to Minimum Width will mean that the column will not be smaller than 100px wide, but will stretch to fill the available space on larger screens.

Alternatively, if grid columns are resized directly on the grid when the screen is unlocked and the screen is then locked again, PhixFlow will remember these widths and set the Grid Default Width (pixels) to that size.

Reordering columns

The order the attributes are displayed on a grid can be changed in the following ways

  • Changing the Order field on the attribute editor

  • Dragging and dropping an attribute to move it directly on the grid



  • Dragging and dropping an attribute to move it on the view editor

Number and Date Formats

Numbers and dates can be reformatted on the grid by adding a number or date format. For example, a company might prefer a date to be formatted as 01 Jan 2000 instead of 01/01/2000. To apply a number or date format

  1. Click on the attribute column header to open its properties
  2. Go to the section Stream Attribute Details under Basic Settings
  3. Select or add a format.

For more information see Date Time Format and Number Format

Formatting Rules

It is possible to add formatting rules to grid attributes to change their styles based on an expression. For example, the Companies table has a Status attribute which a user might want to be green if its value is Approved. To add this formatting

  1. Click on the attribute column header to open its properties
  2. Go to the section Formatting Rules
  3. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
  4. Add the expression

    Code Block
    _current.Status == "Approved"

    This will apply the attached style when the status is Approved.

  5. Add or select a style
  6. Click 
    Insert excerpt
    _save
    _save
    nopaneltrue

For more information on using expressions, see Expressions and Scripts.

More Information