...

Layout templates allow you to configure layout components, which can be added to forms. It is often useful to build a Palette, which is a list of pre-configured layout templates, which allow you to build forms quickly using layout components which adhere to your chosen style.

...

Each layout object has the following settings:

...

This field is only available if the layout component is a stream view component or a card container.

Specify a display name, which will be displayed as the heading for this component on the form. If no display name is set, The form displays the layout name.

Layout templates allow you to configure layout components, which can be added to forms. It is often useful to build a Palette, which is a list of pre-configured layout templates, which allow you to build forms quickly using layout components which adhere to your chosen style.

Insert excerpt

	_standard_settings
	_standard_settings
nopanel	true

Each layout object has the following settings:

a drop-down list.

If ticked, the field will cache its data after the first load.

Form

Area

Tab HeaderLabeled

Tab Display Area

Labeled Number Field

Labeled Labeled Drop-down Labeled True/False

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

Field

Description

Name

The name of the layout object.

Display Name

This field is only available if the layout component is a stream view component or a card container.

Specify a display name, which will be displayed as the heading for this component on the form. If no display name is set, The form displays the layout name.

Cache Data

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

If ticked, the field will cache its data after the first load.

Action

This field is only available if the layout component is a button.

Specify the action to run when a user clicks the button.

Snap Grid Size

This field is 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

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

Composite Component

Tick 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

This field is available for the following types of layout component:

Form
Area
Card Container
Labeled Number Field
Labeled Date Field
Labeled Date Time Field
Labeled Drop-down Field
Labeled True/False Field

The stream that backs the layout component.

Stream View Name

This field is only available if the layout component is a form or a card container.

The name of the stream view that backs this card container or form. This can be used in order to have aggregated data in the background filter of the card container or form.

Refresh If Not Active

This field is only available if the layout component is a stream view component or a card container.

If ticked, the element will refresh even if the parent dashboard is not active (e.g. after the driving selection changes). Otherwise it will refresh as soon as it becomes active.

Show Paging Bar

This field is only available if the layout component is a card container.

If ticked, the paging bar is shown by default.

Display Text

This field is only available if the layout component is a static text field.

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

Use HTML Formatting

This field is only available if the layout component is a static text field.

Tick 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

This field is available for the following types of layout component:

True/False Field
Date Field
Date Time Field
Number Field
String Field
Dynamic Text

If the Dashboard that this layout component is on is opened by an action, and there are no context parameters or form mappings to populate this field, populate the field with this value.

Date/Time Format

This field is available for the following types of layout component:

Date Field
Date Time Field
Dynamic Text
Drop-down Field

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

Number Format

This field is available for the following types of layout component:

Number Field
Dynamic Text
Drop-down Field

Specify the format in which to display the number value.

Data Type

This field is available for Dynamic Text and Drop-down Fields.

The Data Type determines how the selected data will be formatted. For example if it is an Integer or Float it can have a number format, and if it is a date or date time then it can have a date-time format.

Decimal Places

This field is only available if the layout component is

Action

dynamic text.

The number of decimal places to display for numbers.

URL

This field is only available if the layout component is a buttonURL display.

Specify the action to run when a user clicks the button.

Snap Grid Size

URL that you want to be displayed.

Expression

This field is only available if the layout component is a URL display.

Enter an expression which, if true, the URL will be calculated as an expression.

Place Holder Text

This field is available for the following types of layout component:

Date Field

Date Time Field

Number Field

String Field

Composite Component

Specify whether this object is part of a composite component.

Stream Name

This field is available for the following types of layout component:

Form
Area
Card Container
Labeled Number Field
Labeled Date Field
Labeled Date Time Field
Labeled Drop-down Field
Labeled True/False Field

The stream that backs the layout component.

Stream View Name

This field is only available if the layout component is a form or a card container.

The name of the stream view that backs this card container or form. This can be used in order to have aggregated data in the background filter of the card container or form.

Refresh If Not Active

This field is only available if the layout component is a stream view component or a card container.

If ticked, the element will refresh even if the parent dashboard is not active (e.g. after the driving selection changes). Otherwise it will refresh as soon as it becomes active.

Show Paging Bar

This field is only available if the layout component is a card container.

If ticked, the paging bar is shown by default.

Display Text

This field is only available if the layout component is a static text field.

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

Use HTML Formatting

This field is only available if the layout component is a static text field.

Tick 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

This field is available for the following types of layout component:

True/False Field
Date Field
Date Time Field
Number Field
String Field
Dynamic Text

If the Dashboard that this layout component is on is opened by an action, and there are no context parameters or form mappings to populate this field, populate the field with this value.

