Low-code/no-code frameworks are gaining popularity in recent years, and this trend is expected to continue as time goes by. There are many reasons for that, but the chief among them is the fact, that the competition for experienced software engineers is really fierce, which means it gets harder and harder to develop software reasonably fast and cheap (and also maintain it later, during the entire app lifecycle). Because of this, companies naturally look for more convenient ways to make the solutions and set up web services they need.

Low-code frameworks are one of the best ideas in this regard so far. These are technologies that minimize the amount of coding required in the entire process and therefore allow so-called citizen developers – people with less technical know-how (but often a good understanding of business processes) – to take a much more active role in it. This article will serve as an introduction to Mendix – my aim is to provide the readers with a basic understanding of the technology, and also show them how easily a simple application can be made.

What is the Mendix platform?

Mendix is one of the leading low-code frameworks on the market. It was launched in 2005 by Derek Ross and Derckjan Kruit. Their aim was to create a technology that would allow the rapid development of reactive, high quality applications that could work in various environments, such as desktop computers, tablets, and smartphones. Over the years, Mendix found use in many high-profile companies, such as Zurich and Solomon Group. The platform was also used by the city of San Antonio (Texas, USA) to develop an app to speed up the delivery of emergency aid requests during the Covid-19 pandemic – the entire solution was created in just 12 days, which is a testament to how powerful Mendix can really be.

Mendix price – how much does it cost?

You can use Mendix for free, but to get the most out of it – especially in a business environment – you’ll have to pay a subscription fee. There are three different plans – their features and pricing are outlined in the table below.

Mendix – technical basics

You can use the platform via the web-based Mendix Studio development environment (previously – before version 8 – it was known as Mendix Web Modeler), or by installing the dedicated Mendix Studio Pro desktop application on your computer (previously Mendix Desktop Modeler or simply Mendix Modeler). However, if you want to fully explore the solution’s capabilities, I advise you to do the latter, because Studio Pro offers more options and functionalities in several areas (for example, it allows you to run your apps on localhost, debug, and monitor logs).

The platform’s architecture is based on creating independent, Java-based models (which makes upgrades very easy – in fact, the process is mostly automatic). The framework offers a built-in low-level database, which means you don’t have to rely on an additional solution in this regard (as is the case with Oracle Application Express, which was designed with Oracle Database in mind and requires it to work).

In fact, to start a project, you have to create a database schema for your app, which will then serve as a basis for various objects. On the other hand, not being dependent on external database results in greater flexibility, and making changes in the code and project is easier when everything is based on such an independent DB. 

Working in Mendix is mostly about setting your application’s database up and expressing the logical processes of the app through so-called microflows – a visual representation of textual program code. You can also create the starting page and user interface using several pre-existing styles to determine the look of your buttons and texts.

Mendix tutorial – creating a sample app

To show you how Mendix works in practice, I’ve prepared a very simple, sample application based on the database schema below. It allows the user – a patient – to arrange a visit with a specific doctor, on a specified day. I used three entities to achieve this result: “patient”, “doctor” and “visit”. The first two should be self-explanatory, and the third is the associative entity that connects them.

Creating the app and choosing a template

To keep things simple, we’ll work in the web-based Mendix Studio. To start, you have to setup your account, which is really easy and won’t take your more than a couple of minutes. After that just sign in and visit this location to see the home screen with the list of all your apps.

Next step is creating the app. Click Create app in the upper right corner, then Blank web app on the next screen, and finally select This template (default). After that, you’ll have to name your application, and you can also choose an icon that’ll represent it. Finish this step by clicking Create app.

The process might take a couple of minutes. When it’s done, you’ll be redirected to your app’s main screen, with an option to go to Mendix Studio or Mendix Studio Pro. For the purposes of this tutorial, choose the first one (click the button in the upper right corner).

When Mendix Studio opens up, you’ll see the following screen – this is your application’s template.

Entities, attributes and associations

It’s a good idea to begin your work on a Mendix application by creating entities, attributes and associations in the Domain Model. It’s worth noting that all of it can be built using Mendix’s interface and provided tools. The screen for creating entities looks like this:

Creating attributes is pretty simple. To add one to your applicaiton, you have to use – you’ve guessed it – the New attribute button.

And finally, after you click the arrow in the bottom right corner, you’ll be redirected to the Association creation screen, which looks like this.

When you’re all done, your app’s schema should look like the one on the screen below. Modify things until you achieve this result.

Start page and navigation menu

When your schema is done, return to the tab with pages, and then create the start page. When it comes to the start page, the goal is to create three columns. Each of them will have a button pointing to the List View page of a specific entity’s objects. As you can see in the picture below, columns and rows can be added by clicking the arrows in the panel.

The next step is to drag a Card Action from the Toolbox onto each column using the mouse (standard drag & drop functionality). Each of the Card Actions should consist of text and a button. You can simply edit the text to be displayed. As for the buttons, choose the page option and redirect to the page that you will create in a moment.

