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. This page explains how to create a grid, using example data for employees from various companies.

Creating a Grid

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

1. In the screen toolbar, click  List Tables 
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  Grid. 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.

The appearance of the grid is set in the application properties →  Styles tab → Style Settings section.

Marking Columns as 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   Properties tab → 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.

Autosaving Changed Data

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 Show view to open the grid view properties.
2. In  Properties tab → 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  Properties tab → Drop-down Settings; see View Attribute. 

Labelling Columns 

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  Properties tab → 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.

Setting Grid Colours 

Where your application uses the Theme 2.1 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.

Highlight on Mouse Hover

Highlighting the Selected Row

To set or change seleted row highlight colour: 

1. In the repository, click on your application's name to open its properties.
2. In  Styles tab → Style Settings section → Row Selection Style, click Open Properties to open the style properties.
   
   
   If no style is set, click  Add New to add one.
3. Either select a Background Colour ; see Style
   Or go to CSS Properties section and specify a background-colour. see CSS Properties
4.  Screen Styling.

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

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

To specify  the background colour of a column, in the attribute properties, specify a formatting rule; see Applying Formatting Rules.

To highlight the selected row

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 

   _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  Add New

4. Add the expression

   _current.Status == "Approved"

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

5. Add or select a style
6. Click  Apply

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

More Information

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