Insert excerpt_Banners_Bannersnamescreennopaneltrue

This page is for application designers. It describes the properties of a component. It also lists the popup menu options for components.

Overview

Components are the building blocks of screens. For information about the different types of component and how they can be combined into layouts, see Screen Structure.

Each component has the following properties. Some properties are only available for some types of component.

Insert excerpt_property_toolbar_property_toolbarnopaneltrue Insert excerpt_property_tabs_property_tabsnamebasic-hnopaneltrue Excerpt

name	_parentDetails

Insert excerpt_parent_parentnopaneltrue For components, this property is read-only. The parent is the application or package to which it belongs.

Basic Settings

FieldDescriptionName

Excerpt

name	_name

Enter the name of the component.

The names for some components do not support spaces such as form fields and card components.

Insert excerptApplying Formatting RulesApplying Formatting RulesnameRefactorExpressionsnopaneltrueMapping Name

Available for input fields. Read-only.

Use this mapping name if you need to map this component in context parameters, drop-downs and expressions.

Once the form is backed by a table, changing the name of the Table Attributes does not affect the Mapping Name, so there is no need to alter existing expressions after the name change.

Allow Empty Row

Available for drop-down and fixed drop-down components.

Insert excerpt_check_box_tick_check_box_ticknopaneltrue to allow empty rows in the list.Cache Data

Available for drop-down and fixed drop-down components..

Insert excerpt_check_box_tick_check_box_ticknopaneltrue to cache the data in the field after it is loaded for the first time.Parent

Available for button components. PhixFlow displays the name for the parent component.

Aggregate Function

Excerpt

name	_aggregateFunction

Facilitates the aggregation of the values held in a data backed components. See Aggregate Functions. For example, sum the value for InvoiceAmount across all records to give a total.

The following options relate to actions.

Note

For new applications created in PhixFlow version 9.0 or later, we recommend you use new actionflows for configuring actions.

Set the Action Method to Actionflow.
Select or create an Actionflow.

For applications created in version 8.3 and earlier, we recommend that you continue to use table-actions combined with either an Action Type or an Action, not both.

Set the Action Method to Table action.
Select:
- either an Action Type.
- or an Action from the appropriate table.

If you specify both, the Action Type overwrites the type of the first record-action rule that is configured in the action properties. The rest of the record-action rule configuration remains the same. For example:

A button Action Type is Update.
Its Action has 3 record-action rules, to:
1. insert
2. insert
3. update.

When the user clicks the button, PhixFlow runs the record-action rules in turn, but runs the actions:

update
insert
update

Only the first insert record-action rule type is replaced by the update type specified in the Action Type.

Action Method or
Double-click Action

Action Method is available for buttons. Double-click Action is available for grid views and cards.

Select whether or not an action runs when the user clicks the button or grid.

No Action
Table-Action: use when maintaining applications created in PhixFlow version 8.3 or earlier.
Actionflow: new in PhixFlow version 9.0.0. Use for new applications; see Creating Actionflows.
Other: allows an Action Type to be selected, see below.

Action Type

Available for buttons.

Select one of the following action types that will run when the user clicks the button.

None

Insert: adds a new record to the table

Update: updates a record

General

Delete: deletes a record

Clear All Fields: clears content from all form fields on the parent form

Close Screen: closes the parent screen

Maximise/Minimise Screen: toggles the screen between minimised and its default size.

Confirmation: runs the next phase in the Actionflow. 1.13 Confirmation Message Configuration

Screenshot: copies an image of the selected component to the clipboard. The required component must be dragged and dropped into the Screenshot Component box from the Insert excerpt_layers_layersnopaneltrue or Insert excerpt_repository_repositorynopaneltrue.

Alternatively, use the Action field to specify a table-action in which you can configure more details.

Action

Available when Action Method is Table-Action.

Select the action to run when a user clicks the button or double-clicks a grid view or card. The list shows:

if your application is not loaded: a list of applications. Select the application on which you are working to see the available tables.
if your application is loaded: a list of tables.

Select a table to see the list of actions associated with the table.

Default Action

Available for grid and card data components, when Double-click Action is Table-Action.

Select an action to run when a grid row or card is double-clicked

Drag Type

Available for grid and card data components, when Double-click Action is Table-Action or Actionflow.

Select or add a drag type to use when the user drags a grid row or card; see Drag Types and Drop Targets.

Actionflow

Available when Action Method is Actionflow. Click:

Insert excerpt_add_addnopaneltrue to create a new actionflow. Insert excerpt_actionflow_actionflownopaneltrue to select an actionflow from a list. The list shows:

if your application is not loaded: scroll down the list of applications to find the application on which you are working and its actionflows.
if your application is loaded: a list of actionflows in your application.

End of options related to actionsSnap Grid Size

Available for container components:

form
area

Also available for basic layouts:

tab header
tab display area
labelled number field
labelled date field
labelled date-time field
labelled drop-down field
labelled true/false field.

Specify the number of pixels that the component can grow or shrink when resizing in response to changes to the screen size.

Composite Component Insert excerpt_check_box_tick_check_box_ticknopaneltrue to indicate this component is grouped with its parent component.

It can be useful to group components together, such as a dynamic text field and the static text field that acts as its label. To do this,

Create a component to act as the container, for example an area.
Add the components you want to treat as a single component.
Tick this option for each of the components within the container.

