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
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.
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:
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Live Search | ||||||||
|---|---|---|---|---|---|---|---|---|
|
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
- Click
Create New to create a new screen.Insert excerpt _addnew _addnew nopanel true - 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 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, 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
andInsert excerpt _design_mode _design_mode nopanel true
.Insert excerpt _app_mode _app_mode nopanel true
To unlock the canvas, right-click on the canvas and select
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
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 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, 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.
- 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:
- Select the attributes you want to apper in a form.
- Drag the attributes onto the parent container.
- Let PhixFlow create default form fields in which to display data records.
For how to do this, see Showing Data on a Screen.
If you have already created 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 "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:
|
Screen Design and Layers :
| Anchor | ||||
|---|---|---|---|---|
|
A typical screen has a nested structure, in which the
To show the parent/child hierarchy for a screen, click
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
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.
See Also
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.
Testing Screens
PhixFlow aims to show you how the screen will appear to users. However, when you are working in
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|
| Insert excerpt | ||||||
|---|---|---|---|---|---|---|
|