Mendix Ignite - Mx 10: GUI changes

Mitchel Mol
|
August 25, 2023

What to expect when moving from Mendix 9 to Mendix 10!

When releasing a new major version wants you to have that new gadget feeling, so every new major version of the Studio Pro IDE gets a refresher. Sometimes it is small such as the splash screen and the background when no document has been opened. But this time with Mendix 10, a bunch of UI/UX changes have been introduced. Some of which had previously been released as a beta feature for Mendix 9. This article will give you a deep dive into all the changes and how they will make your developer experience more efficient.

Greeted by a new splash screen!
And of course a fancy new home screen

No longer beta

With the release of Mendix 10, the following features will no longer be in beta and may be used confidently in your daily life.

Settings "New features" to "Work environment"

Dark mode

After years of asking for Dark mode Mendix finally introduced it in 9.11. This was however still a beta feature which meant not everything was dark yet and switching required you to specifically enable it in the “New features” tab from the preferences manager. The colouring also wasn’t always as user-friendly as it should have been. All of this has been resolved with Mendix 10. The base colour seems darker than ever which all of you dark mode fans (including myself) will love. Contrast has improved which greatly enhances readability and user experience.

A few comparisons between Mendix 9 and 10

New properties pane

The new properties pane certainly is a nice improvement. The styling part (which got bloated over the years) has been separated into its own tab. And the general look and feel have been modernized. It overall requires fewer clicks to make the same modifications. Especially for those (including myself) who want to make quick changes without having to open up the popup variant of the properties, this is a great improvement.

As the feature has officially been released it is by default enabled and you can start using it the moment you develop your apps on Mendix 10.

A nice to have would be the ability to group design properties in the new styling tab. Same as how the properties have been grouped into categories. Perhaps Mendix will implement this in the future.

Split up and improved the properties pane

New icons

As we have gotten used to from Mendix a new slightly refined icon set has been released. This means that most icons have gotten simpler and more recognizable.

Some examples of changed icons

A lot of the changes are very subtle, some are more pronounced such as the Message definition. Personally, I think the new icons are more clear and the removal of some of the details makes them more recognizable. The icons that did not change (or maybe only changed colours) already were very simple and clearly visualised what they meant.

A noticeable change in the add sub-menu is the Data set which has been moved higher in the list.

A noticeable change in the add sub-menu is the Data set which has been moved higher in the list.

Other small changes to the icons may be found while building

Pages
Microflows
The domain model

While the changes are usually subtle again, and mostly also consist of some extra dark space in between the different icons. The microflow icons have been changed significantly mostly to allow for less brightness on the dark mode version.

This is a common theme across the redesigned icons.

Did you know that the Atlas icons themselves also got an update?

Some examples of the new icons shipped with the Atlas module

You may now choose from even more "default" icons. The Atlas modules utilize the new feature that allows custom icon sets. Which on its own is an excellent demonstration of how to use this new feature.

Rounded

A not-so-subtle difference is the rounding that has been applied everywhere. Similar to how Microsoft introduced more rounding edges with Windows 11. This certainly gives a more modern look to Mendix. For example on the buttons and inputs found in Studio Pro.

Rounded buttons
Rounded inputs

The new default

Those who have been using Mendix Studio Pro for a while and might have tried Mendix Studio (the online simpler version) will know that there is a design mode. This page editor mode tries to render the page the same as the eventual runtime. It is far from perfect but it helps with designing your pages compared to the more abstract structure mode. For new users, the design mode will now be the default. Do not worry if you dislike this mode as existing preferences will be kept and anyone who already had Mendix 9 or lower installed will maintain the structure mode as the default. You may of course change this in your preferences.

New default design mode

Conclusion

There are many useful changes to the GUI in Mendix 10. Maybe I missed some that you consider an awesome improvement. Tell me and the rest of our Mendix community all about it so we may all learn from each other.

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.

Heading

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.