To create a new page you have to use the Lists / List template. Next, from Toolbox add a widget called List View to the page, and connect it to a given entity. The template will allow you to display all the objects in the table for a given entity. You can choose what you want to display – what entity attribute and in what order. You’ll have to repeat the above-mentioned steps for each of the entities.

When your 4 pages are ready, it’s time to take care of something smaller, but just as important – the navigation menu. It’s the menu on the sidebar for the application’s user. This mechanism will allow people to easily visit a given page of the application any time they want. Go to the Navigation Menu tab and add new elements using the “plus buttons” you can see there. Of course, you should assign a page to each of the tabs, and provide a text description. It’s also a good idea to add a thematic icon.

Creating the objects

Another important step is to allow the user to create objects. It’s quite simple in the case of patient and doctor entities, where you create a new column and drag a widget called Create Object Button from the Toolbox. The button will create an object for a specific entity, and then redirect to the page. You’ll need to once again create a new page, that’ll serve as your form. 

The picture below shows the places where you’ll need to fill in the button data. A button can have an inscription, and you can also select a style you deem appropriate. The style can be modified at any time by clicking on the button you can see on the right in the Various Options panel. In this case, the recommended style is Info, which produces a deep blue color.

Setting up a page-form

Creating a page-form requires the user to fill in the fields (except for the autonumber field). It’s a simple matter because Mendix practically does everything for you – in this case you don’t have to change anything.

The matter is more complicated in the case of the associative entity. In addition to the above-mentioned steps (everything written in the Creating the objects and Setting up a page-form subsections), you’ll also need to give the user the option to assign an association to a specific object. To do this, search for a widget called Drop Down from Toolbox, and then proceed as shown on the picture below.

Launching the app

Now, it’s time to launch the application. It should look like on the following screens. The screenshots show the status after adding the objects using the add button.

Delete object function – and reasons to be careful with it

It’s worth mentioning that it’s also possible to allow the deletion of an object. The Delete Object button can be set up inside the List View – so that it’s visible next to each object. It works automatically and we don’t need to do anything esle. However, it might be a good idea to change the style to Danger (red color). 

However, one should bear in mind that it’s not a good practice to give users the option to delete objects without considering the proper settings. For example, you shouldn’t allow the removal of a patient or a doctor who already has an assigned appointment. You can use processes to prevent the deletion of objects to which something is assigned – but that’s a topic for another time.

It’s also worth noting that when you use the autonumber option, the number doesn’t change when you delete an object above it (see the screenshow below, where I’ve deleted the first object, and was left with two objects numbered 2. and 3.). This is intentional – the number is supposed to be the unique identification of the object, so it can’t change everytime someone deletes one of them. However, it obviously doesn’t look good.

Microflows

You’re left with one more step, and it’s a really important one – Microflows. This is a Mendix functionality you can use to set up the logic of your applicaiton (often a non-standard one). Microflows can be compared to small scripts, that can be used, for example, to calculate parameters, validate data, or create custom objects. 

I’ll concentrate on this last scenario (create custom objects). The easiest way to show it is adding a new functionality to the app – one that’ll allow the user to create a visit object from the position of a specific patient.

To do this, you need to look for the Call Microflow widget in the Toolbox and use the mouse to drag it inside the List View, so that it is next to each object, and next to the Delete button (if you have one). This widget will create a button that will trigger a microflow when clicked. You can edit the inscription on the button (for example “Make an Appointment”), and then you’ll need to create the microflow itself.

When you click the Select Microflow button (the three dots), you’ll be redirected to the Microflow tab. It’s worth noting that in the second screenshot (below), above the line that represents the microflow, the Patient object is passed – this is what will allow you to pass this object to the association.

On the right side you can see widgets available for you to drag into your process. Choose Create Object to create an Appointment object (you’ll also have to select an entity – Appointment in this case), and then Show Page to display the form page for the user with a selection of attributes.

Next, you need to add a new value in the Create Object widget (Initialize Members -> Add new value), as shown in the picture. First, you need to “connect” an association and select a reference to the entire Patient object from it. This is done in order to transfer a specific patient to your created facility for your new visit. It’s a key element of this microflow. 

The last thing left to do is passing the created object to the second element – Show Page – like in the image below.

On the four screenshots below, you can see how using this feature looks like in practice.

Beging your journey as a Mendix developer

And that’s it for today. As you can see, creating a simple – but still quite powerul – app with Mendix is a very easy task. Of course, this is just an example – I advise you to check Mendix out and customize some parameters of my applicaiton, to see what else is possible. There area various learning paths you can take. Also, be on the lookout for follow-up articles from me, in which I’ll detail the platform’s various functions and show you how to use them to your advantage. But, most of all, just start using this technology – nothing is stopping you from testing what you can do by yourself, and you can broaden your knowledge this way. 

And if you need professional support with low-code technology in projects that can’t be achieved without the help of specialized software developers, we’re here just an e-mail away! Write us at hello@pretius.com or use the contact form below – we’ll see what we can do and get back to you in 48 hours