This page is for application designers who want to use templates to create an application with a consistent look-and-feelcreate great looking screens for their application.
Overview
Template packages holds application settings, templates in the form of preconfigured screen layouts which are available through palettes. Packages enable application designers to quickly create applications with a consistent look-and-feel through the use of preconfigure layouts.
PhixFlow Screen content is created using layouts and components drag from a
. PhixFlow comes with two preinstalled base palettes that provide the essential components, additional palettes with different styles are available though building blocks you need, however more compete and stylised palettes are available as packages, see the Installing Themes and Packages page for information about how to do thisobtain 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.Insert excerpt _palette _palette nopanel true
To see which palettes are available to you, in the bottom right of the PhixFlow window click Insert excerpt
Using
the PaletteThe way a screen is made up of layered components is reflected in the way components are grouped in the palettePalettes
Palettes are sorted into logical groups (see Theme 2.1), with icons to indicate their purpose. At the top level are the pre-built items, screens such as*:
- Confirmation Screen:
- Complete Screens- drag in a single tile that has all the components to create a full screen.
- Form Elements - drag in several components or tiles to design your own screen. These have layers of components, such as an area with headers, fields and labels.
- 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 theme 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 the pre-build screens, use partially prepared components such as:
- Tile containersTiles - drag these in to be the containers. Containers create distinct areas on the screen, with padding and margins so that child items can be automatically positioned.
- Tiles - drag in composite components called tiles.
If you want to go right back to the basic screen components and fields, use the last 2 palettes.
- Base Components - build up the different things you want on the screen from the base up.
- Data Components - add components designed to display datacome 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 some items (where appropriate) PhixFlow highlights the area onto which you can drop an item 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 to 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.
Creating Forms Easily
If your screen is going to be a form to display individual data records for a user to edit, it's easier to start with the data rather than creating lots of individual fields. The page see Showing Data on a Screen explains how to:
- Select the attributes you want to appear in a form.
- Drag the attributes onto the parent container.
- Let PhixFlow create default form fields in which to display data records.
If you have already created form fields fields, they are displayed with a broken link icon. Drag on attributes to bind them to the field.
For your selected template, PhixFlow displays a palette. This has all the components you need to build a screen.
The easiest way to move components around is in the layers panel, rather than in the screen itself. This means In the layers panel you can drag a component:
- into another component, creating a parent-child relationship
- Selected items outlined in blue
- Parent item outlined in orange.
A typical screen has a nested structure, in which the
To show the parent/child hierarchy for a screen, click 
Show/hide layer panel. There is an example on the right.
You can
Where Can I Drop This?
Whenever you start to drag a component from the palette, or an attribute, PhixFlow highlights the area onto which you can drop something using light blue, as shown below.