Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

See also Designing Forms with Drag and Drop.

Insert excerpt
_standard_settings
_standard_settings
nopaneltrue

Each layout object has the following settings:

FieldDescription
NameThe 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 ComponentSpecify whether this object is  part of a composite

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,

  1. Create a component to act as the container, for example an area.
  2. Add the components you want to treat as a single component.
  3. 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:

  1. Click once to select the composite component.
  2. 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 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.

...

FieldDescription
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_untick
_check_box_untick
nopaneltrue
 this property whilst working in a layout, by:

  • manually resizing the component
  • using the 
    Insert excerpt
    _autosize
    _autosize
    nopaneltrue
     context menu option.


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

...