Date/Time Format

This field is available for the following types of layout component:

Date Field
Date Time Field
Dynamic Text
Drop-down Field

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

Number Format

This field is available for the following types of layout component:

Number Field
Dynamic Text
Drop-down Field

Specify the format in which to display the number value.

Data Type

This field is available for Dynamic Text and Drop-down Fields.

The Data Type determines how the selected data will be formatted. For example if it is an Integer or Float it can have a number format, and if it is a date or date time then it can have a date-time format.

Decimal Places

This field is only available if the layout component is dynamic text.

The number of decimal places to display for numbers.

URL

This field is only available if the layout component is a URL display.

Specify the URL that you want to be displayed.

Expression

This field is only available if the layout component is a URL display.

Enter an expression which, if true, the URL will be calculated as an expression.

Place Holder Text

This field is available for the following types of layout component:

Date Field
Date Time Field
Number Field
String Field

Enter place holder text that PhixFlow will display when the input field is empty. The text is shown slightly greyed out to distinguish it from text that is entered by the user, or read-only text.

Style Settings

Select common formatting properties for the current layout component. PhixFlow applies the style to the layout component when you save changes to the properties tab.

...

Enter place holder text that PhixFlow will display when the input field is empty. The text is shown slightly greyed out to distinguish it from text that is entered by the user, or read-only text.

Style Settings

Select common formatting properties for the current layout component. PhixFlow applies the style to the layout component when you save changes to the properties tab.

These options construct CSS styling for the layout component; see https://www.w3schools.com/cssref/ for details of CSS. You can also create custom styling, see CSS Properties.

Field

Description

Border Style

Select a border style:

None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Initial
Inherit

Border Width

Enter a number to specify how many pixels wide the border should be.

Border Colour

Specify the colour for the border and background. Click on the sample square to open a colour picker and select a color. Click back into the properties tab to close the colour picker.

Image Added

Background Colour

Background Image

Anchor

	image
	image

Select an image from the drop-down list. To see the repository list of images uploaded to the current application, click

Insert excerpt

	_image_list
	_image_list
nopanel	true

.

To add a new image, click

Insert excerpt

	_add
	_add
nopanel	true

. PhixFlow opens the Image properties.

Background Repeat

PhixFlow assumes you want to use an image to fill the background. For smaller images it will repeat the image to fill the available space. To change this property select one of the options:

repeat - repeat the image to fill the space available
repeat-x - repeat the image to fill the space horizontally
repeat-y - repeat the image to fill the space vertically
no-repeat - show a single instance of the image.

Background Attachment

Select how the image is to be fixed:

scroll
fixed
local

For an example of how these work, see https://css-tricks.com/almanac/properties/b/background-attachment/.

Background Position

Set the position of a background image; see https://www.w3schools.com/cssref/pr_background-position.asp.

Background Size

Set the size of a background; see https://www.w3schools.com/cssref/css3_pr_background-size.asp.

Text Colour

Click on the sample square to open a colour picker and select a colour for text. (see Border Colour, above.)

Font Size

Specify a font point size; see https://www.w3schools.com/cssref/

...

FieldDescriptionBorder Style

Select a border style:

None
Hidden
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Initial
Inherit

Border WidthEnter a number to specify how many pixels wide the border should be.Border Colour

Specify the colour for the border and background. Click on the sample square to open a colour picker and select a color. Click back into the properties tab to close the colour picker.

Image Removed

Background Colour

Background Image

AnchorimageimageSelect an image from the drop-down list. To see the repository list of images uploaded to the current application, click

pr_font_font-size.asp.

Font Weight

Select how bold the text appears:

normal (default)
bold
bolder
lighter
initial
inherit

Font Style

Select how angled the text appears:

normal
italic
oblique
initial
inherit

Text Align

Select how the text aligns within the component's space:

left
right
centre
justify
initial
inherit

Read Only

Insert excerpt

	_

image

check_box_

list

ticked
	_

image

check_box_

list

ticked
nopanel	true

.To add a new image, click

to make a component read-only.

Hidden

Insert excerpt

	_

add

check_box_ticked
	_

add

check_box_ticked
nopanel	true

. PhixFlow opens the Image properties.Background Repeat

PhixFlow assumes you want to use an image to fill the background. For smaller images it will repeat the image to fill the available space. To change this property select one of the options:

repeat - repeat the image to fill the space available
repeat-x - repeat the image to fill the space horizontally
repeat-y - repeat the image to fill the space vertically
no-repeat - show a single instance of the image.

Background Attachment

Select how the image is to be fixed:

scroll
fixed
local

