Overview
Composite components are a set of components grouped into a special layout that is locked and moves as a single component does.
Composite Components
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
- Open a screen.
- Open a Palette and expand the Base Components section, such as Basic Layouts in Theme 2.1.
- Hold Shift and drag an area onto your screen, such as Area - Row.
- Hold shift and drag an Image onto the area added above.
- Hold shift and drag a static text label onto the area added above.
- PhixFlow adds the image and static text as siblings.
- Open the properties for the area added above. In Basic Settings, tick Composite Component.
- 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 a Composite Component
Components cannot be added to a composite component, it behaves as a single item. To make amendments to a composite component you must first untick the composite component flag.
- Open the properties for the composite component by clicking on it.
- In Basic Settings, untick Composite Component.
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:
- An Area component, with the settings:
- Basic Settings → Composite Component ticked
- Advanced → View Type → field container
- A Dynamic text field.
- A Data field, such as a string.
This type of component i illustrated below:
On a screen
In the repository