Add a Native Mobile App

Last modified: January 28, 2026

Introduction

This guide is a continuation of part one, and in it, you will recreate the web application you created in part one as a native mobile application. The guide aims to get you started with Mendix Native Mobile and walks you through the steps on how to develop your first native app using the Studio Pro IDE.

By following this guide, you will:

  • Learn how to create, run, and deploy a native mobile application.
  • Use nanoflows to build logic.
  • Start with an online-first native mobile app (default in Mendix 11), with the option to later explore offline-first development and data synchronization if needed.
  • Learn how to create, run, and deploy a native mobile application
  • Test your native app using the Make it Native app

Mobile Development Essentials

The Mendix Platform enables you to build apps of many different kinds, including web, native mobile, and PWA. When choosing to build native mobile applications, there are some special requirements to keep in mind:

  • Online-first development: As of Mendix 11, native mobile apps are created in online-first mode by default. This means your app communicates directly with the server whenever it has a connection. For many use cases, this is the simplest and fastest way to get started.

  • (Optional) Offline-first development: If your app needs to work without a stable internet connection, you can enable offline-first mode. In this approach, data is stored in a local database on the mobile device and synchronized with the server when possible.

  • (Optional) Data synchronization: To support offline-first apps, you can configure synchronization. Synchronization is triggered using the synchronize action in nanoflows and the synchronize to device action in microflows. You can also configure it to only update the data needed for each specific user to minimize data use and load times.

Prerequisites

Before you begin, we advise completing part one of this guide. You will also need to:

Creating the App

To get started building your first native mobile app, click Create New App in the Studio Pro Select App screen. Then select the Blank Native Mobile App template as the starting point for your app.

Create Blank Native Mobile App

Next, click Use This Starting Point.

Use this starting point

In the pop-up window that appears, enter a name for your app. Leave all other options as default and click Create app.

Confirm your choices and create app

Creating the Domain Model

Just as in part one, we will need to create the entity to store employee data. In the domain model for the Native Mobile Module, add a new entity.

  1. Name the entity Employee.

  2. The entity should be a generalization of the Account entity.

  3. Add three attributes to the entity:

    • FirstName as String
    • LastName as String
    • JobRole as String

  4. Click OK to confirm your changes:

    Create the Domain Model

Creating the User Interface

With the domain model finished, it’s time to start creating a user interface for your app. To get started, open the page Home_Native in the app explorer.

  1. Delete all prefilled “Welcome” text and containers from the page.

  2. From the Toolbox, drag a List View onto your page.

  3. Double-click on the List view to open its properties.

  4. In the properties window, go to the Data source tab, ensure Database is selected next to Type.

  5. Under entity, click the Select button.

  6. Choose the Employee entity we created earlier and click Select.

  7. Click OK to confirm your choices:

    The User Interface

  8. When asked if you would like to automatically fill in the content, select Yes.

  9. Delete all the content except for the attributes we created (FirstName, LastName, JobRole).

  10. Add a Layout Grid to the page (4x4x4), then move each of the remaining labels into their own cells in the layout grid:

add the layout grid

  1. Add a Create button from the toolbox in the empty header section of the page.

  2. After adding the button to the page, a window will appear for you to select the entity that will be created when the button is clicked. Select the Employee entity and click Select:

    Select entity to display

  3. Next we must select the on-click page that will be displayed when the button is clicked. In the properties for the button, in the events section, next to on-click page, click Select.

  4. In the pop-up window that appears, click to create a New page.

  5. In the next window, enter the name for the new page as Employee_NewEdit. Leave the layout as is and select the Edit With Dataview template before clicking OK to confirm your choices.

Creating Application Logic

