Adding a Navigation Menu Bar

Overview

PhixFlow allows you to create navigation menus that always appear. This allows for a single menu to be set up that can be accessed from any point in your application. It is also possible to set up a menu that only displays when called. Template navigation menus are provided with the Serene Grey Template Pakage.

Create a Custom Menu

  1. From the Screens home page click  Create Menu.
  2. Complete the details:
    1. Name, indicative of the menu being created.
    2. Add to startup action, leave ticked if you want the menu to open with the application.
    3. Position, Where you would like the menu to appear. Defaults to Pinned to Top.
    4. Height/Width, If using Pinned to Top the Serene Navigation menu is designed to be 50px.
    5. Description, for example, Main navigation menu for application.
    6. Template section, scroll through the templates and click on the desired navigation menu.
  3. Click Create 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 screen Screen
  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 automatically creates an actionflow that will open this screen.
    1. To  edit the actionflow, right-click the button and select Display Actionflow; see Understanding Actionflows.
  8. This process is illustrated here:

Updating the Navigation Button Icon

  1. Click on the button to open its properties.
  2. Click the  Style tab
  3. Scroll down to Image
  4. Tick the box to override the style.
  5.  allows you to add a new image.
    1. Follow the prompts to add a new image.
  6.  List Images allows you to select an existing image.
    1. A list of available images appears, drag the desired image into the input box.
  7.  Save your changes.

Example Setup