For an example of how these work, see https://css-tricks.com/almanac/properties/b/background-attachment/.

Background PositionSet the position of a background image; see https://www.w3schools.com/cssref/pr_background-position.asp.Background SizeSet the size of a background; see https://www.w3schools.com/cssref/css3_pr_background-size.asp.Text ColourClick on the sample square to open a colour picker and select a colour for text. (see Border Colour, above.)Font SizeSpecify a font point size; see https://www.w3schools.com/cssref/pr_font_font-size.asp.Font Weight

Select how bold the text appears:

normal (default)
bold
bolder
lighter
initial
inherit

Font Style

Select how angled the text appears:

normal
italic
oblique
initial
inherit

Text Align

Select how the text aligns within the component's space:

left
right
centre
justify
initial
inherit

Read Only

to hide the component from application users.

Tip
The data in hidden components does not refresh. If you need the data on a hidden grid to refresh, set the Position Settings: Height and Width to 0.

Show Horizontal Scrollbar

Add a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges.

Show Vertical Scrollbar

Add a vertical scrollbar to the component, so the user can scroll up and down if the content extends beyond the top/bottom.

Number Format

Select a number format for number fields and grid cells, if you want to use a different format to the default. The default number format is set in System Configuration.

Tip

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.

The following style settings are available for the layout components: areas, forms and card containers. This means you can vary the size and position of components inside the current layout when a user resizes the dashboard.

Field

Description

Auto Size

If ticked this component will resize to fill the available space in the direction set on the parent. If the user resizes the dashboard the components will resize. If multiple components have auto size selected, the available space will be shared between auto sized components.

Note

You can

Insert excerpt

	_check_box_

ticked

untick
	_check_box_

ticked

untick
nopanel	true

to make a component read-only.Hidden

this property whilst working in a layout, by:

manually resizing the component
using the
Insert excerpt
_

check_box_ticked

autosize
_

check_box_ticked

autosize
nopanel true

to hide the component from application users

context menu option.

Tip
The data in hidden components does not refresh. If you need the data on a hidden grid to refresh, set the Position Settings: Height and Width to 0.

Show Horizontal ScrollbarAdd a horizontal bar to the component so the user can scroll left and right if the content extends beyond the edges.Show Vertical ScrollbarAdd a vertical scrollbar to the component, so the user can scroll up and down if the content extends beyond the top/bottom.

The following style settings are available for the layout components: areas, forms and card containers. This means you can vary the size and position of components inside the current layout when a user resizes the dashboard.

If ticked this component will resize to fill the available space in the direction set on the parent. If the user resizes the dashboard the components will resize. If multiple components have auto size selected, the available space will be shared between auto sized components.

You can this property whilst working in a layout, by:

manually resizing the component

using the context menu option.

Field	Description

