Insert excerpt

	_Banners
	_Banners
name	screen
nopanel	true

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

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

or

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

Double

- Alternatively, right-click the

desired Screen to open it

- name and select Display.
PhixFlow opens the

Screen on the left.Right

screen in the canvas with the screen locked.
To unlock the screen for editing, right-click anywhere on the

Screen

screen to open the

pop-up

popup menu and select
Insert excerpt

_layout

_unlock
_

layout_

unlock
nopanel true
.
PhixFlow displays the toolbar for the screen

indicating it is ready to edit

so that you can begin to make changes.
Click
Insert excerpt
_palette
_palette
nopanel true
to display the palette on the right

and you can begin editing

. Drag components from the palette into the screen.

Add

Unlocking and Locking a

New

Screen

Click the Design menu from the top menu

for Editing

When you first open an existing screen in

Insert excerpt

	_

screen

design_mode
	_design_

screen

mode
nopanel	true

or in the repository, expand your application's Screens section.Click

, 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

	_

add

unlock
	_

add

unlock
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

.

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
  _

finish

- screen
  _

finish

- screen
  nopanel true
  .
  PhixFlow

opens a new, unlocked, Screen canvas on the left.In the toolbar click

- displays the list of available screens with an
  Insert excerpt
  _add_

palette

- screen
  _add_

palette

- screen
  nopanel true

to display the palette

- button 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

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

layout_unlock

- addIcon
  _

layout_unlock

- addIcon
  nopanel true
  button.

To Lock the canvas, from the screen toolbar click on

Click
Insert excerpt
_

layout_lock

addIcon
_

layout_lock

addIcon
nopanel true
. PhixFlow opens a window with basic options for your screen.

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,

These options are saved in the screen properties.
- Enter a Name for the screen.
- 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

	_

design

property_

mode

tabs
	_

design_mode

property_tabs
name	_basic
nopanel	true

and

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
_

app

property_

mode

tabs

_app_mode

_property_tabs
name _basic
nopanel true

.

Testing Screens

To test an application screen, click

→ Basic Settings:
- tick Always On Top
- tick Allow Manual Resizing
in
Insert excerpt
_

app

property_

mode

tabs
_

app_mode

property_tabs
name style
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.

→ 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
_

home

property_

screen

tabs

_home_screen

_property_tabs
name _basic
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

→ 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
_

new

screen
_

new

screen
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

.
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

when you switch between

, in the screen toolbar, click on
Insert excerpt
_

design_mode

lock
_

design_mode

lock
nopanel true

and

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

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

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

	_

layout_unlock_layout_unlock

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 51	New Version Current
Changes made by	Anthony George	Zoe Baldwin
Saved on	Dec 01, 2021	Aug 14, 2024

Versions Compared

Key

Open an Existing Screen

Opening an Existing Screen

Unlocking and Locking a

Screen

for Editing

Creating a New Screen

Unlocking and locking a Screen

Design Mode and Application Mode

More Screen Properties

Testing Screens

Select an Existing Screen

Create a New Screen

Creating a Menu

The Screen Canvas and Options

Unlock a Screen Canvas

Testing Screens

Deleting Screens

Page Comparison

Versions Compared

Key

Open an Existing Screen

Opening an Existing Screen

Unlocking and Locking a

Screen

for Editing

Creating a New Screen

Unlocking and locking a Screen

Design Mode and Application Mode

More Screen Properties

Testing Screens

Select an Existing Screen

Create a New Screen

Creating a Menu

The Screen Canvas and Options

Unlock a Screen Canvas

Testing Screens

Deleting Screens