Table of Contents

Creating a menu

Terminology

When building a cluster application, a menu can be created to provide entry points for the application views.

The application menu is composed of Menus metadata, which are themselves composed of Menu details referencing Menu items.

Note

Each Menu (and its Menu details) is associated with a module but can reference Menu items from various modules.

Primary menu

Menus of type "Primary" will be concatenated to form the main menu of the application.

This will be the default menu used when a panel-menu or menu-button component is used without specifying the name attribute.

Secondary menu

Menus of type "Secondary" will not be included in the application's main menu

They must be manually placed in the template using panel-menu or menu-button components, specifying the menu name via the name attribute.

Creating a new menu item

A menu item represents a clickable element of the menu. For the moment it can only describe the action of opening a UI view.

However, the Caption property is the text which will be displayed by the element.

To create a new menu item, deploy the desired module node, then the Frontend node and click on the + button next to the Menu items item to create a new menu item.

Warning

Don't forget to click on the save button to be able to add your menu item in a menu.

Action type

The action type defines what the menu item will do when clicked on. 3 modes are available:

  • None : The menu item does no action. Useful for a parent menu item that contains other menu items.
  • Open View : Opens the associated UI view in a new frame.
  • Code : Executes C# code.

Here is an example of where the OrderEditUI UI view is opened by C# code.

NavigationOptions navigationOptions = new NavigationOptions(UIViews.OrderEditUI)
    .OnTarget(NavigationTarget.Popup) // Opens the UI view in a popup
    .WithPopupSize(PopupSize.Full); // Sets the popup size
NavigateAsync(navigationOptions);

Visibility

By default, a menu item is visible unless the user does not have permission to view it.

The boolean Visible property controls whether the menu item is displayed. This property can be a C# expression.

For example, the visibility of a menu item can depend on the viewport width:

return Window.Current.Viewport.IsWidthAtLeastLarge;

Creating a new menu

To create a new menu, deploy the desired module node, then the Frontend node and click on the + button next to the Menus item to create a new menu.

General properties

  • The Caption property is the text which will be displayed.
  • The Position property is the position of the menu in relation to others
Warning

Be careful that this position is relative to every menus of the cluster. It means that it should not be the same between menus of different modules.

  • If Enabled property is set to false, the menu and all its details will not be displayed.

To add a menu detail to the menu, click on the + button of the Details section.

Menu details of a menu will be sorted according to the Position property of each menu detail.

The displayed text depends of the associated Menu item property.

Grouping menu details

The boolean Begin group property of a menu detail starts a new group at that detail: a separator line is drawn above it, both in the side panel menu and in the sub-menus displayed on hover. Only the details sharing the same parent are grouped together.

Groups are computed on the menu which is actually displayed, not on the metadata:

  • A menu never begins with a separator, so Begin group on the first displayed detail has no effect.
  • When the detail beginning a group is not displayed, because its Menu item has a Visible property evaluating to false or because the user does not have permission on it, the separator is carried over to the next displayed detail. The grouping is therefore preserved whatever the visible details are.
  • Two separators are never drawn one after the other.
  • A separator is never drawn as the last item of a menu or a sub-menu.

Updating the application

After all the configuration is done, save the menu and click on the Generate application button to update the application menu.

You can then refresh the application web page to see your newly created menu.