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 This page is for application designers who want to display a grid of data on a screen.

Overview

You can add a grid to a screen to display table data. The examples on this page refer to data for employees from various companies.

Creating an Employees Grid

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

Creating a Grid

On a screen canvas, to add a grid to display data:

1. In the screen toolbar, click 

   Insert excerpt
   _table_list _table_list nopanel true

    
2. Drag a table from the list and drop the desired table it onto the screen . In this instance, canvas.
   This example uses the Employees table is dragged onto a screenavailable from our Learning Centre.
3. PhixFlow then asks prompts you to choose how to display the data using:Image Removed
4. Click Grid 
5. The attribute picker should then appear. Drag and drop the attributes to display directly onto the grid.

Image Removed

1. 
   Image Added
   Click 

   Insert excerpt
   _grid _grid nopanel true

   . PhixFlow adds an empty grid to the canvas.
2. PhixFlow displays the Available Attributes dialogue, as shown in the animation below.
   1. Select attributes and drag them onto the empty grid. PhixFlow adds the attributes as columns and populates the table with the records in the table.
   2. Click on the image below to see a larger version:

Image Added

The appearance of the grid is set in the application properties →

Marking Columns as Editable 

Anchor
Editable Editable

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

PhixFlow assumes that the data in a grid should not be editable by the application user, so sets the grid attributes to be read-only. If you want the application users to be able to edit the data in a grid:

1. On the grid, click on the attribute column header to open its property editor
2. Open Grid Settings

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 columns displayed on a grid can be styled to improve their display to users.

Labels

1. properties; see View Attribute.

2. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings, untick Read Only.

The way an application user changes a cell value in a grid depends on the data type; see Understanding Data Types. The application user can:

• Type in a value for data that is a string, bigstring, integer, float or decimal.
• Select from a date-picker for dates and date/times.
• Select from a drop-down for an attribute that is set as the display name.
  PhixFlow automatically updates the data record's unique identifier attribute to match the selected display name.

Autosaving Changes

When the application user makes a change to a cell in a grid, PhixFlow needs to save the change to the table. One option is to have a save button that application user must click to save any changes; see Understanding Actionflows and Save Node.

Alternatively, allow PhixFlow to automatically save any changes that the application user makes. This changes applies to the whole grid.

1. In the grid, right-click to open the popup menu and select

   Insert excerpt
   _view_show _view_show nopanel true

    to open the grid view properties.
2. In

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Advanced, tick Auto Save.

Configuring Drop-Down Options

If you want to the application user to select from a set of values for a cell, add a drop-down using the view attribute properties 

Reordering Columns

PhixFlow lists attributes from left to right in the header using the values in Basic Settings → Order. There are two ways to change the order in which the attributes are listed.

On the Grid

1. In the screen canvas, drag a header and drop it in a different position in the header. 
2. PhixFlow changes Order value for all affected properties.
   
   Image Added

In the Properties

1. In the grid, click on the attribute column header to open its properties; see View Attribute.

2. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Basic Settings → Order, change the number.

3. PhixFlow changes the Order value for all affected attributes.
   
   Image Added

Labelling Columns 

Anchor
Formatting Formatting

By default, PhixFlow displays the attribute name as the column header. However, some attributes have technical names that make no sense to users on the front end. To relabel an Attribute

application users. In this case, you can add a different label to use in the header. You can also group columns under a shared header.

Adding Labels

To add a label that PhixFlow uses instead of the attribute name:

1. In the grid, 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.

Image Removed

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 .
2. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings → Label, add the text you want to appear in the column header.

Grouping Columns

If the data has related attributes, you can display the columns under a shared heading.

1. In Basic Settings → Order, put the attributes next to each other in the grid.
2. For each attribute, in Grid Settings → Label, specify a group heading using the form 
   Group, Specific 

For example, in the Employees grid we have two name-related attributes next to each other:

To change this to appear as:

1. For the view attribute First name, set Label: Name, First
2. For the view attribute Last name, set Label: Name, Last

The animation below shows how PhixFlow groups the adjacent columns using the group label.

Image Added

Hiding Columns

Often your table requires attributes but the user does not need to seem them. These attributes can contain

• codes or identifiers, such as the primary key
• data auditing information, such as the latest change to the attribute.

To hide attributes that do not need to appear in the grid:

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

Image Removed

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

1. Click ; see View Attribute.

2. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings, tick Always Hidden.

Image Added

You can also configure a column so that PhixFlow can show or hide it depending on a condition.

1. In the grid, click on the attribute column header to open its properties
2. Open the section Grid Settings
3. Add an expression to ; see View Attribute.
4. Click on the attribute column header to open its properties
5. Open the section Grid Settings

6. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings → 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. Add a number, e.g. 100 to True, add an expression. When the expression evaluates to:

   • false, PhixFlow displays the column 

   • true, PhixFlow hides the column.

For example, you want to show a simplified grid for application users working on a mobile device, hide optional columns with a Hide if evaluates to True expression of:
   _client.mobile

Changing Column Widths

Depending on the defaults used for your grid, the columns may be set to resize automatically to take up a percentage of the available space.

On the Grid

1. On the unlocked screen canvas, drag a column divider to the position you require.
2. Lock the screen.
3. PhixFlow saves the column widths to the attribute's 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings → Grid Default Width (pixels). The column will then always be 100px. Or,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
   
   Image Added

In the Properties

1. In the grid, click on the attribute column header to open its properties; see View Attribute.

2. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Grid Settings, to specify:

   • a minimum width, whilst allowing the column to stretch to fill the available space on larger screens, in Minimum Width specify a number.
     

Image Removed

1. • For example, to prevent the column from shrinking below 100 pixels, specify 100. 

   • fixed column width, in Grid Default Width (pixels)

Image Removed

Reordering columns

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

Image Removed

Image Removed

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

1. • , specify a number.
     For example, to fix a column width to 100 pixels, specify 100 (shown below).
     
     Image Added

Setting Grid Colours 

Anchor
gridColours gridColours

Where your application uses the Serene Grey package template, grids are configured so that rows are automatically highlighted when the application user

• hovers their mouse pointer over a row (highlight on-hover)
• clicks a row to select it.

There are different places where you can set styles; see Screen Styling.

Highlighting the Selected Row

The application user can click on a row to select it. This ticks the selection box at the start of the row. To clear the selection, the application user unticks the box.

To set or change the highlight colour for a selected row: 

1. In the repository, click on your application's name to open its properties.
2. In 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true

    → Style Settings section → Row Selection Style, click

   Insert excerpt
   _open_properties _open_properties nopanel true

    to open the style properties.
   
   
   1. Image Added
   2. Image Added
      If no style is set, click 

      Insert excerpt
      _add _add nopanel true

       to add one.
3. Either select a Background Colour; see Style
   Or go to the CSS Properties section, add a new CSS rule to specify a background-colour; see CSS Properties
4.  Screen Styling.

To specify the background colour for parts of the grid...

Highlighting a Changed Row

To highlight a row when the application user changes a value , in view attribute properties → Grid Settings → tick Changes Row Colour. 

When the application user changes a value, PhixFlow automatically selects the row. The highlight persists until the application user clears the selection box at the start of the row.

Adding Background Colour to a Column

To specify the background colour of a column, specify a Formatting Rule; see below.

Using Formatting Rules in Grids

PhixFlow formatting rules use and expression to determine the style or format to use depending on conditions; see Applying Formatting Rules. For example, the Companies table has a Status attribute which a user . In a grid, you might want to be green if its value is Approved. To add this formatting

display Approved companies in rows with a green background, but if the company is not approved it is displayed in a row with a red background.

To apply a formatting rule to a grid:

1. In the grid, click on the attribute column header to open its properties
2. Go to the section Formatting Rules
3. Click ; see View Attribute.

4. In 

   Insert excerpt
   _property_tabs _property_tabs name basic nopanel true

    → Formatting Rules, click 

   Insert excerpt
   _add _add nopanel true

   Add the expression

    to open the properties for a new formatting rule.

5. In Rule Expression, specify the condition; see Expression Basics and Expressions and PhixScripts. When this condition is true, PhixFlow applies the format. For example, to apply the style when the status is Approved, specify:

   Code Block
   _current.Status == "Approved"

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

6. Add or select a style

7. 
   

8. Click In Style, select or add the style you want to use.
9. Click 

   Insert excerpt
   _finish _finish nopanel true

   . The animation below shows the Status column with a green background after the rule has been applied.

Image Added

Changing Number and Date Formats

You application has default formats for numbers and dates. If you want a different format for this grid, for example, to show a date of 01 Jan 2000 instead of 01/01/2000:

1. In the grid, click on the attribute column header to open its properties; see View Attribute.

2. In 

   Insert excerpt
   _

   save

   property_tabs _

   save

   property_tabs name basic nopanel true

Image Removed

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

1.  → Basic Settings → Table Attribute Details, select an alternative format for:

   • Number Format

   • Date/Time Format.

For how to create new formats, see Date Time Format and Number Format.

Learn More

• Filtering and Sorting Grids and Charts
• Formatting and Styling Grids and Charts
• Using Relational Views
• Actions on Grids and ChartsFor a complete list of view properties and their functions see View.
• Properties
  • View
  • View Attribute
  • Attribute