Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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.

Tip

You can download the example data from the PhixFlow Learning Centre.


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

Table of Contents
maxLevel3
indent12px
stylenone

Creating a Simple Grid

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

  1. In the screen toolbar, click 
    Insert excerpt
    _table_list
    _table_list
    nopaneltrue
    .
  2. Drag a table from the list and drop it onto the screen canvas.
  3. PhixFlow prompts you to choose how to display the data:
    Image Added
    Click 
    Insert excerpt
    _grid
    _grid
    nopaneltrue
    . PhixFlow adds an empty grid.
  4. The Available Attributes window appears, as shown in the animation below. 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. Click on the image below to see a larger version:

Image Added

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

Insert excerpt
_property_tabs
_property_tabs
namestyle
nopaneltrue
 → Style Settings section.

Marking Columns as Editable 
Anchor
Editable
Editable

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 user to be able to edit the data in one of the grid columns:

  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
    namebasic
    nopaneltrue
     → 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:

  • overtype 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.
Tip

If an attribute is set as the display name, PhixFlow shows this attribute instead of a unique identifier; see Understanding ERDs and Attribute properties.

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 the 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 change applies to the whole grid.

  1. In the grid, right-click to open the popup menu and select
    Insert excerpt
    _view_show
    _view_show
    nopaneltrue
     to open the grid view properties.
  2. In
    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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 

Insert excerpt
_property_tabs
_property_tabs
namebasic
nopaneltrue
 → Drop-down Settings; see View Attribute

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
    namebasic
    nopaneltrue
     → 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 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. In 
    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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:

First nameLast name

To change this to appear as:

Name
FirstLast


  1. For the view attribute First name, set LabelName, First
  2. For the view attribute Last name, set LabelName, 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 see 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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Grid Settings → Hide if evaluates 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
    namebasic
    nopaneltrue
     → Grid Settings → Grid Default Width (pixels).

    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
    namebasic
    nopaneltrue
     → 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.
      For example, to prevent the column from shrinking below 100 pixels, specify 100

    • fixed column width, in Grid Default Width (pixels), 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 and it will be highlighted. To set or change the highlight settings for a selected row: 

  1. Click the home button from the top menu and click
    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue
    .
  2. In 
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     → Style Settings section → Row Selection Style, click
    Insert excerpt
    _open_properties
    _open_properties
    nopaneltrue
     to open the style properties.

    1. Image Added
    2. Image Added
  3. If no style is set, click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     to add one.
  4. Set the styling properties you wish to apply to selected rows in your grids. See Screen Styling.
    1. Common styles include:
      1. Font
      2. Background-color

Highlighting a Changed Row

To highlight a row when the application user changes a value:

  1. Click on the column header
  2. In view attribute properties → Grid Settings → tick Changes Row Colour. 
  3. 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 a Background Colour to a Row

The following allows us to set a row colour base on a value held within the row. This is recommended to be applied to specific rows.

  1. Right-click on a grid and select Show the View Configuration.
  2. Click on the 
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
  3. Add a new style to Grid Row Style.
  4. Provide a name and click 
    Insert excerpt
    _save
    _save
    nopaneltrue
    . This is necessary before we can add a CSS Property.
  5. In the CSS Properties section click 
    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
    1. CSS Tagbackground
    2. Expression, click on the slider to enable this.
    3. Value, set a condition for applying the style. For example, using the Employees data we will colour rows grey where the person's first name is Ewan.
      1. if(_current.first_name == "Ewan", "grey")
        1. _current allows each row to check its value, and the value returned from our expression must be a string so we use quotes around the colour.

Adding a 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. In a grid, you might want to 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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Formatting Rules, click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     to open the properties for a new formatting rule.

  3. 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"


  4. In Style, select or add the style you want to use.
  5. Click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    . The animation below shows the Status column with a green background after the rule has been applied.

Image Added

Changing Number and Date Formats

Your 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
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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


Insert excerpt
_Banners
_Banners
nameanalysis
nopaneltrue

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.

Tip

You can download the example data from the PhixFlow Learning Centre.


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

Table of Contents
maxLevel3
indent12px
stylenone

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
    nopaneltrue
     
  2. Drag a table from the list and drop it onto the screen canvas.
    This example uses the Employees table.
  3. PhixFlow prompts you to choose how to display the data:

    Click 
    Insert excerpt
    _grid
    _grid
    nopaneltrue
    . PhixFlow adds an empty grid to the canvas.
  4. PhixFlow displays the Available Attributes window, as shown in the animation below. 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.Click on the image below to see a larger version:


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

Insert excerpt
_property_tabs
_property_tabs
namestyle
nopaneltrue
 → Style Settings section.

Marking Columns as Editable 
Anchor
Editable
Editable

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 user to be able to edit the data in one of the grid columns:

  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
    namebasic
    nopaneltrue
     → 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:

  • overtype 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.
Tip

If an attribute is set as the display name, PhixFlow shows this attribute instead of a unique identifier; see Understanding ERDs and Attribute properties.

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
    nopaneltrue
     to open the grid view properties.
  2. In
    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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 

Insert excerpt
_property_tabs
_property_tabs
namebasic
nopaneltrue
 → Drop-down Settings; see View Attribute

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.

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
    namebasic
    nopaneltrue
     → Basic Settings → Order, change the number.

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

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 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. In 
    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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:

First nameLast name

To change this to appear as:

Name
FirstLast


  1. For the view attribute First name, set LabelName, First
  2. For the view attribute Last name, set LabelName, Last

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

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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Grid Settings, tick Always Hidden.

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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Grid Settings → Hide if evaluates 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
    namebasic
    nopaneltrue
     → Grid Settings → Grid Default Width (pixels).

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
    namebasic
    nopaneltrue
     → 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.
      For example, to prevent the column from shrinking below 100 pixels, specify 100

    • fixed column width, in Grid Default Width (pixels), specify a number.
      For example, to fix a column width to 100 pixels, specify 100 (shown below).

Setting Grid Colours 
Anchor
gridColours
gridColours

Where your application uses the Theme 2.1 Serene Grey package template, grids are configured to 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 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
    namestyle
    nopaneltrue
     → Style Settings section → Row Selection Style, click
    Insert excerpt
    _open_properties
    _open_properties
    nopaneltrue
     to open the style properties.


    1. If no style is set, click 
      Insert excerpt
      _add
      _add
      nopaneltrue
       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. In a grid, you might want to 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; see View Attribute.
  2. In 

    Insert excerpt
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → Formatting Rules, click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     to open the properties for a new formatting rule.

  3. 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"


  4. In Style, select or add the style you want to use.
  5. Click 
    Insert excerpt
    _finish
    _finish
    nopaneltrue
    . The animation below shows the Status column with a green background after the rule has been applied.

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
    _property_tabs
    _property_tabs
    namebasic
    nopaneltrue
     → 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