PhixFlow then treats the container and the components it contains, as a single, composite component. In a screen, when you select or drag a component, such as a text field, PhixFlow selects or moves the whole composite component.

Tip

To select a component that is part of a composite component:

Click once to select the composite component.
Click again to select the specific component.

Layout Category Anchorlayout-catlayout-cat

Available for container components:

areas
forms
card containers.

This property relates to configuring preferred parents for components; see Component Categories and Preferred Parents.

Select a layout category to indicate the part of a screen that this component represents, such as a header, navigation, button-bar or footer. You can also add a new layout category. Layout categories are listed in the repository.

For other components and layouts, the property tab includes a Preferred Parent Categories section. Use this to select the layout categories that are suitable locations to drop a component. For example, a button could have button-bars as their preferred parent. When you drag a component or layout from the palette, PhixFlow can highlight parts of the screen where you can drop.

Table

Available for card containers and forms.

The name of the table or view bound to the form or card container.

For a card container, you can drag a table or view from the repository into this property to bind data.

View NameDisplay Text

Available for static text fields.

Enter the text you want to display on the component. By default this field is an expression editor. For options to format the display text as HTML, tick Use HTML Formatting.

Use HTML FormattingAvailable for static text fields.

Insert excerpt

	_Banners
	_Banners
name	screen
nopanel	true

This page is for application designers. It describes the properties of a component. It also lists the popup menu options for components.

Overview

Components are the building blocks of screens. For information about the different types of component and how they can be combined into layouts, see /wiki/spaces/HELP12/pages/9615609193.

Each component has the following properties. Some properties are only available for some types of component.

Insert excerpt

	_property_toolbar
	_property_toolbar
nopanel	true

Insert excerpt
_property_tabs
_property_tabs
name basic-h
nopanel true

Excerpt

name	_parentDetails

Insert excerpt

	_parent
	_parent
nopanel	true

For components, this property is read-only. The parent is the application, package or parent component to which it belongs.

Basic Settings

Do Not Trigger Automatic Data Refresh view or a card container. The following options are only available for a to display the paging bar by default. to use the default data range, which is set in the Table → Basic Settings → Data Range property. It determines whether this component displays records from:

either all recordsets
or the latest recordset only.

to override the setting in the table backing the component. PhixFlow shows the Data Range property.

Field

Description

Name

Excerpt

name	_name

Enter the name of the component.

The names for some components do not support spaces such as form fields and card components.

Insert excerpt

	Applying Formatting Rules
	Applying Formatting Rules
name	RefactorExpressions
nopanel	true

Mapping Name

Available for input fields. Read-only.

Use this mapping name if you need to map this component in context parameters, drop-downs and expressions.

Once the form is backed by a table, changing the name of the Table Attributes does not affect the Mapping Name, so there is no need to alter existing expressions after the name change.

Allow Empty Row

Available for drop-down and fixed drop-down components.

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to allow empty rows in the list.

Cache Data

Available for drop-down and fixed drop-down components..

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to cache the data in the field after it is loaded for the first time.

Aggregate Function

Excerpt

name	_aggregateFunction

Facilitates the aggregation of the values held in a data backed components. See /wiki/spaces/HELP12/pages/9615616332. For example, sum the value for InvoiceAmount across all records to give a total.

Filter

Available for form fields and dynamic text components, when an Aggregate Function is set, see above.

Choose a filter from the drop down list or select

Insert excerpt

	_add_icon
	_add_icon
nopanel	true

to create a new filter. See /wiki/spaces/HELP12/pages/9615615682.

The following options relate to actions.

Action Method or
Double-click Action

Action Method is available for buttons. Double-click Action is available for grid views and cards.

Select whether or not an action runs when the user clicks the button or grid.

No Action
Table-Action: use when maintaining applications created in PhixFlow version 8.3 or earlier.
Actionflow: new in PhixFlow version 9.0.0. Use for new applications; see Creating Actionflows.
Other: allows an Action Type to be selected, see below.

Action Type

Available for buttons.

Select one of the following action types that will run when the user clicks the button.

None
Insert: adds a new record to the table
Update: updates a record
General
Delete: deletes a record
Clear All Fields: clears content from all form fields on the parent form
Close Screen: closes the parent screen
Maximise/Minimise Screen: toggles the screen between minimised and its default size.
Confirmation: runs the next phase in the Actionflow. /wiki/spaces/HELP12/pages/9615626303
Screenshot: copies an image of the selected component to the clipboard. The required component must be dragged and dropped into the Screenshot Component box from the
Insert excerpt
_layers
_layers
nopanel true
or
Insert excerpt
_repository
_repository
nopanel true
.

Alternatively, use the Action field to specify a table-action in which you can configure more details.

Action

Available when Action Method is Table-Action.

Select the action to run when a user clicks the button or double-clicks a grid view or card. The list shows:

if your application is not loaded: a list of applications. Select the application on which you are working to see the available tables.
if your application is loaded: a list of tables.

Select a table to see the list of actions associated with the table.

Default Action

Available for grid and card data components, when Double-click Action is Table-Action.

Select an action to run when a grid row or card is double-clicked

Drag Type

Available for grid and card data components, when Double-click Action is Table-Action or Actionflow.

Select or add a drag type to use when the user drags a grid row or card; see /wiki/spaces/HELP12/pages/9615608759.

Actionflow

Available when Action Method is Actionflow or on View Components.

