Using Palettes

Adding Screen Content

Content is added by dragging palette items onto screen through drag and drop. 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 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:

• 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 some select items (where appropriate) PhixFlow highlights the area onto which you can drop an item 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 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

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 individual fields. The page see Showing Data on a Screen explains how to:

1. Select the attributes you want to appear in a formfrom 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.

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 you can be specific about how the component relates to other components on the screen.  In the layers panel you can drag a component:

• into another component, creating a parent-child relationship 
• next to another component, creating a sibling relationship.

Example data entry form for an employee

Image Modified