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

Moving Things around

Component, Layout, parent-child.

Use the repository so that you can bring all a layout.

Drag, Shift Drag an using the repository layout list

Dragging into a Screen

To add a component to a screen, you can drag components as follows:

...

a component

...

repository Layouts or Layout Templates

...

repository → Tables

table properties top left icon=

...

a table 

...

todo - link to process for this select and drag onto fiew

Select a component (grid, graph, chart or form) and view options

data-backed component

...

anywhere on a screen

• directly onto a screen
• directly onto a screen element
• onto an area
• onto a form (area)

...

A card view todo - this appears to no longer happen

Prompts for a data component.

...

todo - link to process for this

data-backed component

...

the header of a data view component

...

A button in the banner to run the action

todo - I may not have an approprite action but I cannot drag this onto a grid header

...

the header of a data view component

...

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

When you drag an unpinned component to a different place on the screen, it will be automatically assigned to the parent you drop it into (for example, an area), and it will be dropped in the position that you drop it. So if you drop it in the middle of a set of fields inside an area, the fields underneath will be shuffled down to make space for it.

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

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 drag unpinned components around in their parent component, and PhixFlow puts them wherever you drop them.

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

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

You can "pin" the edges of the component to its parent component using the Positional Settings in the component's details. To do this, set the offsets between the top, right, bottom and left edges of the component to those of the parent. The offsets are in number of pixels between the edge of the component and the edge of the parent. An example of pinning a component to its parent in this way is given in the video above.

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 change an unpinned component to pinned, press the Ctrl key down and drag it.

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.

...

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.

There are a number of ways of determining a component's 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, in the component properties → Positional Settings section, 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. 

...

How tos

Reminder of the training, specific techniques.

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

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

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.

Option 1: Use the add area

Option 2: Use a split compoent from the palette

...

The following videos will introduce the basic concepts of how you can drag fields into a screen: Videos in widget connector had links to:

...