Click

Insert excerpt

	_add
	_add
nopanel	true

to create a new actionflow, or

Insert excerpt

	_actionflow
	_actionflow
nopanel	true

to select an actionflow from a list. The list shows:

if your application is not loaded: scroll down the list of applications to find the application on which you are working and its actionflows.
if your application is loaded: a list of actionflows in your application.

Insert excerpt

	View
	View
name	ViewComponentActionflow
nopanel	true

End of options related to actions

Snap Grid Size

Available for container components:

form
area

Also available for basic layouts:

tab header
tab display area
labelled number field
labelled date field
labelled date-time field
labelled drop-down field
labelled true/false field.

Specify the number of pixels that the component can grow or shrink when resizing in response to changes to the screen size.

Composite Component

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to indicate this component is grouped with its parent component.

It can be useful to group components together, such as a dynamic text field and the static text field that acts as its label. To do this,

Create a component to act as the container, for example an area.
Add the components you want to treat as a single component.
Tick this option for each of the components within the container.

PhixFlow then treats the container and the components it contains, as a single, composite component. In a screen, when you select or drag a component, such as a text field, PhixFlow selects or moves the whole composite component.

Tip

To select a component that is part of a composite component:

Click once to select the composite component.
Click again to select the specific component.

Layout Category
Anchor
layout-cat
layout-cat

Available for container components:

areas
forms
card containers.

This property relates to configuring preferred parents for components; see /wiki/spaces/HELP12/pages/9615609427.

Select a layout category to indicate the part of a screen that this component represents, such as a header, navigation, button-bar or footer. You can also add a new layout category. Layout categories are listed in the repository.

For other components and layouts, the property tab includes a 9711230837 section. Use this to select the layout categories that are suitable locations to drop a component. For example, a button could have button-bars as their preferred parent. When you drag a component or layout from the palette, PhixFlow can highlight parts of the screen where you can drop.

Table

Available for card containers and forms.

The name of the table or view bound to the form or card container.

For a card container, you can drag a table or view from the repository into this property to bind data.

View Name

Display Text

Available for static text fields.

Enter the text you want to display on the component. By default this field is an expression editor. For options to format the display text as HTML, tick Use HTML Formatting.

Use HTML Formatting

Available for static text fields.

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to change the Display Text field from an expression editor to an HTML editor. You can then use the toolbar to apply HTML formatting to the text.

Default Value

Anchor

	DefaultValue
	DefaultValue

Available for data field components:

true/false field
date field
date-time field
number field
string field
dynamic text.

Select or enter a value to display in the field. PhixFlow uses this value if:

an action opens the screen to which this component belongs
and there are no context parameters or form mappings to populate this field.

Note: This value is sent to the server if the input is missing. To not send a value to the server, see #Component-Placeholder below.

Do Not Trigger Automatic Data Refresh

Anchor

	NoDataRefresh
	NoDataRefresh

Available for Date and DateTime fields in the Basic settings and for Fixed (Custom) Drop Down and (Manual) Drop Down components in the Advanced settings.

Enabling this option stops any data-bound components (views, cards) driven by the field from automatically refreshing when the value in the field changes.

Date/Time Format

Available for the data field components:

date field
date-time field
dynamic text
drop-down
static drop-down

Select the format in which to display the date or date time value.

Number Format

Available for the data field components:

number field
dynamic text
drop-down
static drop-down

Select the format in which to display the number value.

The list of /wiki/spaces/HELP12/pages/9615608183s is populated from the formats defined for your:

PhixFlow instance
your application's theme
your application.

Type

Available for dynamic text, drop-down and static drop-down components.

Select one of the data types:

String
Integer
Float
Date
Datetime
HTML

The data type determines how the selected data will be formatted.

Integer or Float must have a number format
Date or Datetime must have a date-time format.

Decimal Places

Available for dynamic text components.

Enter the number of decimal places to display for numbers.

URL

Available for URL display components.

Specify the URL that you want to be displayed.

Note: URL components function in a similar way to form fields. This means they can be backed by an attribute in a table and the values will be displayed in the Record Details.

Tip

In PhixFlow version 11.4+, use this URL field to specify the URL from a

Insert excerpt

	_tableFile
	_tableFile
nopanel	true

to display files, such as PDFs.

Expression

Available for URL display components.

Enter an expression which, if true, determines the URL.

Multi-line

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to allow the text to wrap over 2 lines.

The following options are only available for date, date-time, number, string, drop-down, dynamic text and static drop-down fields.

Use Field Name as Place Holder

Date/Time Format

Available for the data field components:

date field
date-time field
dynamic text
drop-down
static drop-down

Select the format in which to display the date or date time value.

Number Format

Available for the data field components:

number field
dynamic text
drop-down
static drop-down

Select the format in which to display the number value.

The list of Number Formats is populated from the formats defined for your:

PhixFlow instance
your application's theme
your application.

Type

Available for dynamic text, drop-down and static drop-down components.

Select one of the data types:

String
Integer
Float
Date
Datetime
HTML

The data type determines how the selected data will be formatted.

Integer or Float must have a number format
Date or Datetime must have a date-time format.

Decimal Places

Available for dynamic text components.

Enter the number of decimal places to display for numbers.

URL

Available for URL display components.

Specify the URL that you want to be displayed.

Note: URL components function in a similar way to form fields. This means they can be backed by an attribute in a table and the values will be displayed in the Record Details.

