Introduction

PhixFlow makes it easy to set up menus and navigation buttons. In this chapter, we will look at creating a simple top menu that we can add navigation buttons to for our application.

Menu

Menus are created in the same way as a screen, as they are essentially the same as a screen. We just set some of their properties a little differently.

1. From the 

   Insert excerpt
   _screen_toolbar _screen_toolbar nopanel true

   home page create a new screen, select 

   Insert excerpt
   _createMenu _createMenu nopanel true

   .
   1. Name, Main Menu.Open Maximised, untick.
   2. Add to startup action, toggle on

      Insert excerpt
      _toggle_on _toggle_on nopanel true

      .
   3. All Users can View Data, toggle on

      Insert excerpt
      _toggle_on _toggle_on nopanel true

      .
   4. Position, Pinned to Top.
   5. Height, 50px.
   6. Description, Application main menu.
   7. Template, Top Menu.
   8. Click Create Application Menu
2. When the screen opens, click the 

   Insert excerpt
   _property_settings _property_settings nopanel true

    button in the toolbar.
   1. Tick, Always On Top.
   2. This ensures the menu always appears and is not covered by another screen.
   3. Click the Styles tab.
   4. Position, Pinned to Top.
   Height, 50px., toggle on

   Insert excerpt
   _

   save

   toggle_on _

   save

   toggle_on nopanel true

    your changes.
   Close and reopen the screen for the changes to be shown
   1. 1. This ensures the menu always appears and is not covered by another screen.
   5. Home Button
      1. From the screens toolbar click 

         Insert excerpt
         _screen _screen nopanel true

         .
      2. From the list that opens, drag the Home screen onto the Home button.
   6. Companies Button
      1. Click on the label containing Screen Name.
      2. Change the Display Text to be, Companies Data.
      3. From the screens toolbar click 

         Insert excerpt
         _screen _screen nopanel true

         .
      4. From the list that opens, drag the Companies List onto this button.
   7. Orders Button
      1. We need to add a new button that will allow us to access the orders.
      2. From the Palette → Navigation Menus section, drag a Button - Custom.
         1. Name, Orders.
         2. Use the layers Layers pane to place the button to the right of the Screen Companies Data button.
      3. From the screens toolbar click 

         Insert excerpt
         _screen _screen nopanel true

         .
      4. From the list that opens, drag the Invoicing screen onto this button.

   Check Point

   Your menu should look like this:

   

   Additional Task

   We can change the icons on the menu buttons using the techniques learnt in 15. Editing Content on Screen - Part 2