Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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

Insert excerpt
_screen
_screen
nopaneltrue
. PhixFlow opens the screens window.

Opening an Existing Screen

  1. To open an existing screen:
    • either, in the header bar, click
      Insert excerpt
      _screen
      _screen
      nopaneltrue
       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.
  2. PhixFlow opens the screen in the canvas with the screen locked.
  3. To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select 
    Insert excerpt
    _unlock
    _unlock
    nopaneltrue
    .
  4. PhixFlow displays the toolbar for the screen so that you can begin to make changes.
  5. Click 
    Insert excerpt
    _palette
    _palette
    nopaneltrue
     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
nopaneltrue
, 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
nopaneltrue

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

  1. To create a new screen:
    • either, in the header bar, click 
      Insert excerpt
      _screen
      _screen
      nopaneltrue
      .
      PhixFlow displays the list of available screens with an 
      Insert excerpt
      _add_screen
      _add_screen
      nopaneltrue
       button on the left.
    • or in the repository, expand your application's Screens section, which includes an 
      Insert excerpt
      _addaddIcon
      _addaddIcon
      nopaneltrue
       button.
  2. Click 
    Insert excerpt
    _addaddIcon
    _addaddIcon
    nopaneltrue
    . 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 optionstemplates. To design your own, screen, select the empty layout.
  3. PhixFlow creates a 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
nopaneltrue
 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
    nopaneltrue
     → Basic Settings:
    • tick Always On Top
    • tick Allow Manual Resizing
  • in
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
     → 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
    nopaneltrue
     → 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  

  1. To create a menu in the header bar, click 
    Insert excerpt
    _screen
    _screen
    nopaneltrue
    .
    PhixFlow displays the list of available screens.
  2. Click the 
    Insert excerpt
    _add_menu
    _add_menu
    nopaneltrue
     button on the left.
  3. Enter a Name for the menu.
  4. Select one of the menu layout options.
  5. 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
nopaneltrue
 .

PhixFlow runs applications in 

Insert excerpt
_app_mode
_app_mode
nopaneltrue
, 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
    nopaneltrue
    , in the screen toolbar, click on 
    Insert excerpt
    _lock
    _lock
    nopaneltrue
    .
  • or, in the header bar on the right, click
    Insert excerpt
    _app_mode
    _app_mode
    nopaneltrue
     to run your application as an application user.

Deleting Screens

Screen can be deleted from the Screens homepage or the 

Insert excerpt
_repository
_repository
nopaneltrue
 by right-clicking and choosing 
Insert excerpt
_permanentlyDelete
_permanentlyDelete
nopaneltrue
.    

Image Added

In PhixFlow version 11+, deleting a screen containing an area only used by that screen also deletes the area. Note:

Insert excerpt
_template
_template
nopaneltrue
 are unaffected.