Expression

Available for URL display components.

Enter an expression which, if true, determines the URL.

Multi-line

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to change the Display Text field from an expression editor to an HTML editor. You can then use the toolbar to apply HTML formatting to the text.

Default Value

Available for data field components:

true/false field
date field
date-time field
number field
string field
dynamic text.

Select or enter a value to display in the field. PhixFlow uses this value if:

an action opens the screen to which this component belongs
and there are no context parameters or form mappings to populate this field.

Anchor

NoDataRefresh

Available for Date and DateTime fields.

Enabling this option stops any data-bound components (views, cards) driven by the field from automatically refreshing when the value in the field changes.

to automatically use the field name as the placeholder text in the empty field.

Placeholder Text

Anchor

	Placeholder
	Placeholder

Enter text that PhixFlow will display when the input field is empty and no default value has been configured. Placeholder text is shown slightly greyed out to distinguish it from text that:

either is entered by the user
or is read-only text.

Note: This value is not sent to the server if the input is missing. To send a value to the server, see #Component-DefaultValue above.

The following options are only available for a view or a card container.

Anchor

	card
	card

Parent

The name of the form or area that this component is a part of.

Display Name

Enter a name to be displayed as the heading for this component. If no display name is set, the file name for the component is displayed.

View Name

Select the view that backs this card container or form. This means you can have aggregated data in the background filter of the card container or form.

Select First Row By Default

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to automatically select the first grid row or card when the screen is opened.

Refresh If Not Active

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to refresh the data in the component even if the parent screen is not active. Use this option if a user selection elsewhere in the application can affect the data in this component.

Insert excerpt

	_check_box_

tick

untick
	_check_box_

tick

untick
nopanel	true

to allow the text to wrap over 2 lines.

The following options are only available for date, date-time, number, string, drop-down and static drop-down fields.

Use Field Name as Place Holder

to refresh the data in the component when the screen becomes active.

Show Paging Bar

Anchor

card

Parent

The name of the form or area that this component is a part of.

Display Name

Enter a name to be displayed as the heading for this component. If no display name is set, the file name for the component is displayed.

View Name

Select the view that backs this card container or form. This means you can have aggregated data in the background filter of the card container or form.

Select First Row By Default

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to automatically use the field name as the placeholder text in the empty field.

Place Holder Text

Enter text that PhixFlow will display when the input field is empty. Placeholder text is shown slightly greyed out to distinguish it from text that:

either is entered by the user
or is read-only text.

display the paging bar by default.

Default Page Size

Available for grid and card data components.

Specify the number of records to be displayed as:

rows in a grid
cards in a card component.

If not specified, PhixFlow uses the default page size set in System Configuration.

Use Custom Data Range

Insert excerpt

	_check_box_untick
	_check_box_untick
nopanel	true

to use the default data range, which is set in the /wiki/spaces/HELP12/pages/9615615991 → Basic Settings → Data Range property. It determines whether this component displays records from:

either all recordsets
or the latest recordset only.

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to automatically select the first grid row or card when the screen is opened.

Refresh If Not Active

override the setting in the table backing the component. PhixFlow shows the Data Range property.

Data Range

Available when Use Custom Data Range is ticked.

Insert excerpt

	_

check_box

data_

tick

range
	_

check

data_

box_tick

range
nopanel	true

to refresh the data in the component even if the parent screen is not active. Use this option if a user selection elsewhere in the application can affect the data in this component.

This value is used instead of the data range specified on the table backing the component.

Use Custom Default Filter

Insert excerpt

	_check_box_

untick

tick
	_check_box_

untick

tick
nopanel	true

to refresh the data in the component when the screen becomes active.

Show Paging Bar

Insert excerpt

_check_box_tick

nopanel

true

Default Page Size

Available for grid and card data components.

Specify the number of records to be displayed as:

rows in a grid
cards in a card component.

If not specified, PhixFlow uses the default page size set in System Configuration.

Use Custom Data Range

Insert excerpt

_check_box_untick

nopanel

true

Insert excerpt

_check_box_tick

nopanel

true

Data Range

Available when Use Custom Data Range is ticked to display the Default Filter field.

Default Filter

This field is available when Use Custom Default Filter is ticked. Select or add a filter. This overrides any default filter set in the original view.

Default Sort Order

Select or add a default order in which data will be displayed; see /wiki/spaces/HELP12/pages/9615616287.

Set to true as default

Available for True/False (Boolean) fields.

Sets the field to true/enabled as the default option.

Tip

title	Special Behaviours

If a form drives other data bound components (e.g. card containers or grids) then pressing the return/enter key in a number or string field, or selecting a date using the date picker in a date field, will cause the driven components to refresh. Screen data will also refresh when a toggle component changes state, see /wiki/spaces/HELP12/pages/9615626015.

To disable this behaviour for Date and DateTime fields, see 9711230837.

Tip

title	HTML Components

In PhixFlow version 11.4+, when an HTML component is used to display a received email, the inline images can be displayed.

Excerpt

name	DropDownFilters

Drop Down Filters

Specify filter rules that PhixFlow applies to the drop down data before it is displayed.

Field

Description

Evaluate These Filter Rules as an OR

Specify how to combine the Drop Down Filter Rules.

Insert excerpt

	_

data

toggle_

range

off
	_

data

toggle_

range

