Overview

Screen content is created using layouts and components dragged from a To configure a screen, drag components and layouts from the 

What palettes do I have?

Palettes are provides as part of a Template Package, to see which palettes are available to you:

1. Open the Repository on the right hand side.
2. Scroll down to Packages. You will see all the packages you have installed, for example Theme 2.1.
3. If you do not see any Packages listed, or you would like additional Packages and their palettes you can download and import them, see Installing Template Packages.
   
   1. We recommend installing Package "Theme 2.1".

Adding Content to a Screen

Screen Content

1. Content is added by dragging palette items onto a screen and dropping them.
2. Where appropriate PhixFlow highlights the area onto which it is recommended the selected item be dropped, as shown below. This is known as a Preferred Parent.
3. Image Removed

Tables

1. 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. Image Removed
2. 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.

Begin with a Template

1. If you have a blank screen and wish to start from a Template screen simply expand the Complete Screens section and drag the required item onto the screen.
   1. Image Removed

Palettes

Palette content is organised into logical groups (see Theme 2.1), with icons and descriptions to indicate their styling and 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-built screens, use 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.

Image Removed

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

Image Removed

, or a data table, onto the screen canvas.

Opening a Palette

Palettes are available from the Toolbar on a screen, click the

Adding to a Screen

To add content to your screen, such as buttons, maps, headers etc:

1. Click and drag items from the 

   Insert excerpt
   _palette _palette nopanel true

    onto the screen as illustrated here:
   1. Image Added

Adding Form Fields 

Anchor
AddingFormFields AddingFormFields

It's easy to create data to display or data entry using fields on a form by dragging attributes onto the screen canvas:

1. Open the 

   Insert excerpt
   _tableOnly _tableOnly nopanel true

   properties.
2. Drag attributes from the 

   Insert excerpt
   _attributes _attributes nopanel true

    section onto the screen canvas.
3. Enter a name for the field component.
4. PhixFlow automatically creates the form fields using on the default style specified for the type of data that the attribute represents.

For example, a telephone number has a number field, whilst a name has a text field. The default styles are set in your application properties.

Dropping Components Into or Next To Existing Content

When you drop a component, table or attribute onto a screen, PhixFlow needs to know if you want to put the item into or next to any existing item.

Where the palette item has a preferred parent, when you drag it onto a screen PhixFlow highlights these preferred parents and will try and place the item you are dragging inside its preferred parent; see Component Categories and Preferred Parents.

Finding a Component

Anchor
formBuildingFindComponentParent formBuildingFindComponentParent

The 

Moving Content on a Screen

See Moving Content on a Screen

Trouble Shooting

Are changes not showing? Under certain circumstances changes you make on a screen will not appear immediately. Therefore a simple close and reopen of the screen will invoke a refresh and you will see your changes appear.

What's Next?