todo

• Screen , repository, palette, componentspoint to themes and palettes(dashboard) and dashboard elements and in the repo
• Components and layouts Layout container/child relationships and page structure
• Types of component and what they look like
  • Containers: areas, forms: is there any difference?
  • Fields
  • Data components and data views 
    •  forms
    • grids
    • etc
• Data backed Connecting components to data - link outParent child and preferred parent
• finding container (don't use parent because the useless parent field only shows the application)
• Components and layouts in the palette → Themes and palletes
• Responsive design - point to theme 2 pages (can these be generalised)
• Changing 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

...

Parts of a screen

Top down screen structure

Dashboard 

Creating Clear Spaces on a Screen - dashboard elements

You can divide up a screen into multiple parts, called dashboard elements, using the Add options. In the repository, you can see the different elements listed under the dahboard.

Components and layouts

Container child

Screen structur

Types of component

Connecting components to data → link

Finding a Component's

...

Container 

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

In most cases, a component's parent container 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 parentcontainer, into another area, so that the component now appears in an area that is not actually its parentcontainer.

There are a number of ways of determining a component's parentcontainer:

• todo - this only shows the application Open the details for the component; at the top of the details, the name of the parent container 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 container is, and indeed how other components on the form relate to this component

Moving a component to a new container

Affected by

• pinned/unpinned - unpin a pinned item
• don't drag - untick dont drag
• field container/composite - moves items as grouped
• preferred parent - affects the drop. Assumes you want to put the dropped component/layout into the preferred parent container.

Can be done in the repository Layouts (recommended) or in the screen.

PhixFlow needs to know when you drag something whether or not you want to create a sibling relationship or parent child relationship. Dragging on screen this can be ambiguous.

To make sure you are moving a whole parent/child set of things and moving them within an area it is easiest to move things in the Layouts list in the repository

Animation of dragging in the 

On Screen

Assuming its free to move,

Drag creates a sibling relationship. So if you drop it on a field, it goes next to the field. If you drop it on a container, it goes next to the container.

Shift-drag creates a parent child relationship, where you can only drop onto an appropriate container.

In the repository

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

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

You cannot add to an area or form that is set as Advanced → View Type → field container. You need to unset this option, add the additional components, then reset the option; see Associating Text with a Field.

Preventing components from being dragged

todo - check if this is only related to accidental dragging in design mode - no effect on movement due to responsive design?

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, in the component properties → Positional Settings section, tick Prevent Dragging.

todo - What is the role of pin/unpin compared to this

Take into account fixed components and layouts prevent responsive changes to the screen layout, for example if a user changes the screen size of your application on a desktop window, or if it is being displayed on a mobile device.

Themes have been designed to be responsive

How tos

Reminder of the training, specific techniques.

...

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 theBasic 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

Moving things around

To make sure you are moving a whole parent/child set of things and moving them within an area it is easiest to move things in the Layouts list in the repository

Animation of dragging in the 

Creating Clear Spaces on a Screen

...

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

...