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

Open an Existing Screen

Click the Design menu item from the top menu
Insert excerpt
_screen
_screen
nopanel true
or in the repository, expand your application's Screens section.
Double-click the desired Screen to open it.
PhixFlow opens the Screen on the left.
Right-click anywhere on the Screen to open the pop-up menu and select
Insert excerpt
_layout_unlock
_layout_unlock
nopanel true
.
PhixFlow displays the toolbar for the screen indicating it is ready to edit.
Click
Insert excerpt
_palette
_palette
nopanel true
to display the palette on the right and you can begin editing the screen.

Base Components - build up the different things you want on the screen from the base up.

Data Components - add components designed to display data.

Add a New Screen

Click the Design menu from the top menu
Insert excerpt
_screen
_screen
nopanel true
or in the repository, expand your application's Screens section.
Click
Insert excerpt
_add
_add
nopanel true
, PhixFlow opens the properties for a new Screen.
Enter a Name for the screen.
Specify the setup for the screen such as should the screen open maximised or as a floating pop-up. These can be changed at a later time by accessing the screen properties from the toolbar.
Here are some example setups:
- Pop-up screen:
  - tick Always on top
  - tick Allow user to resize
  - Set Position to Floating and if desired set the other positional settings such as the size and location of the screen.
- Full-screen properties
  - tick Open Maximised
  - untick Always On Top
  - if you intend to make your own navigation or screen controls, untick Show Window Button Bar.
  - optionally, untick Allow user to resize
(Recommended) Scroll down to the Description section and add a useful description.
In the properties toolbar, click
Insert excerpt
_finish
_finish
nopanel true
.
PhixFlow opens a new, unlocked, Screen canvas on the left.
In the toolbar click
Insert excerpt
_palette
_palette
nopanel true
to display the palette on the right and begin editing.

Unlocking and locking a Screen

Locking a screen will make it uneditable while it remains locked and displays the screen content as the end user will experience it. For example clicking a button will trigger its action and components such as a URL component will display their content. Unlocking a screen will make it editable again and allow you to update the layout.

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

Insert excerpt

	_layout_unlock
	_layout_unlock
nopanel	true

.

To Lock the canvas, from the screen toolbar click on

Insert excerpt

	_layout_lock
	_layout_lock
nopanel	true

.

Design Mode and Application Mode

When creating and editing applications we work in Design Mode. This provides us access to all the tools and options necessary to create powerful applications. To experience your application as the end user will, we switch to App Mode.

The option to toggle between modes is available in the top right corner of PhixFlow,

Insert excerpt

	_design_mode
	_design_mode
nopanel	true

and

Insert excerpt

	_app_mode
	_app_mode
nopanel	true

.

Using the Palette

The way a screen is made up 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 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.

If you want more control over the design of your screen, use partially prepared components:

Tile containers - 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.

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.

Tip

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.

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

Image RemovedImage Removed

Screen Design and Layers : AnchorlayerlayerA typical screen has a nested structure, in which the main areas are the parents for other components. This structure, combined with appropriate styling, can create a responsive design that can adapt to both desktop and mobile devices. The nested structure is illustrated below:

Image Removed

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_slidernopaneltrue. 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 the layers panel, drag components around to change their position on the screen.

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

Testing Screens

To test an application screen, click

Insert excerpt

	_app_mode
	_app_mode
nopanel	true

to interact with the screen as if you are an application user.

HTML Comment

hidden	true

Features to be implemented:

Select an Existing Screen

From the application Home window, select Design Screens.
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
nopanel	true

Create a New Screen

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

Click
Insert excerpt
_new
_new
nopanel true
Create New to create a new screen.
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.
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
Click Confirm.
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. -Screenshot-

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 Us L8213987396, below.
On the right is the palette. Drag components from the palette onto the canvas.
Above the toolbar, you can find quick 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
nopanel true
when you switch between
Insert excerpt
_design_mode
_design_mode
nopanel true
and
Insert excerpt
_app_mode
_app_mode
nopanel true
.

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

Insert excerpt

	_layout_unlock
	_layout_unlock
nopanel	true

.

Version	Old Version 49	New Version 50
Changes made by	Anthony George	Anthony George
Saved on	Nov 29, 2021	Nov 29, 2021

Versions Compared

Key

Open an Existing Screen

Add a New Screen

Unlocking and locking a Screen

Design Mode and Application Mode

Using the Palette

Creating Forms Easily

See Also

Where Can I Drop This?

Testing Screens

Select an Existing Screen

Create a New Screen

The Screen Canvas and Options

Unlock a Screen Canvas

Page Comparison

Versions Compared

Key

Open an Existing Screen

Add a New Screen

Unlocking and locking a Screen

Design Mode and Application Mode

Using the Palette

Creating Forms Easily

See Also

Where Can I Drop This?

Testing Screens

Select an Existing Screen

Create a New Screen

The Screen Canvas and Options

Unlock a Screen Canvas