Now that we have finished with the domain model and user interface, we can continue to create logic using nanoflows. Let’s create a nanoflow to replace the default save button for the Employee_NewEdit page. This nanoflow will validate that the details have been entered correctly, and then commit the changes and synchronize with the server.

  1. Open the properties of the save button.

  2. Under on-click action, select Call a Nanoflow.

  3. In the window that appears, click New to create a new nanoflow.

  4. Name the new nanoflow ACT_Employe_NewEdit.

  5. In the newly created nanoflow, look for an orange Decision in the toolbox and drag it onto the flow.

  6. Double-click the decision to open its properties.

  7. Enter the caption Has Firstname?.

  8. Under Expression, add 'trim($Employee/FirstName)!= empty'. This will remove any whitespace from the string and then check to ensure there are characters in the string attribute.

  9. As the expression above results in a true and false result, we need to create a branching path from the decision - a path for each possible result. Select the decision, then from a corner click and drag away to create the new alternative path. Ensure to define which path is for the true result and the false result by right-clicking them both and under condition value choosing true and false.

  10. On the false path, add a validation feedback action. Double click to open its properties, enter the following details, and click OK:

  11. Under on-click action, select Call a Nanoflow.

  12. In the window that appears, click New to create a new nanoflow.

  13. Name the new nanoflow ACT_Employe_NewEdit.

  14. In the newly created nanoflow, look for an orange Decision in the toolbox and drag it onto the flow.

  15. Double-click the decision to open its properties.

  16. Enter the caption Has Firstname?

  17. Under Expression, add 'trim($Employee/FirstName)!= empty'. This will remove any whitespace from the string and then check to ensure there are characters in the string attribute.

  18. As the expression above results in a true and false result, we need to create a branching path from the decision - a path for each possible result. Select the decision, then from a corner click and drag away to create the new alternative path. Ensure to define which path is for the true result and the false result by right-clicking them both and under condition value choosing true and false.

  19. On the false path, add a validation feedback action. Double click to open its properties, enter the following details, and click OK:

    • Variable → Employee
    • Member → FirstName
    • Template → Please enter a Firstname for the employee

  20. Now on the true path, repeat this step for the LastName and JobRole attributes as well.

    • You can copy and paste the decision and validation feedback action to save time (But don’t forget to update the actions for each attribute)

  21. At the end of the flow on the true path, add a commit action. Open its properties by double-clicking the action and ensure Employee is selected for Object or List, and change refresh in client to Yes. Click OK to close to window.

  22. Add a synchronize action after the commit action and choose to synchronize only unsynchronized objects.
    Note: This step is only needed if you configure your app to work offline. For online-first apps, changes are sent directly to the server without extra configuration.

  23. Add a close page action after the synchronize action.

  24. At the end of the flow on the true path, add a commit action. Open its properties by double-clicking the action and ensure Employee is selected for Object or List, and change refresh in client to Yes. Click OK to close to window.

  25. Add a synchronize action after the commit action and choose to synchronize only unsynchronized objects.

  26. Add a close page action after the synchronize action:

    Completed nanoflow

Deploying Your App

In order to easily test your application on a device, run your application in Studio Pro and then open the Make it Native app on your mobile device. Once your app is running, click the dropdown arrow next to View App and choose View on a Device. Locate the QR code used to view your native mobile app, and then scan it using the Make it Native app (If you are using Parallels, you may need some special configurations).

Once you scan the QR code using Make it Native, the app should load, and you will be able to test your application. In order to deploy your application to the app stores (Apple and Android), you will need to create a signed build of your application. Mendix recommends using Bitrise to package your app for distribution.

Optional (Offline-first): If you want your app to work offline, update the synchronization mode for the entities you are using. By default, synchronization is set to Online. To enable offline-first, configure the entities to use All Objects mode so that data is stored locally and synchronized periodically with the server.

Finished!

Congratulations on completing and deploying your very first Native Mobile App! Next, head over to the Academy and get started with our Crash Course learning plan, or continue learning here in our docs pages by searching for topics you are interested in. For videos on the latest news and updates, head to our YouTube page. Or see what our awesome community is up to on our Medium publication.

Looking to get in touch with us or the community? Join our Slack community workspace and get involved.

Read More