This page explains how to open a screen or create a new one.

Select an Existing Screen

From the application Home window, select Design Screens.
Select one of the listed screens; remember you can change the format of the list to see more names.

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

Insert excerpt_home_screen_home_screennopaneltrue

Panel

borderColor	#00374F
titleColor	white
titleBGColor	#00374F
borderStyle	solid
title	Sections on this page

Table of Contents

maxLevel	3
indent	12px
style	none

Locking and Unlocking the Screen Canvas

To prevent accidental editing of a screen, PhixFlow sets the canvas to be locked:

when you first open an existing screen in

Insert excerpt

	_Banners
	_Banners
name	screen
nopanel	true

To create or edit a screen, load your application then in the header bar, click

Insert excerpt

	_screen
	_screen
nopanel	true

. PhixFlow opens the screens window.

Screens

Opening an Existing Screen

To open an existing screen:
- either, in the header bar, click
  Insert excerpt
  _screen
  _screen
  nopanel true
  and in the list, click on the screen name you want to open
- or in the repository, expand your application's Screens section and double-click a screen name.
  Alternatively, right-click the name and select Display.
PhixFlow opens the screen in the canvas with the screen locked.
To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select
Insert excerpt
_unlock
_unlock
nopanel true
.
PhixFlow displays the toolbar for the screen so that you can begin to make changes.
Click
Insert excerpt
_palette
_palette
nopanel true
to display the palette on the right. Drag components from the palette into the screen.

Unlocking and Locking a Screen for Editing

When you first open an existing screen in

Insert excerpt

	_design_mode
	_design_mode
nopanel	true

when you switch between

, it is locked so that you do not accidentally move any of the components. There is no canvas toolbar visible. To edit the screen, you must unlock it. Right-click on the canvas and select

Insert excerpt

	_

design_mode_design_mode

unlock
	_unlock
nopanel	true

.

An unlocked screen has all the toolbar and pop-up menu options that you need to move components and edit their properties. If you click on a component, such as a button, PhixFlow opens its properties.

Creating a New Screen

To create a new screen:
- either, in the header bar, click
  Insert excerpt
  _screen
  _screen
  nopanel true

and

- .
  PhixFlow displays the list of available screens with an
  Insert excerpt
  _

app

- add_

mode

- screen
  _

app

- add_

mode

- screen
  nopanel true
  button on the left.

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

- or in the repository, expand your application's Screens section, which includes an
  Insert excerpt
  _

layout_unlock

- addIcon
  _

layout_unlock

- addIcon
  nopanel true
  button.

Create

Click
Insert excerpt
_

add

addIcon
_

add

addIcon
nopanel true

to create a new screen.

Select a screen template. This will give you pre-set layouts such as:

full screen or pop-up
basic screen layout, such as data grid or form
desktop or mobile screen dimensions.

PhixFlow prompts you to:Enter the name and description

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 in from the palette.

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

Screen Design

Screens tabs

Palettes
Component Categories
Templates
Styles
Menus
Images

Adding Components to a Screen

For your selected template, PhixFlow displays a palette. This has all the "bits" or components you need to build a screen. A typical screen has a nested structure, as shown in the following picture.

Image Removed

The way a GUI screen is made up of levels of content is reflected in the way components are constructed and grouped in the palette. At the top level are the most pre-built items

Image Removed

Complete Forms - a full screen layout
Form Elements - sets fo components prebuilt to make it easy to create a customised screen

If you do not want to use these, you can design your own screen. Some components are designed to be containers. These will give you distinct areas on the screen, with padding and margins so that child items look sensible.

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.

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 the attributes you want to apper in a form
drag the attributes onto the parent container for the form
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 are displayed with a broken link icon??, and those that have a data binding show the link icon??

Image Removed

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

As you add components to the screen, they are nested so that there is an outer container (parent) with components inside (children). You can see the parent/child hierarchy in the Layers List. Click the layers tab on the left to show the layers list. Image Removed 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 list, drag components around to move them on the screen.

Testing Screens

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

. PhixFlow opens a window with basic options for your screen. These options are saved in the screen properties.
- Enter a Name 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

