Overview

Composite components are a set of components grouped into a special layout that is locked and moves as a single component does.

Composites are useful where we have two or more components which are intrinsically linked, for example a header that consists of a icon and static text label, or a form field that has a data entry field and a label.

How to create a Group/ Composite Component

1. Open a screen.
2. Open a Palette and expand the Base Components section, such as Basic Layouts in Serene Grey.
3. Hold Shift and drag an area onto your screen, such as Area - Row.
4. Hold shift and drag an Image onto the area added above.
5. Hold shift and drag a static text label onto the area added above.
6. PhixFlow adds the image and static text as siblings.
7. Open the properties for the area added above. In Basic Settings, tick Composite Component.
   1. If you cannot click on the area, right-click and select  Find in Repository. Alternatively hold shift and click over the area until it becomes highlighted.

Editing Components within Composite Components

To edit the components within an Composite Component, first select the outer component, then click again to select the items within. Changes can then be made to the components using the  Properties tab or  Styles tab.

Adding Components to a Composite Component

Components cannot be added to a composite component as they behave as a single item, unless Composite Component is toggled off.

1. Open the properties for the composite component by clicking on it.
2. In Basic Settings, untick Composite Component. 
3. Now you can add items in Composite Component.
4. When finished remember to tick the Composite Component box. 

Field Containers

PhixFlow has another property that you can use on its own or typically within a composite component. The option is Advanced → View Type → field container. When this is selected, PhixFlow uses the name of a outer container as the label on a field.

Example Composite Component

Palettes include prebuilt labelled fields that you can drag onto a screen that are already grouped into composite components. This type of layout is typically made up of 3 components: 

1. An Area component, with the settings:
1. Basic Settings → Composite Component ticked
2. Advanced → View Type → field container
2. A Static text component.
3. A Data field, such as a string.

This type of component is illustrated below:

On a screen:

In the Layers: