Versions Compared
Version | Old Version 1 | New Version 2 |
---|---|---|
Changes made by | ||
Saved on |
Key
- This line was added.
- This line was removed.
- Formatting was changed.
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
Displaying Data
What is a grid?
There are three elements involved in answering this question, a Table, a View and the Grid itself. The illustration below shows the table at the centre, this is where the data is stored. Views are created on the table that allow the data to be seen. Tables can have multiple views that show different attributes. Finally we have the grids, these are instances of the view that exist on a screen.
Tables vs. Views vs. Grids
Setup Options |
Table |
View |
Grids |
---|---|---|---|
Sets the Data Range i.e. Latest, All or Custom. | Yes | Yes Inherits from table. | Yes Inherits from view. |
Sets filtering of viewable records. | - | Yes | Yes |
Sets the sort order of records e.g. sort by column X. | - | Yes | Yes |
Controls aggregation e.g. total value in column Y. | - | Yes | Yes |
Controls actions e.g. actions associated to a double-click on a grid cell. | - | Yes | Yes |
Sets the Display Type e.g. grid, pie chart, etc. | - | Yes | Yes |
Controls Styling e.g. cell colours and icons. | - | Yes | - |
Sets the display name on the screen e.g. Grid header set to Invoices | - | - | Yes |
Accessing Tables, Views and Grids
Tables can be found in the repository:
- Under the heading of your application in the tables section.
- Within any packages associated to your application.
- Under the All section within the repository. It is recommended that you only use data within your application or an associated package.
Views. Open the properties of any table and on the properties tab their is a views section which lists all views associated to the table. These can be opened by double clicking any of the views in the list. It is also possible to get to the view backing a grid via the grids properties.
Grids et al. Grids can be selecting on a screen and the grid properties will open. It is also possible to right-click on a grid to see the View by selectin Show the View Configuration. In the same way a Show the Table Configuration option is also available that will open the table backing the view associated to the grid or any instance of a view such as a pie chart.
Displaying Data Setup
The information provided above is very useful, but if you are new to PhixFlow its helpful to see it applied in a practical example. We will look at making a number of changes that will show how this information gets used in practice.
Default Data Range
The Default Data Range define what Recordset to provide to the View, Screen or Card Container. The option can be set at the table, view and grid level, each inheriting the data range from the item before.
Setup
For our example we need to see all the recordsets.
- Open the properties for the Companies table.
- Under Analysis Options, find Default Data Range.
- Select
All
.Expand title Additional Information Select which recordset data is displayed.
- All: displays the records from all recordsets. Recommended when recordsets are updated incrementally and therefore have a Period of Transactional or Variable.
- Latest: displays the records from the latest recordset only.
- Custom: displays the records from the set number of recordset periods stipulate once selected. This option is available for view and grids.
Include History Records, is an additional Data Retrieval Option which stipulates whether to show historic records such as items that have been replaced. This can be particularly useful when creating a screen which displays changes to a record over time as History records will display all the changes recorded over the lifecycle of a record
- All views associated to this table will now inherit this setting as their default setting. It is possible to override this option in your view settings see View.
- Save your changes. The grid will update and show all records including the changes made earlier in the course.
Filtering
Filtering cascades down from the view to the grid. When a filter is created it is owned by the table and is listed in its properties. Note that screens can also have a background filter, as we saw earlier, we can set a filter on the screen to filter the results returned each as to only show the selected record.
There are two kinds of filter we use in Phixflow:
- Background Filter: this is applied and cannot be removed by the end user. There is no indication to the end user this is applied.
- Default Filter: this is applied when a grid or chart loads but an end user can remove it. The name of the filter is applied to the grid or chart name to indicate it has been applied.
Configuring either filter follows the same process, and filters can be used interchangeably between the two. For our example we will apply a background filter.
Setup
- Open the Companies List screen.
- Right-click on the Companies grid and select Show the View Configuration.
- In the properties click the
next to the Background filter. We will create a filter which hides rejected companies.Insert excerpt _addIcon _addIcon nopanel true - Settings
- Name,
Approved Companies
. - Select an Option,
Status
. - Enter Text,
Approved
.- In a previous filter we switched this to be a PhixScript box, here we want to check each record has the string value Approved in its Status column, therefore we leave this as a literal (text value).
- Name,
- Save your changes on both the filter and view.
- The Companies grid will dynamically update and hide all rows with a Status value not equal to Approved.
Sorting
The records are returned in the order they appear in the database which is typically by ID. We will set our sort order to be by Company Name, then Industry and finally by updated time.
Setup
- Right-click on the Companies grid and select Show the View Configuration.
- In the properties click the
next to the Default Sort Order.Insert excerpt _addIcon _addIcon nopanel true - Settings
- Name,
By Company, Industry and Date
. - IMPORTANT, click
. This is necessary as the sort order must be create before we can add criteria to it.Insert excerpt _save _save nopanel true - Click the
button.Insert excerpt _attributes _attributes nopanel true - From the dialog box that appears drag,
CompanyName, Industry
andUpdatedTime
into the area below Sort Order Attributes.Sorting is applied in the order the attributes appear in the list. It is possible to drag them to change their order.
- In the row for UpdatedTime, in the direction column click the arrow. This will set the order for UpdatedTime to be descending, resulting in the most recent records will appear first.
- Name,
- Save all your changes.
- The Companies grid will dynamically update and sort the data based on our criteria.
Presentation
Columns
Width Setup
- Click on the City column header to open the properties for the attribute.
- In the Grid Settings section we can set the Grid Default Width to be a specific size.
- Set this to
80
. - Save your changes.
- Alternatively it is possible to simply drag the columns to the desired width.
Flexible With Setup
We can set columns to make their size flexible so that they take up the available space. This is useful for column that are large.
- Right-click on Address.
- Select Set Flex Column.
- This will set this column to consume the available space in a grid. As we have lots of columns there is not very much available space. This will change as we move through this chapter.
Hiding Columns
Some columns are useful to have access to for filtering such as the CompanyID, but less useful to an end user. Rather than removing this column we can simply hide it from the user.
- Click on the CompanyID column on the grid.
- In the the properties go to the Grid Settings section.
- Tick Always Hidden.
Conditionally Hiding Columns
It is possible to conditionally hide columns. For example we could set an action to switch a view between a simple and advanced view. This could be achieved by using a button on our screen that sets a value in a hidden field, viewType
, to be either simple or advanced. The field can then be referenced using, _form.viewType. To conditionally hide the Address column we would then write in the Hide If evaluates to True field _form.viewType == "simple". This field uses PhixScript expressions to find out more see, Expressions and PhixScripts.
Freezing Column
The first column, or columns, can be frozen so that is a user scrolls these columns stay in view. This is particularly useful for large grids.
- On the Companies grid, right-click CompanyName.
- Select
Freeze Column
. - This column will remain in view when scrolling right.
- To remove the freeze, right-click the column.
- Select
Unfreeze Column
.
Labels
It is possible to rename columns using a label, this allows us to Column headers on a grid take their value from the attribute they represent on a table. These names are not always user friendly name or clear in purpose. For this reason PhixFlow enables a label to be set on a column.
- On the Companies grid click Web.
- In the properties in the Grid Settings section, set Label to
Website
.- The label can also be set using an expression. This relies on a PhixScript expression returning a string value, to find out more see, Expressions and PhixScripts.
Formatting Columns
As we have seen with form fields it is possible to set formatting for an attribute.
- On the Companies grid click Turn Over.
- In the Basic Settings section, click the drop down in Number Format and select
P_SG - Currency GBP (£) Millions
. - Save your changes and the grid will refresh.
- This is a shorter format, to see its configuration click the Number Format hyperlink (the Number format label itself) and its configuration is shown.
- Note this is a shared format that could be used in other locations. Therefore it is not advised to edit this configuration, if you do require a new format we recommend you create a new one.
It is possible to set other formats such as dates. Click on any of the grid headers to see the formatting options in the basic settings section and update them to suit.
Column Order
Columns in a grid can be reordered by dragging them to the desired location, or changing the Order value in the column properties.
Adding Columns / Attributes
Adding Existing Attributes
To add an attribute which exists on a table.
- Right-click the Companies grid.
- Select
Add Attributes to "Companies"
. - The attribute selecton dialog pops up. Here we can select any attribute from the table or related tables.
- In the Related Tables section, click ISOCountryCodes.
- The attributes for this table are displayed.
- Drag
Country Name
onto the Companies grid. - Close the popup.
- The attribute is added to the end of the grid. Move it to just after Country Code.
- Note that there is a link icon on the column header. This indicates the attribute is a relational attribute from another table.
Removing Attributes
- Right-click the Companies grid.
- Select Show the View Configuration.
- In the properties, go to the View Attributes section.
- Select CountryCode.
- A delete button will appear on the section header. Delete this attribute.
Add a New Attribute
To add a completely new attrite it must be added to the table and then added to the any views.
- Right-click the Companies grid.
- Select Show the Table Configuration.
- In the properties, go to the Attributes section.
- Click
Insert excerpt _addIcon _addIcon nopanel true - Add the following:
- Name,
TelephoneButton
. - Expression,
_NULL.
- We set this to _NULL as good practice, to indicate to users and PhixFlow that the value is expected to be empty.
- Save your changes.
- We will use this later to add an action that will make a phonecall.
- Name,
- Add a second attributes:
- Name,
IndustryIcon
. - Expression,
_NULL
. - Save your changes.
- We will use this later to add an icon for the specific industry.
- Name,
Attributes
- Adding attributes
- Relational Attributes
- Reordering Attributes
- Hiding Attributes
- Conditionally Hiding Attributes.
Styling a Grid
- Basics
- Bold Text
- Available Styling i.e. default styles.
- Conditional Formatting Background Colour
- Cell and Row.
- Removing the Title
- Labelling and double header?
Auto Save and Ingrid editing
- In grid editing, link to how to.
Adding a Chart
- Simple Setup
- Colour Maps
- Link to setting up more chart types.
Finding Layouts and Components
Anchor | ||||
---|---|---|---|---|
|
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_slider nopanel true
Using Find in Repository
Right-click any item on an unlocked screen and select
Insert excerpt | ||||||
---|---|---|---|---|---|---|
|
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
- Application Styles
- Shared Style
- Local Styles
- Formatting Rules
- Overriding Styles Best Practice
- Clearing Styles
Creating Screens from the Home page
- Options
- Templates
- Complete
- Blank
- Screen Options
- Floating
- Size
- Open Maximised
- Creating from an ERD
- Creating from a Workflow
- Available Unused Actions.
Data Type and Formatting
- Date
- Date-Time
- Numbers