off
nopanel	true

This value is used instead of the data range specified on the table backing the component.

Use Custom Default Filter

to combine the drop down filter rules as an AND filter.

Insert excerpt

	_

check

toggle_

box_tick

on
	_

check

toggle_

box_tick

on
nopanel	true

to

display the Default Filter field.Default FilterThis field is available when Use Custom Default Filter is ticked. Select or add a filter. This overrides any default filter set in the original view.Default Sort OrderSelect or add a default order in which data will be displayed; see Sort Order.

Tip

title	Special Behaviours

If a form drives other data bound components (e.g. card containers or grids) then pressing the return/enter key in a number or string field, or selecting a date using the date picker in a date field, will cause the driven components to refresh. Screen data will also refresh when a toggle component changes state, see Event Handler.

To disable this behaviour for Date and DateTime fields, see Do Not Trigger Automatic Data Refresh

combine the drop down filter rules as an OR filter.

Drop Down Filter Rules

The grid contains a list of the drop down filter rules that are combined together to create the drop down filter for the component. To add a filter rule to the list, click

Insert excerpt

	_addIcon
	_addIcon
nopanel	true

. PhixFlow opens the /wiki/spaces/HELP12/pages/9615609150 properties. To remove a filter rule,

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

the filter and press

Insert excerpt

	_delete
	_delete
nopanel	true

.

Excerpt

name	_backingAttribute

Backing Attribute

Field	Description
Table Attribute	The name of the underlying attribute.
Table	The name of the Table the attribute originates from. See Table.
Relational Attribute	Indicates if the attribute is relational. This field is read-only. See Using Relational Views.

Kanban Board
Anchor
kanban_board
kanban_board

This section is available when the Advanced → Type is Cards.

Kanban boards display records as cards in columns, with headings. The columns usually represent the status of the record. When a Kanban application user drags a card from one column to another, the default kanban drag action automatically updates these attributes to match those of the target column.

Example: a table may record information about status using the attributes StatusID and StatusName.

StatusID	StatusName	Data
Use this attribute to identify the columns	Use this attribute to name the columns
01	Planned	Yes
02	In Progress	No
03	In Review	No
04	Done	Yes

Table 1: Example attributes for a kanban board

Use the following properties to set the columns and headers for the kanban board. To specify the styles for the kanban board columns and headings, see Styles 9711230837, below.

Field Description

Kanban Columns

This field is required. Select an attribute from the list.

PhixFlow uses this attribute to create the kanban columns. Each value found for the attribute in the table data generates a column. PhixFlow displays the record as cards in the column that represents the value of this attribute.

In some cases, the attribute that you use to create the columns will have a data form that is not useful as a column heading. For example it may be a identifier, rather than a name. In this case, specify Kanban Column Headings.

Note
The columns are restricted to those found in the data.

Panel

title	Example

Example using the attributes from Table 1, above.

Select the attribute:

StatusID to create the kanban columns
StatusName to name the kanban columns

Recirds include StatusID values of 01 and 04. No records include the values 03 and 04. Therefore the kanban board has just two columns:

01, with the heading Planned
and 04, with the heading Done.

To display kanban columns for all possible values of the selected attribute, tick Evaluate Kanban Columns as Expression. PhixFlow adds the expression fields:

Kanban Column Expression
Kanban Column Headings Expression, when you select a Kanban Column Headings attribute.

Enter an expression that defines all the columns and (optionally) their headings.

Kanban Column Headings

Optionally, specify the attribute to create the kanban column headings. Select an attribute from the list.

This attribute must have values that correspond to the values in the Kanban Columns attribute. For example, if you select a Kanban Columns attribute of StatusID, the corresponding attribute for column headings is StatusName, as shown in the Table 1 above.

Evaluate Kanban Columns as Expression

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to display expression fields. Enter expressions to specify the full set of columns and headings that you require. Columns remain visible on the board even when there are no records to display in them.

To ensure kanban boards are responsive, expressions can only take a subset of functions; see Responsive Functions /wiki/spaces/HELP12/pages/9615607458.

Kanban Column Expression

Available when a Kanban Columns is selected and Evaluate Kanban Columns as Expression is ticked.

Enter an expression to specify which columns appear on the board.

Panel

title	Example

Example using the attributes from Table 1, above.

Select the attribute:
- StatusID to create the kanban columns
- StatusName to name the kanban columns
Tick Evaluate Kanban Columns as Expression
Enter an expression for all 4 columns: 01, 02, 03 and 04.
Enter an expression for all 4 column names: Planned, In Progress, In Review and Done.

The kanban board has just four columns. The In Progress and In Review columns do not contain any cards.

Your expression can directly specify all the columns/headings.

If you want the flexibility of changing the kanban columns over time, consider having a table in which all the attributes for the kanban columns and their headings are defined. Use the expression to refer to the table. When you update the table, the kanban board will automatically be updated.

To ensure kanban boards are responsive, expressions can only take a subset of functions.

Kanban Column Headings Expression

Available when a Kanban Column Headings is selected and Evaluate Kanban Columns as Expression is ticked.

Enter an expression to specify which column names appear on the board.

Background Filter Rules

Available for data view components and card containers. Specify a background filter that PhixFlow applies to the table data before it is displayed in the component.

Field

Description

Evaluate These Filter Rules as an Or

Specify how to combine the Background Filter Rules.

