Layouts Types Available in the Mendix Application Platform

Skip navigation

Layouts Have Types

Layouts Have Types by Arjan van IJzendoorn

Only tablet layouts are shown

Layouts Have Types

Mendix DX, also known as 5.18, included a whole new UI framework, which was highlighted in a post by Erik Heddema.  I would like talk about a change in the modeling experience: layout types.

If you are using Mendix 5.18 or higher, you have to make sure that the page templates feature flag is enabled. See Project > Settings > Model > Enable page templates. In Mendix 6 the new modeling experience is enabled for all projects.

Filtering Layouts

With page templates enabled, layouts have an extra property called Layout type. Possible values for this property are the following:

  • Responsive: use this layout for pages that will work fine on all types of devices. The layout grid and other responsive features make it possible to create those pages.
  • Tablet specific: use this layout for pages on a tablet if the responsive option is not sufficient, e.g. if different use cases with different user interfaces have to be supported.
  • Phone specific: same as “tablet specific” but for phones.
  • Modal pop-up: use this layout for pages that should appear as modal pop-ups.
  • Pop-up: use this layout for pages that should appear as non-modal pop-ups.
  • Legacy: layouts created in older versions are of this type. It is recommended to assign the proper type to the layout.

The layout type is used for filtering the layout drop-down in the form you use to create new pages.

Only tablet layouts are shown
Only tablet layouts are shown

Page Settings

While working on layout types, we realized that they can be used for more than just filtering layouts. We could use the layout types for determining how to open pages! Now you no longer have to specify how to open a page (in content, popup…), because the page already knows this through its layout. This not only makes it easier, it also makes it impossible to end up with a pop-up with a menu bar inside. We’ve all been there…

Before layout types, this is how you configured the opening of a page:

Old dialog 1

Editing page settings would give you another dialog:

Old dialog 2

With layout types all you need to do is select is a page and optionally override its title:

New dialog 2

This is very much in line with the simplification we did for calling microflows in 5.17, where you no longer have to specify what arguments to pass to a microflow. I’ll leave you with the words of one of our users:

I’m really happy that the dreadful open page options are no longer necessary, and that a page will be opened correctly based on the selected layout.

Happy modeling!

Author Info

Arjan van IJzendoorn