Sidebar Menu

WorkWithPlus provides the possibility to have different styles of Vertical and Horizontal Menu in your Master Page. 

When you run the "Design System Wizard", you have different menus available. These menus have different styles so you can select the one that you prefer for your application:

Menu Style wizard step 4 of 9 for a WorkWithPlus generated app. Left panel Settings shows Orientation (Vertical/Horizontal, red-highlighted) and Style options (Light, Dark, With image, red-highlighted, With image selected) plus Load Menu, Image Menu, and checkboxes for Include search menu option, Include user info, and Include user photo. The preview shows a red-themed vertical sidebar menu (DVELOP logo, user John Freeman Administrator, search box, Dashboard, Transaction, Selection, View, Wizards, Security items) beside a Persons Sample Selection grid with Id and Full Name columns.

This menu is loaded by a Data Provider which is called 'MenuOptionsData'

GeneXus Source code editor for the MenuOptionsData procedure, showing the DVelop_Menu structure with an initial &id counter, an Item block for Inicio (Home) with iconClass menu-icon fa fa-home, and the start of a second Item block for "Opcao de Menu 1" containing subItems with captions "Opcao de Menu 1.1" and "Opcao de Menu 1.2" and authorizationKey properties.

Each item of it represents a line in the Menu and has the following data to load:

GeneXus source code snippet defining a single menu Item block with properties &id, id, tooltip, link, linkTarget, iconClass set to "menu-icon glyphicon glyphicon-tasks", and caption "Opcion de Menu 1", used in a MenuOptionsData-style procedure.

Also, you can add subitems:

GeneXus source code for a menu Item block captioned "Opcion de Menu 1" with iconClass glyphicon-tasks, containing a red-highlighted subItems collection with two nested Item blocks captioned "Opcion de Menu 1.1" and "Opcion de Menu 1.2", each with an authorizationKey property, illustrating how submenu entries are declared in the menu data procedure.
 

Generated DVELOP application sidebar and Persons grid, with a red arrow and label "Item" pointing to the top-level Persons menu entry, and a red arrow and label "Subitems" pointing to its expanded submenu list (Persons, Persons (With Scroll), Persons (Multi line), Persons (Edit in Grid), Person Wizard (A), Person Wizard (B)), next to the Persons Work With grid showing Id and Full Name columns.

If you want to customize the icons that the menu use you need to change the line 'IconClass' of the item in the Data Provider.

The menu uses the icons from Font Awesome:

For example to change the first item of the Menu:

Generated DVELOP application sidebar menu with the top item "Inicio" (Home), showing a house icon, highlighted with a red box, followed by "Opcion de Menu 1", "Opcion de Menu 2", "Opcion de Menu 3", and "Menu de Desarrollo" items each with a chevron for expandable submenus.

You can use a free icon from Font Awesome:

Font Awesome icon gallery filtered by the search term "new" and the Free category, showing 27 matching results in a grid of icons (newspaper, hacker-news-square, file, external-link-alt, cart-plus, kiwi-bird, plus-square, calendar-plus, folder-plus, glass-cheers, etc.). A red arrow points to the "external-link-alt" icon, used for referencing a Font Awesome icon class name.

You have to copy the name of the class and set it, in the 'IconClass' line:

GeneXus Source code editor for the MenuOptionsData procedure showing the DVelop_Menu structure and the first Item block for Inicio (Home); the iconClass value "fa fa-home" is highlighted with a red box, illustrating where the Font Awesome icon class is set for a menu item.

At runtime is shown as below:

Generated DVELOP application sidebar menu showing the Inicio item now displaying a pencil-in-box (edit/external-link style) icon, highlighted with a red box, instead of the default home icon, followed by Opcion de Menu 1, 2, 3, and Menu de Desarrollo items.

Comment: you can buy the full version of Font Awesome in order to have more available icons.

If you change the 'SearchServiceUrl' property of  User Control UCMenu in WorkWithPlusMasterPage, you can show or hide the search box from the menu.

Composite comparison of the WorkWithPlusMasterPage GeneXus object and its generated sidebar menu. Left side shows the Patterns editor tree with User Control: UCMenu selected and its User Control Properties panel open, where SearchServiceUrl is set to "xxx" (highlighted), captioned "With xxx value", producing a sidebar with a working Search menu option box above Home, Menu Option 1-3. Right side shows the same sidebar without the search box, captioned "Without xxx Value", when SearchServiceUrl is empty.