Menus

Menus are obviously a key element of any App and in the Evoke menu builder area you can establish a menu for your app just how you want it to appear.
Menus in Evoke Apps will adapt automatically. The default menu will appear on large screens as the "full menu" shown on the right and on small screens as the "small screen menu". Menu styling (colours, menu help button, etc) is in App Settings.
The default menu also has the pin that can be used to unpin the "full menu" to the "small screen menu" and then lock it in place again.
The Evoke menu builder section (shown left) allows full management and configuration of the menu for your App.
You simply add menu items to your menu as either "Siblings" (menu items on the same level) or "children" (menu items one level down) and you can continue with this process for as many menu items and menu levels as your App needs.
Icon and Titled Menus
In addition to the text menu, Evoke Apps can also have icon based menus, tiled menus and minimal menus. As shown below.
               
The App user can use the elypsis menu available at the top of the menu bar (see image below) to select which menu view they want to use:


In the menu section of Evoke, in are "Node details" for each menu item (see image) there are the options:
"Caption" - this is the name that will apear in the app menu.
"Name" - this is the internal Evoke name for this menu item.
"show image" check box - Once checked two new entry boxes appear. In the new entry boxes you enter the paths to TWO images,
a light image "Image (white) path" and
a darker image "Image (darker) path".
The lighter image will be shown in the main part of the menu and the darker image is used ONLY if the menu has child menu items (it will appear in the lighter "back" menu navigation box.).
"Page Series" is the page series that this menu item is linked to (see Linking menu items below).
"Network Connectivity Mode" is described in more detail below as is the
"Access Control Summary" which is described fully in the Access Control section below.

Please remember to also set the title image in App Settings. See 'Show main menu title image' (Checkbox), in App Settings, which controls the image used in the menu title.

The menu images are to be uploaded in two formats as they are used against a dark and a light background. These images must be fixed sizes: 28px height and 28 pixels width. If you wish to use double, triple and quadruple density images to have extra crisp images on different density displays then in addition to the initial image selected, upto three further images can be placed in the same location (Windows folder) as the initial image. Use the naming convention "initial image name@2x", "initial image name@3x","initial image name@4x" with sizes 56px by 56px, 84px by 84px and 112px by 112px for the additional images.
Menu Icons are provided by you, however, there are dozens of great websites offering free icons and premium icons. Google search "icons".
Linking Menu Items
Each menu item is named and then linked to a Page Series to define the screens and functionality that touching/clicking the menu item will call upon.
Network Connectivity Mode
The Network connectivity mode setting for a menu node allows you to define whether the menu option is to be available if a native version of the app is running on a device which does not currently have a live data connection. There are 3 options available:
  • Always

  • This setting indicates that the menu node will always be displayed (and can therefore be selected by the user) irrespective of the current status of a data connection on the native device.

  • Online-only

  • This setting indicates that the menu node will only be displayed if there is currently a live data connection available on the native device.

  • Offline-only

  • This setting indicates that the menu node will only be displayed if a live data connection is not currently available on the native device.


Full menu


Small screen menu


Menu with Icons


Tiled Menu




Access Control of Menu Items
Evoke offers Access Control to provide completely unique App experiences for each user, based on their user group/level or data (either entered or retrieved from the database). Access control allows you to show/hide different menu options for different groups, show/hide different data or information on pages, follow different paths through the app, or enable/disable control of a function such as a menu item, so the user can see it but maybe not use it until they upgrade to a premium account or similar. Access Control is described in more detail in the
evoke access control section.
When you set up either user group access control or data based access control for menu items, page components, etc the access control summary box will show either “Controlled via User Groups” or “Controlled via Data” to show that an access control has been set for this menu/page component/etc and which type it is.