- By default, the screen opens maximised in the PhixFlow window.
  Untick Open Maximised if you want a popup window.
- Select one of the screen layout templates. To design your own, screen, select the empty layout.
PhixFlow opens the new screen with the selected layout template and prompts for the details of the table that will be used to populate the screens data.
1. The screen is unlocked and the palette is open in the right panel.

More Screen Properties

There are additional screen properties that affect how the screen behaves. In the toolbar, click

Insert excerpt

	_property_tabs
	_property_tabs
name	_basic
nopanel	true

to open the Screen properties in the right panel. Here are some example screen setups.

For a popup screen, for example for data entry:

in
Insert excerpt
_property_tabs
_property_tabs
name _basic
nopanel true
→ Basic Settings:
- tick Always On Top
- tick Allow Manual Resizing
in
Insert excerpt
_property_tabs
_property_tabs
name style
nopanel true
→ Style Settings
- set Position to Floating
- PhixFlow has defaults for the size and position of a screen. To change these defaults, set:
  - the size of the window using Width and Height
  - the position of the window, using Top, Left, Right and Bottom.

For a maximised screen, for example to display data:

in
Insert excerpt
_property_tabs
_property_tabs
name _basic
nopanel true
→ Basic Settings:
- 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.

Creating a Menu

To create a menu for you application that is always present

To create a menu in the header bar, click
Insert excerpt
_screen
_screen
nopanel true
.
PhixFlow displays the list of available screens.
Click the
Insert excerpt
_add_menu
_add_menu
nopanel true
button on the left.
Enter a Name for the menu.
Select one of the menu layout options.
PhixFlow creates a new menu with the selected layout and will open the menu when your application starts.

Tip
A quick way to create menu options is to drag a screen from the repository directly onto a menu to create a button and actionflow that will open that screen. On the screens home page right-click on the

Testing Screens

When you are creating and editing screens that make up an application, you are working in

Insert excerpt

	_design_mode
	_design_mode
nopanel	true

.

PhixFlow runs applications in

Insert excerpt

	_app_mode
	_app_mode
nopanel	true

, with only essential PhixFlow options displayed in the header bar. All other PhixFlow options are hidden. Instead the application user interacts with the screens and menus you have created.

To switch modes, click the icon in the right of the header bar.

When you have configured part of a screen, you may want to test how it behaves for an application user. For example, you may want to click a button and run its action, or have a URL component display its content. To do this:

either, in
Insert excerpt
_design_mode
_design_mode
nopanel true

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

, in the screen toolbar, click on
Insert excerpt
_lock
_lock
nopanel true
.
or, in the header bar on the right, click
Insert excerpt
_app_mode
_app_mode
nopanel true

. You can now interact with the screen as if you are an application user.

Image Removed

to run your application as an application user.

Deleting Screens

Screen can be deleted from the Screens homepage or the

Insert excerpt

	_repository
	_repository
nopanel	true

by right-clicking and choosing

Insert excerpt

	_permanentlyDelete
	_permanentlyDelete
nopanel	true

.

Image Added

Deleting a screen containing an area only used by that screen also deletes the area.

Note:

Insert excerpt

	_template
	_template
nopanel	true

are unaffected.

Version	Old Version 16	New Version Current
Changes made by	Fiona Sargeant (Unlicensed)	Zoe Baldwin
Saved on	Jun 02, 2021	Aug 14, 2024

Versions Compared

Key

Select an Existing Screen

Locking and Unlocking the Screen Canvas

Opening an Existing Screen

Unlocking and Locking a Screen for Editing

Creating a New Screen

Adding Components to a Screen

Where Can I Drop This?

Using Layers

See Also

Testing Screens

More Screen Properties

Creating a Menu

Testing Screens

Deleting Screens

Page Comparison

Versions Compared

Key

Select an Existing Screen

Locking and Unlocking the Screen Canvas

Opening an Existing Screen

Unlocking and Locking a Screen for Editing

Creating a New Screen

Adding Components to a Screen

Where Can I Drop This?

Using Layers

See Also

Testing Screens

More Screen Properties

Creating a Menu

Testing Screens

Deleting Screens