This page is for application designers who want to understand and create Composite Components.

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

1. Open a screen.
2. Open a Palette and expand the Base Components section, such as Basic Layouts in Theme 2.1.
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.

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