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

Overview

To create a screen in your application, start by creating a dashboard. In the application's repository, right-click Dashboards and select

Insert excerpt

	_add
	_add
nopanel	true

. The dashboard is your blank starting point. To turn it into a screen, use layout components. A component can be:

an area, which acts as a container components
elements of a screen, such as a title, a tab or a card
the fields that make up a form. There are different fields for text, numbers and drop-down selection lists
menus and buttons to help users navigate.

For every component you add, you need to give it a name and specify the formatting using the layout properties, described below.

In the PhixFlow repository, there is a Layout branch. Each layout is a nested set of components that are combined to create your screens.

You can simplify the process of creating a screen by using the Themes available for PhixFlow; see:

Alternatively, you can design your own components, then use them as layout templates. For example, you can set the style properties of a button once, and then copy the template button every time you need one in your application. To make your layout templates easy to find, add them to a Palette. You can quickly drag-and-drop your pre-designed components into your screens, to quickly create forms with a consistent look and feel.

See also:

Panel

borderColor	#7da054
titleColor	white
titleBGColor	#7da054
borderStyle	solid
title	Sections on this page

Table of Contents

indent	12px
style	none

Layout Properties

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

Insert excerpt

	_standard_settings
	_standard_settings
nopanel	true

Field

Description

Name

Enter the name of the component.

Allow Empty Row

Available for drop-down list components.

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

to allow empty rows in the drop-down list.

Cache Data

This field is only available if the layout component is a drop-down list.

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

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.

Action Type

Available for button components.

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

General
Insert
Clear All Fields
Update
Delete

Alternative, use the Action field, below, to specify an action in which you can configure more details.

Note

Excerpt

We recommend that you use either an Action Type or an Action, not both. If you specify both, the Action Type overwrites the type of the first stream item action rule that is configured in the action properties. The rest of the stream item action rule configuration remains the same.

For example:

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

When the user clicks the button, PhixFlow runs the stream item action rules in turn, but runs the actions

update
insert
update

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

Action

Available for button components.

Select the action to run when a user clicks the button. The drop-down list shows the actions available in the repository.

Snap Grid Size

Available for the following types of layout component:

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

Enter the grid size to use when components are snapped to the grid.

Composite Component

Insert excerpt

	_check_box_ticked
	_check_box_ticked
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 dashboard, 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.

Stream Name

Available for the following types of component:

form
area
card container
labeled number field
labeled date field
labeled date-time field
labeled drop-down field
labeled true/false field.

Select the stream that backs the layout component.

Display Text

Available for static text field components.

Enter the text you want to display on the layout 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 field components.

Insert excerpt

	_check_box_ticked
	_check_box_ticked
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 the following types of layout component:

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 dashboard to which this layout component belongs
and there are no context parameters or form mappings to populate this field.

Date/Time Format

Available for the following types of layout component:

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

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

Number Format

Available for the following types of layout component:

number field
dynamic text
drop-down field.

Select the format in which to display the number value.

Type

Available for dynamic text and 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.

Expression

Available for URL display components.

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

Multi-line

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

to allow the text to wrap over 2 lines.

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

Use Field Name as Place Holder

Insert excerpt

	_check_box_ticked
	_check_box_ticked
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.

The following options are only available for a stream 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 layout component is displayed.

Stream View Name

Select the stream 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_ticked
	_check_box_ticked
nopanel	true

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

Refresh If Not Active

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

to refresh the data in the component even if the parent dashboard 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_untick
	_check_box_untick
nopanel	true

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

Show Paging Bar

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

to display the paging bar by default.

Default Page Size

Available for card components.

Specify the number of cards to be displayed. 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 Stream → Basic Settings → Data Range property. It determines whether this layout component displays data records from:

either all stream sets
or the latests stream set only.

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

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

Data Range

Available when Use Custom Data Range is ticked.

Insert excerpt

	_data_range
	_data_range
nopanel	true

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

Offset Periods

Specify an offset.

Use Custom Default Filter

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

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 Action

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

Drag Type

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

