Versions Compared

Version Old Version 27 New Version 28
Changes made by

Fiona Sargeant

Fiona Sargeant

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This page explains how to open a screen or create a new one, as well as how to add components to a screen.

Select an Existing Screen

  1. From the application Home window, select Design Screens.

  2. Select one of the listed screens.

PhixFlow opens the screen canvas on the left and the palette on the right.

Insert excerpt
_home_screen
_home_screen
nopaneltrue


Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone


Create a New Screen

If you have defined your data in an ERD, you can create a screen and its components based on data; see Create a Screen From ERD Data. To create the screen first:

  1. Click 
    Insert excerpt
    _add
    _add
    nopaneltrue
     Create New to create a new screen.
  2. Select a screen template. This will give you pre-set layouts such as: 
    • desktop or mobile dimensions
    • full screen or pop-up
    • a data grid or form.
  3. PhixFlow prompts you to:
    • Enter the name and description for the screen.
    • Select whether or not the screen will Open Maximised.
      When you select this option, the screen will open "full screen" for the application user.
      Otherwise, PhixFlow assumes the screen will be a pop-up window. It automatically selects the following options:
      • Always on top
      • Allow user to resize
  4. Click Confirm.
  5. PhixFlow opens a new screen canvas on the left and the palette on the right.

To add components to the screen, drag them into the canvas from the palette.

The Screen Canvas and Options

PhixFlow has several areas of the screen with features to help you when designing a screen.

  • The central area is the canvas where you design your screen.
  • Along the top of the canvas is the toolbar
  • On the left is the layers panel, which shows how the components are nested; see Using Layers, below.
  • On the right is the palette. Drag components from the palette onto the canvas.
  • Above the toolbar, are tabs?? where you can find things that you might want to usequick access to lists of:
    • other palettes
    • component categories
    • templates: components that can be added to a palette
    • styles
    • menus
    • images.

Unlock a Screen Canvas

To prevent accidental editing of a screen, PhixFlow opens an existing screen with the canvas locked:

  • when you first open an existing screen in 
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
  • when you switch between 
    Insert excerpt
    _design_mode
    _design_mode
    nopaneltrue
     and 
    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
    .

To unlock the canvas, right-click on the canvas and select

Insert excerpt
_layout_unlock
_layout_unlock
nopaneltrue
.

Adding Components to a Screen

A typical screen has a nested structure, as shown in the following picture.

Image Removed



Using the Palette

The way a screen is made up of layers of layered components is reflected in the way components are grouped in the palette. At the top level are the pre-built items, such as:

  • Complete Forms - drag in a single tile that has all the components to crete a full screen.
  • Form Elements - drag in several tiles to design your own screen. Each tile has layers of components, such as an area with headers, fields and labels.

If you want more control over the design of your screen, drag individual components from Base Components and Data Elements. Start by dragging in area components to use partially prepared components:

  • Tile containers - drag these in to be the containers.
These will give you
  • Containers create distinct areas on the screen, with padding and margins so that child items can be automatically positioned.
  • Tile containers - create the areas on your screen design
  • You can then drag in Tiles or tile elements. These are still composites of several components.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.

Tip

You do not need to add lots of individual form fields to your screen. Instead you can:

select

.

  • Base Components - build up the different things you want on the screen from the base up.
  • Data Components - add components designed to display data.

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. You can:

  1. Select the attributes you want to apper in a form.
drag
  1. Drag the attributes onto the parent container
for the form
  1. .
let
  1. Let PhixFlow create default form fields in which to display data records.

For how to do this, see Showing Data on a Component.

Alternatively, you can add components, such as fields, and bind them to data later.

Fields that do not know what data to show If you have already created fields fields, they are displayed with a broken link icon??, and those that have a data binding show the link icon??. Drag on attributes to bind them to the field.


For your selected template, PhixFlow displays a palette. This has all the "bits" or components you need to build a screen.

Tip

The easiest way to move components around is in the layers panel, rather than in the screen itself. When you are dragging things around in the screen, PhixFlow may not know if you want to drop a component:

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

If instead you drag acomponent in the list of layers, you can be specific about how the component relates to other components on the screen.  

If you are using PhixFlow's palette, most components will flow into the space that is available to them. see Using Size and Position for Responsive Design.

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

.



Image Removed

Using Layers 

Screen Design and Layers :
Anchor
layer
layer

As you add components to the screen, they are nested so that there is an outer container (parent) with components inside (children). A typical screen has a nested structure, in which the main areas are the parents for other components. This is illustrated below:

Image Added
Another way to show these layers is as a heirarchy. For example:
Screen
Controls area
Menu 1
Menu 2
Main area
Header
Tile container area
Sub-header
Tile Body
Area 1
Grid
Area 2
Form
Button Bar
Footer area
Button 1
Button 2

To show the parent/child hierarchy for a screen, click 

Insert excerpt
_layer_slider
_layer_slider
nopaneltrue
. There is an example on the right.

You can

  • Select something on your screen to see it/them highlighted in the layers list.
    • Selected items outlined in blue
    • Parent item outlined in orange.
  • in In the layers listpanel, drag components around to move them change their position on the screen. 


See Also

Refer to details in other pages

For how to display data see: 


Image Added

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.

Image Added


Testing Screens

PhixFlow aims to show you how the screen will appear to users. However, when you are working in 

Insert excerpt
_design_mode
_design_mode
nopaneltrue
there are visible elements to help you with the process of screen design. For example, the top of the canvas shows the screen toolbar, and components that are connected to data are marked with glyps. To see how a screen will appear to a user and to test how it is working, switch to 
Insert excerpt
_app_mode
_app_mode
nopaneltrue
. You can now interact with the screen as if you are an application user.

Image Removed