Insert excerpt

	_check_box_untick
	_check_box_untick
nopanel	true

to combine the background filter rules as an AND filter.

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to combine the background filter rules as an OR filter.

Background Filter Rules

This section has a toolbar with standard buttons. See Common Properties/wiki/spaces/HELP12/pages/9615612941.

The grid contains a list of the background filter rules that are combined together to create the background filter for the component. To add a filter rule to the list, click

Insert excerpt

	_new
	_new
nopanel	true

. PhixFlow opens the filter rule /wiki/spaces/HELP12/pages/9615609150 properties. To remove a filter rule, use the toolbar button

Insert excerpt

	_delete
	_delete
nopanel	true

.

For information about the details shown in the grid, see Filter Rule /wiki/spaces/HELP12/pages/9615609150.

Excerpt

name	_preferredParentCategory

Preferred Parent Categories
Anchor
pref-parent
pref-parent

This section includes a list of the Preferred Parent Categories the component can be dragged onto. For example, a button template can have a preferred parent category of button bar, therefore when the button template is dragged onto a screen the button bar will highlight indicating it is a preferred parent for the button template.

This property relates to configuring preferred parents for components; see Component Categories and Preferred Parents/wiki/spaces/HELP12/pages/9615609427.

To add a category, open the repository Layout Categories section and drag one into the list.

File Display

See File Display /wiki/spaces/HELP12/pages/9615625797

Advanced

Field

Description

Type

Excerpt

name	_type

PhixFlow populates this property with the type of component.

View Type

Available for area components. Optionally select one of the following to set additional behaviour for an area.

Field Container: indicates the area is acting as a container for a data field and associated text field.
PhixFlow uses the container name as the text in the field,
Screen Drag Handle: the area acts as a drag handle.
The application user can click in the area and drag to move the whole screen.

Internal Icon Source

Anchor

	image-icon
	image-icon

Excerpt

name	_internalIconSource

Select an image from the list of uploaded images to be used as the icon for this component. The icon will appear alongside the name of the component in the Layers section, Repository and property editors.

Optionally specify either an internal or an external icon source. If you specify both, PhixFlow will use the Internal Icon Source.

When you add a component to the palette, PhixFlow uses the image as the icon in the palette. If you do not specify an image, PhixFlow uses a default icon based on the component type.

External Icon Source

Excerpt

name	_externalIconSource

Enter the path to an icon that is stored in your file system.

Test Handle

Enter a name that you can use for this component, when you are running automated tests on your application.

Template

Read-only. Available for components that have been added to a palette.

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

indicates this is a template component that has been added to a palette.

Palette Label

Available for components and layouts that have been added to a palette.

Optionally, enter a label that will appear below this component when it is displayed in the palette. This is useful if you want a shorter or more descriptive label than the component name, which is displayed by defaultdefault.

Do Not Trigger Automatic Data Refresh

Available for Fixed (Custom) Drop Down and (Manual) Drop Down components in the Advanced settings and for Date and DateTime fields in the Basic settings.

See #Component-NoDataRefresh above for details.

Excerpt

name	_description

Description

Field

Description

Tooltip

Enter tooltip text. When using the application, if the user hovers their mouse over this component, PhixFlow displays this text.

Insert excerpt

	_translatable
	_translatable
nopanel	true

Description

Enter a description to explain the purpose of this component.

Validation

Field	Description
Validation Type	Select an existing or create a new Validation Type. The selected Validation Type sets the criteria for an input field to be considered valid. For example, the criteria that determine if an email address is valid or if the value entered in a field is long enough.
Mandatory	Defines if it is mandatory to enter a value in the form field.
Error Message	The error message that gets displayed to the user when they mouse over a form field that does not satisfy the criteria of the validation type.

Excerpt

name	BooleanValidation

Note
For True/False (Boolean) fields, only Mandatory is available. When set, validation will fail if the field is set to false and an error will show.

Insert excerpt
_property_tabs
_property_tabs
name style-h
nopanel true

Style Settings
Anchor
style
style

Select formatting properties for the current component; see Style /wiki/spaces/HELP12/pages/9615615745 properties, as they are the same as the Style Settings here.

Excerpt

name	_styleSettings

PhixFlow uses the style settings to construct CSS for the component; see w3schools.com CSS for details of CSS. If the formatting you require is not available in this section, you can also create custom styling, see CSS Properties /wiki/spaces/HELP12/pages/9615609976. PhixFlow applies the style to the component when you save changes to the properties tab.

In addition to the standard style properties, this section includes the following settings related to kanban boards.

Field

Description

Kanban Column Header Style

Available when a Kanban Board → Kanban Column attribute is selected.

Select a Style /wiki/spaces/HELP12/pages/9615615745 to format the kanban board columns and their headers.

Either select a style from the list.
Or click
Insert excerpt
_stylestyles_ccs_list
_styles_styleccs_list
nopanel true
to show the list of styles available in the repository
Or click
Insert excerpt
_new
_new
nopanel true
to create a new style to use.

Kanban Header Column Style

Header Style

Remaining properties

The rest of the Style Settings properties are the same as those that you can set in a Style /wiki/spaces/HELP12/pages/9615615745.

Tip

Style settings include adding scrollbars.

Grid and card container components that have scrollbars can also scroll automatically. This means users can drag cards or grid items to targets that are currently off-screen.

Click to select the item and start to drag it in the direction of the target.
At the edge of the component, pause the mouse pointer.
PhixFlow then starts to scroll in the direction of your drag.

Automatic scrolling can be:

left or right
up or down
diagonal.

Excerpt

name	_styles

Shared Styles

Shares Shared Styles are reusable styles that can be applied to multiple components. Editing a shared style will impact all components where it is being used, therefore proceed with caution when editing and deleting. See /wiki/spaces/HELP11HELP12/pages/97111977619615615745.

Click Show the List of Styles to see the styles available in the repository. You can drag styles from the repository into the grid to add a shared style to this component.

CSS Properties

A list of CSS properties. Click

Insert excerpt

	_new
	_new
nopanel	true

to add a new CSS style; see CSS Properties /wiki/spaces/HELP12/pages/9615609976.

Formatting Rules

A list of rules about when to apply formatting. Click

Insert excerpt

	_new
	_new
nopanel	true

to add a new rule; see Formatting Rule /wiki/spaces/HELP12/pages/9615610103.

Position Settings

Field

Description

Order

The order of the component.

Tab Index

The order of the tab.

Width

The width of the component; https://www.w3schools.com/cssref/pr_dim_width.asp

Height

The height of the component; https://www.w3schools.com/cssref/pr_dim_height.asp

Top

The top of the component; https://www.w3schools.com/cssref/pr_pos_top.asp

Left

The left of the component; https://www.w3schools.com/cssref/pr_pos_left.asp

Right

The right of the component; https://www.w3schools.com/cssref/pr_pos_right.asp

Bottom

The bottom of the component; https://www.w3schools.com/cssref/pr_pos_bottom.asp

Prevent Dragging

Insert excerpt

	_check_box_tick
	_check_box_tick
nopanel	true

to prevent a component from being dragged or resized when a screen is in edit mode. This means you cannot accidentally move a component that you want to stay in a fixed position, such as a header or footer.

Insert excerpt
_property_tabs
_property_tabs
name action-h
nopanel true

Excerpt

name	_eventHandlers

Event Handlers

This section has a toolbar with standard buttons.

The grid contains a list of event handlers configured for this component. Event handlers use a user action, such as a mouse-click, to trigger a table-action or actionflow to run. To add an event handler:

Click
Insert excerpt
_add
_add
nopanel true
PhixFlow opens a new properties tab for the event handler.
Select the Event Type, Action Method and specific table-action or actionflow you require; see Event Handler /wiki/spaces/HELP12/pages/9615616717 properties.

To remove an event handler, use the toolbar button

Insert excerpt

	_delete
	_delete
nopanel	true

.

Excerpt

name	_dropTargets

Drop Targets

A list of rules of the action drop-targets on this component. Click

Insert excerpt

	_new
	_new
nopanel	true

to add a new drop-target; see Drag Types and Drop Targets /wiki/spaces/HELP12/pages/9615608759.

Excerpt

name	_actionMappings

Mappings

This section is only available for components that can have actions, such as buttons, views and cards. This means you can map attributes that have different names. PhixFlow will evaluate all the mapped datasets when it runs the action.

Insert excerpt

	_access
	_access
nopanel	true

Insert excerpt

	_audit
	_audit
nopanel	true

Creating Background Filters Within a Component

As well as using the properties tab to set up background filters, you can apply them within an unlocked screen or component that contains a grid view.

In the component, drag the column header from a grid view onto a form or card. This creates a background filter using the backing attribute. When you then select a different row in the grid view, the contents of the form or card is updated to show the details for the selected row.

If the backing table no longer contains an attribute that appears as a column header in the grid view, PhixFlow prompts you to select an alternative attribute of the same type, if one is available. If the backing table has no attributes of the same type, PhixFlow reports and error.

Understanding Kanban Boards

A kanban board is a project tracking tool that shows work at various stages of a process. Each column represents a stage in the process. Each piece of work is represented by a card. See Making Kanban Boards/wiki/spaces/HELP12/pages/9615610743.

Card components have properties so that you can easily create kanban boards. In the Kanban Board section, select an attribute from the backing table to define kanban columns, and optionally their headings. PhixFlow creates one card for each record in the table, and displays it in the appropriate column. To define the styles for the columns and headings, use the options in Style Settings9711230837.

There are two ways to move cards to different columns.

Either update the backing table. When you refresh the kanban board, PhixFlow automatically moves the cards to the columns that reflect their stage in the process.
Or drag a card from one column to another. PhixFlow automatically updates the values of its kanban attributes to reflect the target column.

Example

The backing table for a component has the attribute Status, which can have the values:

Not started
In progress
Blocked
Done

PhixFlow uses these values to create 4 columns, and uses the status values as the headings. Each record is displayed as a card. The Status attribute determines which column the card is in. You can drag a card between columns, for example from Not started to In progress. In the backing table, PhixFlow updates the Status of the record to In Progress.

Component Pop-up Menu

Right-click on a component to show the pop-up menu. The options vary for different types of component. Options for screens will be listed:

either in the pop-up menu itself
or in the
Insert excerpt
_screen
_screen
nopanel true
Options sub-menu.

In the following table, the menu options are grouped according to purpose. This may not be the order in which the options appear in the menu.

Menu option

Description

Fixing and Moving

Insert excerpt

	_unlock
	_unlock
nopanel	true

When a screen is locked, unlock to make changes.

Insert excerpt

	_lock
	_lock
