Versions Compared

Key

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

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

Create a Custom Menu

  1. From the Screens home page, click

    Insert excerpt
    _createMenu
    _createMenu
    nopaneltrue
    .

  2. Complete the details:

    1. Name

      , indicative

      - indicative of the menu being created

      .

    2. Add to startup action

      , leave ticked

      - 

      Insert excerpt
      _toggle_on
      _toggle_on
      nopaneltrue
      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

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

      .

    5. Height/Width

      , If

      - 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,

      scroll through the templates and click

       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.

      Image Removed
  3. Click Create Application Menu.

    Give this time

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

Image Added

Adding Navigation Menu Buttons

Open your navigation menu

There are two methods to add buttons.

Method 1: Drag Screen onto Navigation Menu

  1. From the Screens context toolbar

    Open your Navigation Menu and ensure it is

    unlocked.
  2. Drag, Palette → Buttons - Navigation → Button Custom onto the Navigation Menu.
  3. Insert excerpt
    _unlock
    _unlock
    nopaneltrue
    ed 

  4. From the toolbar, click 
    Insert excerpt
    _screen
    _screen
    nopaneltrue
    A s to open the list of available screens will open on the right.Screens in the Repository
  5. Drag the screen you wish to open onto a clear space on the button. Navigation Menu, i.e. not on top of an existing 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:

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 

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

      see 

      see Understanding Actionflows.

  7. This process is illustrated here:

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