Page in draft: this should be the concept page for screen layouts
Overview
- lay out application screen using themes, palettes and components; see
| Panel |
|---|
| borderColor | #00374F |
|---|
| titleColor | white |
|---|
| titleBGColor | #00374F |
|---|
| borderStyle | solid |
|---|
| title | Sections on this page |
|---|
|
| Table of Contents |
|---|
| maxLevel | 3 |
|---|
| indent | 12px |
|---|
| style | none |
|---|
|
|
Image Removed
Select a Screen
- From the application Home window, select Design.
- Either select one of the listed screens; Remember you can change the view from card to list.
Screens tabs
- Palettes
- Component Categories
- Templates
- Styles
- Menus
- Images
Create
- Click Create New to create a new screen.
- Select a screen template. This will give you pre-set layouts such as:
- full screen or popup
- Basic screen layout, such as data grid or form
- desktop or mobile
- Enter the name for the screen and it's description, then 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.
Make sure the ERD and Screen incontext screen text is OK and following the same standards
Use the palette to add components; see link
You can set up data to back all or part of a screen.
In the palette Data Components section, drag in one of the data icons, grid, chart, graph or card.
In the popup, Sselect the table or view that contains the data for this screen then click Confirm / OK
PhixFlow adds the data component to the screen, with its properties.
This goes intow Data Views.
Table popup has Show View, Show Table and Show properties
Alternatively, if the table does not already exist, click Create, then enter the name and description and click Create.
Screen options - Windows control
How do you select Full screen or popup
Layers icon
As you add components to the screen, some are nested. Parents and children. You can see this in the layers panel on the left. Click the layers tab on the left to show the layers list. 
Image Removed
For example on the right.
Select something on your screen to see it/them highlighted in the layers list.
Selected items outlined in blue
Parent item outlined in orange.
On the screen, the parent, container component is also highlighted.
Image Removed
Links
| Panel |
|---|
| borderColor | #00374F |
|---|
| titleColor | white |
|---|
| titleBGColor | #00374F |
|---|
| borderStyle | solid |
|---|
| title | Other pages in this topic |
|---|
|
children| 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 |
|---|
|
, 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 |
|---|
| _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 |
|---|
|
.
PhixFlow displays the list of available screens with an | Insert excerpt |
|---|
| _add_screen |
|---|
| _add_screen |
|---|
| nopanel | true |
|---|
|
button on the left. - or in the repository, expand your application's Screens section, which includes an
| Insert excerpt |
|---|
| _addIcon |
|---|
| _addIcon |
|---|
| nopanel | true |
|---|
|
button.
- Click
| Insert excerpt |
|---|
| _addIcon |
|---|
| _addIcon |
|---|
| nopanel | true |
|---|
|
. PhixFlow opens a window with basic options for your screen. 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.
- 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.
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 |
|---|
|
, in the screen toolbar, click on . - or, in the header bar on the right, click
| Insert excerpt |
|---|
| _app_mode |
|---|
| _app_mode |
|---|
| nopanel | true |
|---|
|
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.