Fly-out Menu

 

Overview

When your Global Navigation is set to Fly-out Menu, you will be allowing your end users access to the sections of your app at all times, no matter what page they are on.

A Fly-out Menu is very similar to a Menu List.  You can have as many rows as you want, and each row can point to an AppBlock.





In the left-hand menu under AppBlocks, you'll see an AppBlock named 'Fly-Out Menu'.


You can change the name of the menu on the Configuration page of this AppBlock and you can design what your menu will look like by going to the Canvas View for that AppBlock.


 


 

Setup




You will see a canvas page with a greyed out section to the right. This greyed out section will be un-editable.

The area on the left of the canvas will be your Fly-Out Menu. You can control how wide this area is by hovering over the vertical dotted line and dragging sideways to adjust.

The width of the white area here will decide how wide your Fly-Out Menu is in your app.


 

 

 

You can adjust the height of a row by hovering over the dotted horizontal line and dragging up-and-down to adjust.

Each row can be a different height.

 

 

 


 

If you right-click on a Fly-out row, you will see options for adding new Menu List Items as well as pixel dimensions for the row you right-clicked on.

A "Menu List Item" is just a row in the Fly-out Menu.


Once you have decided on the width of your Fly-Out Menu and the height of the rows, you can begin to build out the design and point the rows to sections you build in your app.  You can still adjust the height and width later if needed.

To design the appearance of your Fly-out Menu, drag Text Labels and Images from the Tool Box onto the canvas.  Once on the canvas, click an item to set its display properties.

This video shows how you can setup your Fly-out Menu:



Each row is essentially a pre-set button that lets you point it to one of the different AppBlocks you have created. Right-click on one of the rows and select "Customize Menu List Item", and you will be able to set the target AppBlock.


 


Adjustments

You can set a row to be the "Default Landing Page" - when the app is launched, it will go to the AppBlock pointed to by this row (after any Access Management or Global Instructions pages, if applicable).  

You can use drag-and-drop to reorder the rows.

You can set the Selected Row Highlight Color in the Properties box under the Style tab.  You probably want to make it semi-transparent, which you can do by adjusting the percentage (100 by default) in the "A" box of the color-picker.

This video shows how you can adjust your Fly-out Menu:


 

iPhone: Fly-out Menu on About Us page

iPhone: Fly-out Menu on Form page

 

If you set a Default Landing Page that is not the Home page, you will need to point a Fly-out row to the Home page if you want your app users to be able to get to the Home page.