Versions Compared

Key

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

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

Overview

PhixFlow allows you to create navigation menus that always appear. This allows for a single menu to be setup set up that can be accessed from any point in an your application. It is also possible to setup set up a menu that only displays when called, for example if you create a configuration menu for your application that is only shown when the user clicks a button.An application menu, in version 9.0+ of PhixFlow, is configured as a screen and as such can be positioned in different places on the screen. Template menus are provided within the Template Packages that are styled to fit with the look and feel of the rest of the items in the template package. See Installing Template Packages if you need to install oneTemplate navigation menus are provided with the Serene Grey Template Pakage.

Create a Custom Menu

  1. From the Screens home page click Add New
    Insert excerpt
    _createMenu
    _createMenu
    nopaneltrue
    .
  2. Complete the details:
    1. Name, indicative of the menu being created.
  3. Open Maximised, Untick. We will specify the size of our menu later.
  4. Menu section
    1. Add to startup action, leave ticked if you want the menu to open with the application.
    2. Position, Where you would like the menu to appear. Defaults to Pinned to Top.
    3. Height/Width, If using Pinned to Top the Serene Navigation menu is designed to be 50px.
    4. Description, for example, Main navigation menu for application.
    5. Template section, scroll through the templates and click on the desired navigation menu.
      Image Modified
  5. Click Create Screen.
  6. The screen opens
  7. Click Properties from the toolbar.
    • Untick Allow Manual Resizing
    • Set Position to Pinned to... the position of your menu. For example Pinned to Top.
    • Set the Height and Width for your menu item. We suggest:

      • for top menus: height of 45px

      • for side menus: width of 250px
  8. Save your changes.
  9. Close and reopen the menu to see the updates.
Note

For a horizontal menu a drop-down button will not work. To create menu with drop-downs; see Startup Actions.

Adding Menu Options

To add buttons to your navigation menu that open a screen:

  1. Find the screen in the repository.
  2. Drag the screen onto the menu bar.
  3. Provide a display Application Menu. Give this time to generate the menu.


Adding Navigation Menu Buttons

  1. Open your navigation menu and ensure it is unlocked.
  2. Drag, Palette → Buttons - Navigation → Button Custom onto the Navigation Menu.
  3. From the Screens context toolbar click 
    Insert excerpt
    _screen
    _screen
    nopaneltrue
  4. A list of available screens will open on the right.
  5. Drag the screen you wish to open onto the button.
  6. Provide a name for the button and continue.
  7. PhixFlow adds the menu button and automatically creates the an actionflow that will open this screen.

When an application user clicks the menu button, the screen opens automatically.

Automatically Display a Menu

To automatically show a navigation menu when an application starts up we use, Startup Actions, which are set to run when an application opens:

    In the repository navigate to the startup section and add a new startup action using the  Insert excerpt_add_addnopaneltrue button.
  1. Tick Default Desktop Action, if you want this to be for desktop devices.
  2. Tick Default Mobile Action, if you want this to be for mobile devices.
  3. Action Method, select the actionflow that opens your navigation menu screen. If you hae not yet created one use the  Insert excerpt_add_addnopaneltrue button to do so. Help on this topic can be found in 
    1. To  edit the actionflow, right-click the button and select Display Actionflow; see 
Understanding Actionflows.
    1. Understanding Actionflows
    .Save your changes and now when you open your application the avigation bar will appear
    1. .