nopanel	true

Lock a screen to display the data content.

Insert excerpt

	_pin_unpin
	_pin_unpin
nopanel	true

Selected Objects

Pin or unpin a component. You can drag unpinned components to different locations in the screen. Unpinned components will move if another component is dropped on or near them.

Insert excerpt

	_lock_height
	_lock_height
nopanel	true

Fix the height of the selected component.

Insert excerpt

	_align
	_align
nopanel	true

sub-menu

Options to arrange the selected components:

Insert excerpt

	_align_left
	_align_left
nopanel	true

: Align the left edges of all the selected components to the component that is furthest to the left.

Insert excerpt

	_align_right
	_align_right
nopanel	true

: Align the right edges of all the selected components to the component that is furthest to the right.

Insert excerpt

	_align_top
	_align_top
nopanel	true

: Align the top edges of the selected components to the component that is positioned highest.

Insert excerpt

	_align_bottom
	_align_bottom
nopanel	true

: Align the bottom edges of the selected components to the component that is positioned lowest.

Insert excerpt

	_align_horizontal
	_align_horizontal
nopanel	true

: Equally distribute the selected components horizontally in the available space.

Insert excerpt

	_align_vertical
	_align_vertical
nopanel	true

: Equally distribute the selected components vertically in the available space.

Information

Insert excerpt

	_element_show
	_element_show
nopanel	true

Open the properties tab for the component.

Insert excerpt

	_screen_properties
	_screen_properties
nopanel	true

Open the properties tab for the screen.

Insert excerpt

	_table_properties
	_table_properties
nopanel	true

Open the properties tab for the table.

Insert excerpt

	_context_parameters
	_context_parameters
nopanel	true

Open the list of context parameters.

Insert excerpt

	_table_attributes_show
	_table_attributes_show
nopanel	true

Open the list of attributes for the table. This option is available when a screen or component has a backing table or view

Insert excerpt

	_view_attributes_show
	_view_attributes_show
nopanel	true

Open the list of attributes for the table. This option is available when a screen or component has a backing view as well as a backing table or view.

Insert excerpt

	_record_show
	_record_show
nopanel	true

Open a window showing the record.

Insert excerpt

	_repository_find
	_repository_find
nopanel	true

Open the repository with the component's name highlighted.

Insert excerpt

	_mapping
	_mapping
nopanel	true

Open a new mapping properties tab.

Adding

Insert excerpt

	_form_new
	_form_new
nopanel	true

For new screens, add a form container.

Insert excerpt

	_palette
	_palette
nopanel	true

Open the palette to drag in templates.

Insert excerpt

	_area_right
	_area_right
nopanel	true

Add a vertical bar to the current area.

Insert excerpt

	_area_above
	_area_above
nopanel	true

Add a horizontal bar to the current area.

Selecting

Insert excerpt

	_layout_children
	_layout_children
nopanel	true

For the selected area or container, select all the components contained in it.

Copy as Template

Use the selected item as a template. This also copies any background filter rules and data mapping to the template.

Deleting

Insert excerpt

	_delete_item
	_delete_item
nopanel	true

Delete the selected component from the screen.

Insert excerpt

	_delete
	_delete
nopanel	true

Selected Objects

Delete the selected component from the screen, and everywhere it is usedfrom the screen, and everywhere it is used.

Charting

For information in charting such as pie charts or line graphs see /wiki/spaces/HELP12/pages/9615609792.

Live Search

spaceKey	@self
additional	none
placeholder	Search all help pages
type	page

Panel

borderColor	#00374F
titleColor	white
titleBGColor	#00374F
borderStyle	solid
title	Sections on this page

Table of Contents

maxLevel	3
indent	12px
style	none

Learn More

_terms_changingnopaneltrue

For links to all pages in this topic, see Designing Screens.

Insert excerpt_terms_changing

/wiki/spaces/HELP12/pages/9615615667.

Version	Old Version 220	New Version Current
Changes made by	Zoe Baldwin	Zoe Baldwin
Saved on	Mar 04, 2024	Nov 22, 2024

Page Comparison

Versions Compared

Key

Overview

Basic Settings

Overview

Insert excerpt_property_tabs_property_tabsnamebasic-hnopaneltrue

Basic Settings

Drop Down Filters

Backing Attribute

Kanban Board Anchorkanban_boardkanban_board

Background Filter Rules

Preferred Parent Categories Anchorpref-parentpref-parent

File Display

Advanced

Description

Validation

Insert excerpt_property_tabs_property_tabsnamestyle-hnopaneltrue

Style Settings Anchorstylestyle

Shared Styles

CSS Properties

Formatting Rules

Position Settings

Insert excerpt_property_tabs_property_tabsnameaction-hnopaneltrue

Event Handlers

Drop Targets

Mappings

Creating Background Filters Within a Component

Understanding Kanban Boards

Component Pop-up Menu

Fixing and Moving

Information

Adding

Selecting

Deleting

Charting

Insert excerpt
_property_tabs
_property_tabs
name basic-h
nopanel true

Kanban Board
Anchor
kanban_board
kanban_board

Preferred Parent Categories
Anchor
pref-parent
pref-parent

Insert excerpt
_property_tabs
_property_tabs
name style-h
nopanel true

Style Settings
Anchor
style
style

Insert excerpt
_property_tabs
_property_tabs
name action-h
nopanel true