- Please review this page it seems out of date

THIS PAGE NEEDS A COMPLETE REWRITE - blocked until interface is stable.

In Phixflow, it is easy to create forms for your application; this is explained in the /wiki/spaces/HELP91/pages/9050666974.

The following videos will introduce the basic concepts of how you can drag fields into a screen to create a form.

...

, Concepts to cover

• Screen, repository, palette, components
  • point to themes and palettes
• Types of component and what they look like
  •  forms
  • grids
  • etc
• Data backed components - link out
• Parent child and preferred parent
• Dragging components
• Responsive design - point to theme 2 pages (can these be generalised)
• Changing theme design - styles and shared styles.

This page is for application designers. It explains the basic principles for how to add components from the palette as well as features to help you.

Overview

If you are new to PhixFlow and designing screens for an application, start with the Building Applications training course.

Dragging Components - Please review

To add a component to a form drag in any of the followingscreen, you can drag components as follows:

...

To drop an item onto a form that would normally be created unpinned (see table above) as pinned - hold the Ctrl key down while dragging.

Connecting Forms to Data

You can connect forms to data in a stream by simply dragging the stream icon from its property tab onto the form. PhixFlow will prompt you to select the type of stream or card view that you want to create; see Stream Views Pop-Up Menu.

Pinning and Unpinning

Unpinned - I don't think we have used this for some time?

When you drag in an unpinned component, PhixFlow automatically puts it in in the next space available. By default, this is underneath the previous component. However, you can control the flow using CSS properties. Components in forms are represented as DIV objects. 

...

You can also manually control the order of unpinned components by editing the Order field in the details of the component. This is found in the Positional Settings section of the details. The video above gives an example of using both of these methods - dragging, and manual update.

Pinned - I don't think we have used this for some time?

Pinned components can be placed anywhere on the form and you can drag pinned components to any position on a form.

...

Switching between unpinned and pinned

Pinned components can be dragged over unpinned components, so be careful when mixing pinned and unpinned components on a form, Think of these as being laid out in two separate, overlapping layers on the form.

...

To unpin a pinned component, right-click on it and select Unpin Selected Objects. You can select several components at once, and unpin them all using this option. The components will move into the next available space in their respective parent components.

Finding a Component's Parent 

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

In most cases, a component's parent is fairly obvious - and you can find it by clicking just outside the area of the component. In some cases, it is not obvious. Remember also that with pinned components, you could drag a component from an area, which is its parent, into another area, so that the component now appears in an area that is not actually its parent.

...

• Open the details for the component; at the top of the details, the name of the parent will be shown - to get more details, click on the quick link Parent to open the details for the parent
• Right-click on the component in the form and select Find in Explorer - this gives you a useful way of visually seeing what the parent is, and indeed how other components on the form relate to this component

Moving a component to a new parent

To move a component to a new parent, press Shift and drag it to the new parent. Commonly this is used to move components inside an area to a new area.

To confirm that the component has moved to the new parent, remember the techniques to find the parent of a component: Find a component's parent

Preventing components from being dragged

Sometimes, when laying out a form, you may find it interesting to "lock" a component in place, to stop yourself dragging it to a new position by accident. To do this, tick the Prevent Dragging flag in the component details. This is found in the Positional Settings section.

Auto Sizing

When you are designing a layout, 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

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