Labelling Fields

When designing forms you often want the field to have a text label, either above or beside the field, for example:

Image Added

This type of layouts is made up of at least 3 components: 

• a form area component, with the settings:
  • Basic Settings → Composite ticked
  • Advanced → View Type → field container
• the child components
  • a static or dynamic text field
  • a data field, such as string, number or date.

To create a labelled field you can start from data or by setting up the fields.

Starting from Data

From any attribute list, drag an attributes onto a form area to create labelled fields. PhixFlow uses the default palette's labelled field that is appropriate for the data type. Different palettes will have different formatting and flow settings for labelled fields. Fields can also inherit properties, such as flow direction, from their container.

To access a list of attributes:

• repository → Stream (table)  → Attributes
• repository → open stream properties → Attributes section

Gif showing dragging on 2 attributes with basic formatting

Starting from the Field

PhixFlow has several different layouts of labelled fields in the palette.  Find the palette you want to use that contains labelled fields. For example

for basic formatting use palette → Labeled Fields

Image Added

For responsive design use palette → Theme 2 - App Builder Base Components

Drag in a layout from the palette. The data type of the field needs to match the data you will be displaying.

2 videos showing a basic attribut and one from a theme

Reordering

How it's done

• Field container
• Composite

Composites

These are configured as composite components where the label and the field are associated 

todo - If you are ticking a box in a component's properties, how does it know

What this gives you

The two parts are effectively grouped. Selection selects them both, and if you move them they move together

When you add the name, it applies to both components and the name is used for the static text label

Creating your own composite

1. In a basic components palette, such as Basic Components, drag onto a form area
   • an area to be a container
   • the components you want to treat as a single layout 

2. Right-click one of the new fields and select Find. In the layouts list, shift-drag to move the components into the container you created.

3. In the Advanced section, set the View Type to Field container.

4. In the Basic Settings section, tick Composite.

More text

In addition to a label, you may want additional text below the field. For example you might want to add

• static text

• , to explain what the user can do.

• dynamic text that depends on selected data.

1. In a basic components palette, such as Basic Components, drag a Static Text or Dynamic Text layout onto a form area.

2. Right-click the new field and select Find. In the layouts list, find the container for the fields and double-click it to open its properties.

3. In the Advanced section, the View Type is Field container.

1. Expand the drop-down list and select the empty row.

1. Save the

1. container

1. component. This "opens" the container so you can add more components to it.

2. In the layouts list, shift-click and drag the new component into the

1. container. PhixFlow moves your

1. component to be a child of the

1. container component.

2. Important: Open the field container properties again and

1. reset Advanced →

1. View Type  to Field container. All child components are now contained within the parent, which is also a composite component.

Image Added

Example of the layout structure of a labelled field