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 one. Template navigation menus are provided with the Serene Grey Template Package.

Create a Custom Menu

1. From the Screens home page

   click Add New

   , click

   Insert excerpt
   _createMenu _createMenu nopanel true

   .

2. Complete the details:

   1. Name

   , indicative

   1. - indicative of the menu being created

   .
3. Open Maximised, Untick. We will specify the size of our menu later.
4. Menu section, scroll through the templates and click on the desired navigation menu.
   Image Removed
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.

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

   2. Add to startup action - 

      Insert excerpt
      _toggle_on _toggle_on nopanel true

      if you want the menu to open with the application

   3. All users can View Data - toggle off to only allow selected user groups to view the menu. See Managing User Groups and Privileges.

   4. Position - where you would like the menu to appear. Defaults to Pinned to Top

   5. Height/Width - If using Pinned to Top, the Serene Grey Navigation menu is designed to be 50px

   6. Description, for example, Main navigation menu for application

   7. Template section, click on the desired navigation menu. Hover over each one to see the full description, or right-click and press Display to see a preview.

4. Click Create Application Menu.

   1. This may take a few minutes to generate the menu.

Image Added

Adding Navigation Menu Buttons

There are two methods to add buttons.

Method 1: Drag Screen onto Navigation Menu

1. Open your Navigation Menu and ensure it is

   Insert excerpt
   _unlock _unlock nopanel true

   ed 

2. From the toolbar, click 

   Insert excerpt
   _screen _screen nopanel true

   s to open the list of available Screens in the Repository
3. Drag the screen you wish to open onto a clear space on the Navigation Menu, i.e. not on top of an existing button

4. Provide a name for the button and continue

5. PhixFlow

   adds the menu button and

   automatically creates

   the actionflow.

1. 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:

1. In the repository navigate to the startup section and add a new startup action using

   1. To edit the actionflow, right-click the button and select Display Actionflow; see 

1. 1. Actionflows

2. This process is illustrated here:

Image Added

Method 2: Create button and link to screen

1. Open your Navigation Menu and ensure it is

   Insert excerpt
   _unlock _unlock nopanel true

   ed 

2. Open the Palette and open Buttons - Navigation

3. Drag Button - Custom onto the Navigation Menu and give it a name

4. From the toolbar, click 

   Insert excerpt
   _screen _screen nopanel true

   s to open the list of available Screens in the Repository

5. Drag the required screen and drop it onto the button you just created

6. PhixFlow automatically creates an actionflow that will open this screen

   1. To edit the actionflow, right-click the button and select Display Actionflow; see Actionflows

7. This process is illustrated here:

Image Added

Updating the Navigation Button Icon

1. Click on the button to open its properties

2. Click the 

   Insert excerpt
   _property_

   add

   tabs

   _add

   _property_tabs name style nopanel true

    button.
3. Tick Default Desktop Action, if you want this to be for desktop devices.
4. Tick Default Mobile Action, if you want this to be for mobile devices.
5. Action Method, select the actionflow that opens your navigation menu screen. If you hae not yet created one use the 

   Scroll down to Image

6. Tick the box to override the style

7. Insert excerpt
   _addIcon _addIcon nopanel true

    allows you to add a new image

   1. Follow the prompts to add a new image

8. Insert excerpt
   _image_list _image_list nopanel true

    allows you to select an existing image

   1. A list of available images appears, drag the desired image into the input box

9. Insert excerpt
   _

   add

   save _

   add

   save nopanel true

    button to do so. Help on this topic can be found in Understanding Actionflows.Save your changes and now when you open your application the avigation bar will appear.

    your changes

Example Setup

Image Added