This page is for application designers who want to create great looking screens for their application.

Overview

Screen content is created using layouts and components dragged from a  Palette. PhixFlow comes with two preinstalled base palettes that provide the essential building blocks you need, however more complete and stylised palettes are available as Template Packages, see the Installing Template Packages page for information about how to obtain these. These palettes enable you to quickly create exciting new applications with a consistent look-and-feel. It is therefore recommended that you use of of the additional palettes to begin creating your screens.

To see which palettes are available to you, in the bottom right of the PhixFlow window click . PhixFlow opens the palette tab which shows all the palettes that are installed. If you do not see any palettes listed, you can download and import them; see Installing Template Packages.

Adding Screen Content

1. Content is added by dragging palette items onto a screen dragging and dropping items.
2. Table (aka grids) can also be added to a screen by dragging the Table icon of a property editor directly onto a screen as illustrated here:
   1. 
3. Table attributes can be added directly to a screen by dragging them from the tables Attributes section onto a screen. PhixFlow will automatically create the form fields based on the default style specified for your application.

Palettes

Palettes are organised into logical groups of items (see Theme 2.1) , with icons and descriptions to indicate their purpose. At the top level are the pre-built screens such as*:

• Confirmation Screen: A complete screen designed to be used as a confirmation message or other binary option.
  
• Full Screens: A complete dashboard containing windows controls, a content area, a single tile with a header and CRUD buttons in a footer.
• Data Entry Forms: Data Entry form with centre alignment designed as a complete screen for data entry or a popup window.

*Please note the names may vary please see your palette and the descriptions of the items for full details of what is available to you.

If you require more control over the design of your screen or want to edit or add to the pre-build screens, use partially prepared components such as:

• Tiles - come in various configurations from data entry tiles to google maps integrated variants. Drag these items into a Tile container to control their layout and produce a design that is device responsive.
• Headers - can be added to your screens to provide clarity and structure to the content on the screen, headers can be used as labels to divide a screen into logical sections.
• Footers - can be used to house create, update and delete buttons that act upon your data.

Where can I drag this?

Palette items can be dragged onto a screen, For select items (where appropriate) PhixFlow highlights the area onto which you can drop them, using a light blue outline, as shown below. This is known as a Preferred Parent

Dropping items into or next to existing content?

 As discussed in  Screen Structure → moving layouts and components,

• Add next to an item: Dragging an item from the palette onto a screen creates a sibling relationship. For example, if you drag ad drop a form field on top of another form field they appear next to one other.
• Add inside an item: Holding shift and dragging an item from the palette onto a screen creates a parent child relationship, where your dragged item drops into the item you drop it on.

Preferred Parents, where a preferred parent is setup the dragged item will always drop into its preferred parent. For examples a Tile will always try and drop into a Tile Container.

Example Creating a Data Entry Form

If you are creating a data entry screen for a user to edit a record, it's easier to start with the data rather than creating lots of fields. The page see Showing Data on a Screen explains how to:

1. Select the attributes from your table and drag them onto a screen to create form fields. 
2. Drag the attributes onto the parent container.
3. Let PhixFlow create default form fields in which to display data records.

Example data entry form for an employee

What's next?