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

Screens

Opening an Existing Screen

1. Load your application.
2. To open a an existing screen:
   • either, in the header bar, click

     Insert excerpt
     _screen _screen nopanel true

      and click a screen from the listin 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.
3. PhixFlow opens the locked screen in the canvas with the screen locked.
4. To unlock the screen for editing, right-click anywhere on the screen to open the popup menu and select 

   Insert excerpt
   _layout_unlock_layout _unlock nopanel true

   .
5. PhixFlow displays the toolbar for the screen indicating it is ready to editso that you can begin to make changes.
6. Click 

   Insert excerpt
   _palette _palette nopanel true

    to display the palette on the right. Drag components from the palette into the screen.

Unlocking and

Add a New Screen

Locking a Screen for Editing

When you first open an existing screen in

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 nopanel true

     .
     PhixFlow displays the list of available screens with an 

     Insert excerpt
     _add_screen _add_screen nopanel true

    or
   •  button on the left.
   • or in the repository, expand your application's Screens section, which includes an 

     Insert excerpt
     _addIcon _addIcon nopanel true

      button.
2. Click 

   Insert excerpt
   _addaddIcon _addaddIcon nopanel true

   ,. PhixFlow opens a window with basic options for your screen. These options are saved in the screen creation wizardproperties.
   • Enter a Name for the screen.
   Tick to specify if the screen should open maximised or not.These can be changed at a later time by accessing the screen's properties from the toolbar
   • 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.
3. 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 

. 

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

Unlocking and locking a Screen for Editing

Locking a screen will makes it interactive, and therefore uneditable, while it remains locked it 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, clicking a button now will open its properties editor.

• .

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 nopanel true

   .
   PhixFlow displays the list of available screens.
2. Click the 

   Insert excerpt
   _add_menu _add_menu nopanel true

    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.

Testing Screens

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

PhixFlow runs applications in 

Design Mode and Application Mode

When creating and editing applications we work in Design Mode. This provides you 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, , 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 

  Insert excerpt
  _lock _lock nopanel true

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

Testing Screens

Deleting Screens

Screen can be deleted from the Screens homepage or the 

Image Added

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

Note: