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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
|
Insert excerpt | ||||||||
---|---|---|---|---|---|---|---|---|
|
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
From the Screens home page, click
.Insert excerpt _createMenu _createMenu nopanel true Complete the details:
Name - indicative of the menu being created
Add to startup action -
Insert excerpt _
toggle_
on _
vertical dimensions:
width: 100%
height: 50px
horizontal dimensions
width: 200px
height: 100%
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
if you want the menu to open with the applicationtoggle_on nopanel true All users can View Data - toggle off to only allow selected user groups to view the menu. See Managing User Groups and Privileges.
Position - where you would like the menu to appear. Defaults to
Pinned to Top
Height/Width - If using Pinned to Top, the Serene Grey Navigation menu is designed to be 50px
Description, for example,
Main navigation menu for application
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.
Click Create Application Menu.
This may take a few minutes to generate the menu.
Adding Navigation Menu Buttons
There are two methods to add buttons.
Method 1: Drag Screen onto Navigation Menu
Open your Navigation Menu and ensure it is
edInsert excerpt _unlock _unlock nopanel true - From the toolbar, click
s to open the list of available Screens in the RepositoryInsert excerpt _screen _screen nopanel true - Drag the screen you wish to open onto a clear space on the Navigation Menu, i.e. not on top of an existing button
Provide a name for the button and continue
PhixFlow automatically creates an actionflow that will open this screen
To edit the actionflow, right-click the button and select Display Actionflow; see Understanding Actionflows.
This process is illustrated here:
Note | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
The default settings for a menu button must be set up for this method to work. In your application's
This can also be setup in the System Configuration. See System Configuration. |
Method 2: Create button and link to screen
Open your Navigation Menu and ensure it is
edInsert excerpt _unlock _unlock nopanel true Open the Palette and open Buttons - Navigation
Drag Button - Custom onto the Navigation Menu and give it a name
From the toolbar, click
s to open the list of available Screens in the RepositoryInsert excerpt _screen _screen nopanel true - Drag the required screen and drop it onto the button you just created
PhixFlow automatically creates an actionflow that will open this screen
To edit the actionflow, right-click the button and select Display Actionflow; see Understanding Actionflows.
This process is illustrated here:
Updating the Navigation Button Icon
Click on the button to open its properties
Click the
Insert excerpt _property_tabs _property_tabs name style nopanel true Scroll down to Image
Tick the box to override the style
allows you to add a new imageInsert excerpt _addIcon _addIcon nopanel true Follow the prompts to add a new image
allows you to select an existing imageInsert excerpt _image_list _image_list nopanel true A list of available images appears, drag the desired image into the input box
your changesInsert excerpt _save _save nopanel true