Easily Develop Intuitive Multi-Device UIs with the Mendix Navigation Editor

Skip navigation

Easily Develop Intuitive Multi-Device UIs with the Mendix Navigation Editor

Easily Develop Intuitive Multi-Device UIs with the Mendix Navigation Editor by Arjan van IJzendoorn

In this series, we spotlight specific features or enhancements in Mendix 5.  Today, Developer Arjan van IJzendoorn outlines some key enhancements to the Navigation node of the Mendix Business Modeler.

One of the most prominent changes in Mendix 5 is how you can build user interfaces (UIs) and integrate apps. We will start looking at these features in detail in this blog series.

With respect to UI, there is a lot to talk about: navigation, layouts, snippets, and more. Today, I want to focus on navigation and how we’ve simplified the process of developing intuitive multi-device UIs. If you followed our beta release, you probably noticed that we evolved the navigation feature considerably to achieve the ideal balance between flexibility and ease of use.  Here is the end result.

In the project explorer, you have a node called ‘Navigation’. The navigation editor shows three tab pages: Desktop, Tablet and Phone. With Mendix 5, you can now build a tablet-specific interface for your application. For each type of device, you can specify a home page and a menu. And, of course, you can still have role-based home pages.

Choosing the menu source of a menu widget

In Mendix 4, the menu was a fixed part of the interface and the type of widget was fixed as well: a drop-down menu for desktop applications and a button bar at the bottom for phone applications. Now, with Mendix 5 layouts, which will be detailed in a future post, you can define the structure of your page including the position and type of menu widgets. So, you can use a button bar in a desktop application or a navigation tree widget in a side bar on tablets.

There are currently three kinds of menu widgets: the menu bar, the simple menu bar (comparable to the phone menu in Mendix 4) and the navigation tree. A menu widget has a menu source which can either be one of the default menus defined in ‘Navigation’ or a custom menu. The former choice is the easy choice and it is enough for applications with simple a navigation structure (for experienced Mendix 4 users this will be very familiar).

Choosing the menu source of a menu widget
Choosing the menu source of a menu widget.

For more advanced needs, you can also point a menu to a custom menu document, which is a new type of document in Mendix 5. Such a document simply describes a menu structure with one or more levels, just like the menus in the navigation editor. By using menu documents you can, for example, have different side menus for different parts of your application.

Of course you can still use a navigation tree in addition to a menu bar. When you convert an existing project that uses that feature to Mendix 5, the Business Modeler will automatically create an additional layout called ‘DesktopLayoutWithTree’ that has a navigation tree widget in the left side bar. The menu items of the tree will be converted to a menu document and the widget will point to that document.

Finally, we improved the usability of the menu editor itself. There are two buttons for creating new items; one of them creates an item next to the currently selected item and the other creates an item underneath the selection. And when creating a new item, you can immediately edit the caption, image and target of the item in a popup dialog. You can quickly edit an item by using the Enter key.

We hope you enjoy the new way navigation is set up and look forward to seeing the cool interfaces that you create. And stay tuned for my next post on building flexible user interfaces with layouts.

Author Info

Arjan van IJzendoorn