...

• Dragging components
  • Drag -sibling
  • Shift Drag child inside
  • Preferred parent link → Drag puts it directly inside PP (child) AND  as a sibling of any other content. eg. Tile container has many tiles.
• Parent child and preferred parent - link out
• Reordering on screen and in repository 

Build Up a basic form

Note that there are no fancy flow stuff for this.

What data do you need to show - 

...

• The Labelled fields palette has composite items - see the Basic Settings checkbox.
• there are two parts, a static text label and the data field. Making them composite means
• They move as if they are one thing
• The name you give to the items is used as the text for the label.

...

Dividing screens

There are 2 ways to divide a screen. 

• Use context menu options Add Area...
• Use Palette layouts with multiple areas.

Use Context Menu Options

1. Right-click a screen
2. Use one of the Add Area... options to add a new part for the screen, separated with a dividing line.
   PhixFlow creates a new dashboard element for this part of the screen.
3. Add a suitable container, such as an area, form or card container.

Use a Palette Layout

Some palettes have layouts that have 2 areas contained by a split-view area. For example:

• Basic Components → Split View Image Added
• Theme 2 - App Builder Base Components → Area Split  Image Added

1. In the screen canvas toolbar, click

   Insert excerpt
   _palette _palette nopanel true

   .
2. Expand a palette to find a layout that has 2 areas.
3. Drag the layout from the palette onto an existing area.
4. PhixFlow creates a layout with the following structure:

Area

Split View (special type of area)

Area 1

Area 2

Dragging into a Screen

To add a component to a screen, you can drag in:

• components or layouts from:
  • the palette
  • the repository → Templates (anywhere else.
• streams (tables) or their attributes, views to add data-bound components such as grids, graphs, bar or pie charts or form-fieldscards.
• attributes to add labelled fields
• actions to add buttons.
  
  

todo - Attempting to drag a pinned component: at the moment this is copying BUT I cannot seem to unpin.

...

...

...

Preventing Accidental Dragging

Pinning relates to a components parent-child relationship. It does not 

Fix a component in position on the screen.
To Fix a component, use the position properties. Avoid if you want responsive design

To prevent accidental dragging.

To prevent accidental dragging of components and layouts on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.

Finding a Component's Container

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

...

• right-click on the component and select Find in Explorer select 

  Insert excerpt
  _repository_find _repository_find nopanel true

  .
  PhixFlow opens the Layouts with the component selected. You can then see how the selected component fits into the parent-child hierarchy.
• click on the component to open its properties.
  The name of the container is in Basic Settings → Parent.
• click on the space next to the component to open its properties.
  This option is less reliable as a screen becomes more complex, as you may not be able to select the immediate parent.

...

Order - Child items have an order in their parent. For example if there are 4 labelled fields, use the order number to specify the order in which they are listed. By default fields flow vertically, that is the order 1 field is at the top of the area, and 2 is below. If you set horizontal flow in the area Style Settings → Direction → No selection = column. change to row, they appear side by sdie

Preventing Accidental Dragging

To prevent accidental dragging of components and layouts on the screen, go to the components properties → Positional Settings section, and tick Prevent Dragging.

Auto Sizing

When you are designing a screen, you can use the Layout area → Style Settings→ Auto-size property to make components adjust automatically when the application's window is resized by the user. 

...

You can use the context menu option

Dividing screens

There are 2 ways to divide a screen.

Use Context Menu Options

...

...

Use a Palette Layout

Some palettes have layouts that have 2 areas contained by a split-view area. For example:

• Basic Components → Split View Image Removed
• Theme 2 - App Builder Base Components → Area Split  Image Removed

...

Area

Split View (special type of area)

Area 1

Area 2

Connecting Layouts to Data

...

PhixFlow will prompt you to select the type of stream or card view that you want to create; see Stream Views Pop-Up Menu.

Build Up a basic form

Note that there are no fancy flow stuff for this.

What data do you need to show - 

1. Create screen 
2. Open palette
3. Add Basic Components > Form, and name
4. Click on the screen to open the properties for your area. In shared styles you will see that this has some default shared styles applied.
5. Palette Labelled fields > Add labelled fields you need. Click to see properties
   • The Labelled fields palette has composite items - see the Basic Settings checkbox.
   • there are two parts, a static text label and the data field. Making them composite means
   • They move as if they are one thing
   • The name you give to the items is used as the text for the label.
6. Attributes list - open stream > attributes section or expand for list in repository
7. Drag from attribute onto form

https://www.youtube.com/watch?v=GCeiTdv0ty4
https://www.youtube.com/watch?v=oXt89u6QGXE

...