Auto Size
Note
Insert excerpt
_check_box_untick	_check_box_untick
nopanel	true
Insert excerpt
_autosize	_autosize
nopanel	true
Grow Factor	The number representing how much a component can resize. When you have several components, PhixFlow uses the difference in their numbers to allocate space. For example, if you have 3 components (A, B and C) with their grow factor set to: the same value, 1, for all components, PhixFlow allocates the available space equally to components A, B and C different values, A=1, B=2 and C=3, PhixFlow divides the space into 6 equal portions and allocates: 1 portion to A 2 portions to B 3 portions to C.
Direction	If a direction is selected, components inside this container will be distributed in the selected direction. Row - Components will be distributed as a single row, in order. The components will shrink to fit if the window is made smaller than the width of the components. Row Reverse- Components will be distributed in rows, in reverse order. Column - Components will be distributed as a single column, in order. If the window height is made smaller only components with Auto Size ticked will be resized. Column Reverse - Components will be distributed as column in reverse order.
WrapGrow Factor	The number representing how much a component can resize. When you have several components, PhixFlow uses the difference in their numbers to allocate space. For example, if you have 3 components (A, B and C) with their grow factor set to: the same value, 1, for all components, PhixFlow allocates the available space equally to components A, B and C different values, A=1, B=2 and C=3, PhixFlow divides the space into 6 equal portions and allocates: 1 portion to A 2 portions to B 3 portions to C.
Direction	If a direction is selected, components inside this container will be distributed in the selected direction. Row - Components will be distributed as a single row, in order. The components will shrink to fit if the window is made smaller than the width of the components. Row Reverse- Components will be distributed in rows, in reverse order. Column - Components will be distributed as a single column, in order. If the window height is made smaller only components with Auto Size ticked will be resized. Column Reverse - Components will be distributed as column in reverse order.
Wrap	This field is only visible if a direction is selected. Wrap affects how the components wrap when there is less space available. Wrap - wrap the components starting with either the right column, or the bottom row. Wrap Reverse - wrap the components starting with the left column or the top row. No Wrap - never wrap.
Justify	This field is only visible if a direction is selected. Justify affects the position of the components in the direction set (horizontal for row, vertical for column). Flex Start - Components will be positioned from the start edge of the container, with no spacing between them. Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them. Center - Components will be centred in the direction set, with no spacing between them, and equal spacing between the edge of the container and the first and last component. Space Around - Distribute components with even spacing around each component. Space Between - Distribute components with even spacing between each component, but no spacing between the component and the container.
Align	This field is only visible if a direction is selected. Wrap affects how the components wrap when there is less space available. Wrap - wrap the components starting with either the right column, or the bottom row. Wrap Reverse - wrap the components starting with the left column or the top row. No Wrap - never wrap.
Justify	This field is only visible if a direction is selected. Justify affects the position of the components in the direction set (horizontal for row, vertical for column). Flex Start - Components will be positioned from the start edge of the container, with no spacing between them. Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them. Center - Components will be centred in the direction set, with no spacing between them, and equal spacing between the edge of the container and the first and last component. Space Around - Distribute components with even spacing around each component. Space Between - Distribute components with even spacing between each component, but no spacing between the component and the container.
Align	This field is only visible if a direction is selected. Align affects the position of the components perpendicular to the direction set (vertical for row, horizontal for column). Flex Start - Components will be positioned from the start edge of the container, with no spacing between them. Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them. Center - Components will be centred, with no spacing between them, and equal spacing between the edge of the container and the first and last component. Baseline - Position components so their baselines align. Stretch - Components with no size set in this direction will have their size increased to fill the container in this direction. Space Around - Distribute components with even spacing around each component.
Read only	If ticked this component will be marked as read only. For input fields this means that the data in them will not be editable and for buttons it will make the button unusable. If the component is a form or an area, marking it as read only will mark ALL input fields in that area / form as read only, but buttons will NOT be automatically marked as read only

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

...

Position Settings

...

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

...

Description

...

Background Filter Rules

For stream view components and card containers there is a section related to background filters and their attributes.

Field	Description
Evaluate These Filter Rules as an Or	Ticking this field means that the background filter rules will be combined as an "or" filter as opposed to an "and" filter.
Background Filter Rules	A grid of background filter rules which are combined together (usually as an and conjunction) to create the background filter for the layout component.
Background filter rule attributes
Rule Expression	The Expression for this Filter rule, if it evaluates to true then the filter associated with this filter rule will be used.
Filter	The Filter that will be used should the Rule Expression evaluate to true.
Order	The order in which the filter rules for this dashboard element will be evaluated.
Enabled	If not true, this filter will not be used.
Stop If True	If true and the Rule Expression evaluates to true then any subsequent filter rules will not evaluated.
Description	A Description of the filter rule Align affects the position of the components perpendicular to the direction set (vertical for row, horizontal for column). Flex Start - Components will be positioned from the start edge of the container, with no spacing between them. Flex End - Components will be positioned so the last component aligns with the end edge of the container, with no spacing between them. Center - Components will be centred, with no spacing between them, and equal spacing between the edge of the container and the first and last component. Baseline - Position components so their baselines align. Stretch - Components with no size set in this direction will have their size increased to fill the container in this direction. Space Around - Distribute components with even spacing around each component.
Read only	If ticked this component will be marked as read only. For input fields this means that the data in them will not be editable and for buttons it will make the button unusable. If the component is a form or an area, marking it as read only will mark ALL input fields in that area / form as read only, but buttons will NOT be automatically marked as read only

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

Tab Index

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

The type of layout component.

View Type

The type of view this layout component can be used on.

Internal Icon Source

Anchor

	image-icon
	image-icon

Select an image from the list. PhixFlow uses this image as the icon if you add the component to a palette.

Menu Icon Source

The icon displayed in menus for this component.

Template

Whether this is a template component.

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

A free format description of the component.

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_unticked
	_check_box_unticked
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.

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.

Versions Compared

Old Version 43

New Version Current

Key

Style Settings

Style Settings

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Background Filter Rules

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Background Filter Rules

Creating Background Filters Within a Layout

Palettes and Layouts

Page Comparison

Versions Compared

Old Version 43

New Version Current

Key

Style Settings

Style Settings

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Background Filter Rules

CSS Properties

Shared Styles

Formatting Rules

Position Settings

Mappings

Advanced

Description

Background Filter Rules

Creating Background Filters Within a Layout

Palettes and Layouts