Versions Compared

Old Version 2

changes.mady.by.user Fiona Sargeant

Saved on

compared with

New Version Current

changes.mady.by.user Zoe Baldwin

Saved on

Key

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

This page explains how to add a menu bar to your application, to provide navigation and options for the application user.

Overview

It is common for an application to have a menu bar to provide navigation and additional options for the application user. In traditional designs, the menu bar would be across the top of the screen.

Panel
borderColor#00374F
titleColorwhite
titleBGColor#00374F
borderStylesolid
titleSections on this page

Table of Contents
maxLevel3
indent12px
stylenone

Click 

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

Create a Custom Menu

  1. From the Screens home page, click

    Insert excerpt
    _createMenu
    _createMenu
    nopaneltrue
    .

  2. Complete the details:

    1. Name - indicative of the menu being created

    2. Add to startup action - 

      Insert excerpt
      _

app

    1. toggle_

menu_bar

    1. on
      _

app_menu_bar to create a new screen. In the pop-up menu, select the location for the menu bar.
Image Removed
  • Select a blank menu or a template.
  • PhixFlow prompts you to enter the name and description for the menu bar.
    • Specify the the dimensions of the menu bar in percentages or pixcels. For example:

  • vertical dimensions:

    • width: 100%

    • height: 50px

    • horizontal dimensions

  • width: 200px 

    • height: 100%

  • Click Confirm.
  • PhixFlow opens a new screen canvas on the left and the palette on the right.

    • By default your application menu will appear on all your application screens. For this reason the application menu is it's own screen, rather than an area that belongs to a screen.

    ??How do you tell PhixFlow which screens to add it to??

    Select a Blank or template menu

    PhixFlow adds the menu and shows the layers panel.

    Create a menu option to add a screen

    Click into a menu to edit it.

    PhixFlow opens the screen's list on the right.

    To add a top-level option to open a screen, drag the screen onto the menu.

    Under-the-hood: Phixflow creates and actionflow. When a user clicks the option, the screen opens automatically.

    Can you change the text for the menu option

    What about second-level options

    Important: A menu is not an area on a screen. Under-the-hood, it is another screen

    Benefits:

    Restrictions

      1. toggle_on
        nopaneltrue
        if you want the menu to open with the application

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

      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 Grey Navigation menu is designed to be 50px

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

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

    2. 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
      nopaneltrue
      ed 

    2. From the toolbar, click 
      Insert excerpt
      _screen
      _screen
      nopaneltrue
      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 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.

    6. This process is illustrated here:

    Image Added

    Note

    The default settings for a menu button must be set up for this method to work.  

    In your application's

    Insert excerpt
    _property_settings
    _property_settings
    nopaneltrue
    , ensure a style is set for the Menu Button Component in the Default Components section of the
    Insert excerpt
    _property_tabs
    _property_tabs
    namestyle
    nopaneltrue
    . See Application Properties.

    This can also be setup in the System Configuration. See System Configuration.

    Method 2: Create button and link to screen

    1. Open your Navigation Menu and ensure it is

      Insert excerpt
      _unlock
      _unlock
      nopaneltrue
      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
      nopaneltrue
      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 Understanding 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_tabs
      _property_tabs
      namestyle
      nopaneltrue

    3. Scroll down to Image

    4. Tick the box to override the style

    5. Insert excerpt
      _addIcon
      _addIcon
      nopaneltrue
       allows you to add a new image

      1. Follow the prompts to add a new image

    6. Insert excerpt
      _image_list
      _image_list
      nopaneltrue
       allows you to select an existing image

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

    7. Insert excerpt
      _save
      _save
      nopaneltrue
       your changes

    Example Setup

    Image Added