Overview
To design a screen, you drag components and layouts, from the 
Palette onto the screen canvas.
PhixFlow comes with two pre-installed base palettes that provide the essential building blocks you need. You can download additional palettes. that have a full set of layouts with a consistent style. Using these palettes mean you can quickly create new applications with a consistent look-and-feel. Additional palettes are provided as template packages; see the Installing Template Packages.
Once the template package is installed, when you create a new application, you can select the one you want to use. This sets some default styles for your application and adds its palettes to the list in Palette.
We recommend you use Theme 2.1 palette, as this makes use of all the latest features for components, including highlighting where on a screen canvas you can drop a component; see the Installing Template Packages.
What Palettes Do I Have?
To see the palettes available to you:
- In the right panel, switch to the repository tab, or click
Repository to open it. - Expand the Packages section to see all the packages available to you, for example, Theme 2.1.
To make a package available in your application, open 2 repository tabs side-by-side. From the Packages list, drag a template package into your application's packages list.
Adding Content to a Screen
To add content to a screen, drag components and layouts from the Palette onto the screen canvas.
For the Theme 2.1 palette, PhixFlow highlights containers on the screen canvas where you can drop the component, as shown below. This is known as a Preferred Parent.
You can also add content based on table data
Adding Data Tables
- To add a data table, open the properties of the table.
- From the properties, drag the table icon onto the screen canvas
Adding Form Fields
- To create form fields 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.
Starting with a Template
- If you have a blank screen and wish to start from a Template screen simply expand the Complete Screens section in a palette and drag the required item onto the screen.
Drag from Locations
When you drag items from the repository onto a screen, PhixFlow creates a component using the default template for that item. So it is important to make sure that you have set the right default component palette. This is set in System Configuration. Remember that this default will apply to all users of this PhixFlow instance.
| Drag From | Item | Drag on to | Creates |
|---|---|---|---|
| Palette | component or layout | anywhere on a screen | the component(s) on the screen |
Repository → | component or layout | anywhere on a screen | |
Repository → Or A popup list of | attribute | an area | a labelled field |
Repository → | table | anywhere on a screen | Prompts you to select the data-component you want to add. This also creates a view based on the table. |
Repository → Or Table properties → View section Or Any popup list of views | view | an area | Adds an instance of the view. |
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.
Items can also be moved directly in the layouts section, this can provide greater flexibility on where items are placed.
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.
Finding a Component
To find a component on a screen:
- Selected items on a screen will be highlighted in the Layers section on the left hand side of a screen canvas. You can then see how the selected component fits into the screen hierarchy.
- Right-click on a component and select
Find in Repository.
PhixFlow opens the Components section with the component selected. You can then see how the selected component fits into the screen hierarchy.
Clicking on a component will open its properties.