Default Sort Order

Select or add a default order in which data will be displayed; see Stream View Sort Order.

Background Filter Rules

For stream view components and card containers there is a section to specify a background filter that PhixFlow applies to the stream 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_ticked
	_check_box_ticked
nopanel	true

to combine the background filter rules as an OR filter.

Background Filter Rules

This section has a toolbar with standard buttons.

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

Insert excerpt

	_add
	_add
nopanel	true

. PhixFlow opens the filter rule 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.

Kanban Board
Anchor
kanban_board
kanban_board

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

Kanban boards display data 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 stream 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 stream 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 2168686370, 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 stream data generates a column. PhixFlow displays the data records 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 stream 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

The stream data has records that 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_ticked
	_check_box_ticked
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 data records to display in them.

To ensure kanban boards are responsive, expressions can only take a subset of functions; see Responsive Attribute Functions.

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 stream in which all the attributes for the kanban columns and their headings are defined. Use the expression to refer to the stream. When you update the stream, the kanban board will automatically be updated.

To ensure kanban boards are responsive, expressions can only take a subset of functions; see Responsive Attribute 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

For stream view components and card containers there is a section to specify a background filter that PhixFlow applies to the stream 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_ticked
	_check_box_ticked
nopanel	true

to combine the background filter rules as an OR filter.

Background Filter Rules

This section has a toolbar with standard buttons.

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

Insert excerpt

	_add
	_add
nopanel	true

. PhixFlow opens the filter rule 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.

Style Settings

Select formatting properties for the current layout component. The Style Settings properties are the same as those that you can set in a Style, except for those related to kanban boards. These options construct CSS styling for the layout 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. PhixFlow applies the style to the layout component when you save changes to the properties tab.

Field

Description

Kanban Column Style

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

Select a Style to format the kanban board columns and their headers.

Either select a style from the drop-down list.
Or click
Insert excerpt
_style_list
_style_list
nopanel true
to show the list of styles available in the repository
Or click
Insert excerpt
_add
_add
nopanel true
to create a new style to use.

Kanban Header Style

Header Style

Remaining properties

The rest of the Style Settings properties are the same as those that you can set in a Style.

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.

CSS Properties

A list of CSS properties. Click

Insert excerpt

	_add
	_add
nopanel	true

to add a new CSS style; see CSS Properties.

Shared Styles

A list of shared styles. 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.

Formatting Rules

A list of rules about when to apply formatting. Click

Insert excerpt

	_add
	_add
nopanel	true

to add a new rule; see Formatting Rule.

Position Settings

Field

Description

Order

The order of the layout 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_ticked
	_check_box_ticked
nopanel	true

to prevent a component from being dragged or resized when a dashboard 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.

Mappings

This section is only available for layout components that can have actions, such as buttons, stream 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.

Advanced

Field

Description

Type

PhixFlow populates this property with the type of layout 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 that will contain a field and associated label.
Dashboard Drag Handle: the area acts as a drag handle. The user can move the whole dashboard around on the screen by clicking in the area and dragging with their mouse.

Internal Icon Source

Anchor

	image-icon
	image-icon

Select an image from the list of uploaded images.

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 layout 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 layout component type.

External Icon Source

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

Test Handle

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

Template

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

Insert excerpt

	_check_box_ticked
	_check_box_ticked
nopanel	true

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

Palette Label

Available for layout components that have been added to a palette.

Optionally, enter a label that will appear below this layout 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 default.

Description

Field

Description

Tooltip

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

Insert excerpt

	_translatable
	_translatable
nopanel	true

Description

Enter a description to explain the purpose of this modelling object.

Creating Background Filters Within a Layout

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

In the layout, drag the column header from a grid view onto a form or card. This creates a background filter using the backing stream 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 stream data 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 stream has no attributes of the same type, PhixFlow reports and error.

Palettes and Layouts

The format of layouts created using components from palettes can be affected by the availability of the default palette. In

Insert excerpt

	_design_mode
	_design_mode
nopanel	true

, when you drag stream attributes onto a layout or area. If the component is from a palette from a different application

If the container application that contains the layout is running, PhixFlow uses the default palette set for the application.
If the container application is not running, PhixFlow uses the default palette set for the area.
If the container application is not running, but you are dragging stream attributes into a layout for a different (destination) application, which is running, then PhixFlow uses the default palette for the destination application.

In all cases, if no palette has been set for the application or area, PhixFlow falls back to using the system default palette.

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.

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

There are two ways to move cards to different columns.

Either update the backing stream data. 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 stream for a layout 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 data 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 stream, PhixFlow updates the Status of the record to In Progress.

Layout Context Menu

The context menu options vary for different types of component. Options for dashboards will be listed:

either in the context menu itself
or in the
Insert excerpt
_dashboard
_dashboard
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

	_layout_unlock
	_layout_unlock
nopanel	true

When a layout or dashboard is locked, unlock to make changes.

Insert excerpt

	_layout_lock
	_layout_lock
nopanel	true

Lock a layout or dashboard to display the data content.

Insert excerpt

	_pin_unpin
	_pin_unpin
nopanel	true

Pin or unpin a component. You can drag unpinned components to different locations in the layout. 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

	_autosize
	_autosize
nopanel	true

Toggle whether or not the currently selected component is automatically autosized when an application window is resized by the user.

Note
Using this option, or manually resizing a component may change the state of the Layout → Style Settings → Auto Size property; see Style.

 Insert excerpt
_arrange_components
_arrange_components
nopaneltrue
 sub-menu

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

	_distribute_horizontal
	_distribute_horizontal
nopanel	true

Equally distribute the selected components horizontally in the available space.

Insert excerpt

	_distribute_vertical
	_distribute_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 layout element.

Insert excerpt

	_dashboard_show_details
	_dashboard_show_details
nopanel	true

Open the properties tab for the dashboard.

Insert excerpt

	_stream_show_properties
	_stream_show_properties
nopanel	true

Open the properties tab for the steam.

Insert excerpt

	_context_parameters
	_context_parameters
nopanel	true

Open the list of context parameters.

Insert excerpt

	_stream_attributes_show
	_stream_attributes_show
nopanel	true

Open the list of attributes for the stream. This option is available when a dashboard has a backing stream.

Insert excerpt

	_stream_view_attributes_show
	_stream_view_attributes_show
nopanel	true

Open the list of attributes for the stream view. This option is available when a dashboard has a backing view as well as a backing stream.

Insert excerpt

	_stream_item_show
	_stream_item_show
nopanel	true

Open a window showing the data 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_add
	_form_add
nopanel	true

For new dashboards, add a form container.

Insert excerpt

	_palette
	_palette
nopanel	true

Open the palette to drag in components.

Insert excerpt

	_bar_vertical
	_bar_vertical
nopanel	true

Add a vertical bar to the current area.

Insert excerpt

	_bar_horizontal
	_bar_horizontal
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 layout template. This also copies any background filter rules and data mapping to the template.

Deleting

Insert excerpt

	_element_remove
	_element_remove
nopanel	true

Delete a layout element.

Insert excerpt

	_delete
	_delete
nopanel	true

<component>

Delete the selected component from the layout.

Versions Compared

Old Version 115

New Version Current

Key

Overview

Layout Properties

Background Filter Rules

Kanban Board
Anchor
kanban_board
kanban_board

Background Filter Rules

Style Settings

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Creating Background Filters Within a Layout

Palettes and Layouts

Understanding Kanban Boards

Layout Context Menu

Fixing and Moving

Information

Adding

Selecting

Deleting

Page Comparison

Versions Compared

Old Version 115

New Version Current

Key

Overview

Layout Properties

Background Filter Rules

Kanban Board Anchorkanban_boardkanban_board

Background Filter Rules

Style Settings

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Creating Background Filters Within a Layout

Palettes and Layouts

Understanding Kanban Boards

Layout Context Menu

Fixing and Moving

Information

Adding

Selecting

Deleting

Kanban Board
Anchor
kanban_board
kanban_board