How to Create Pages in Mendix: A Complete Step-by-Step Guide

How to Create Pages in Mendix: A Complete Step-by-Step Guide

Creating pages in Mendix is a simple and intuitive process that can be done in several ways. In this guide, we’ll explore three different methods for creating pages and setting up your application efficiently.

Before we begin, please note that this tutorial was created using Mendix version 10.17.0; there may be minor differences if you are using a different version.

Method 1: Creating a Page via the Navigation Menu

The first way to create a page is directly from the Mendix navigation menu. Follow the steps below:

1. Open the navigation menu in your app.
2. Click “New Item” to add a new item to the menu.
3. Set up:
   • Caption: Page title.
   • icon: Choose an icon for the menu.
   • On Click: Select " Show Page " to open a new page.
4. Choose one page template In the pop-up window that appears:
   • Responsive web pages for the web, tablets, or mobile phones.
   • Standard Mendix layout types (Atlas UI).
   • Ready-made templates such as dashboards, forms, and tables.
5. Click “OK” to save the page and add it to the navigation menu.

Method 2: Creating a Page Directly in the Module

This method is a bit more hands-on, but it gives you greater control over the page structure.

1. In the Mendix Explorer, open your module.
2. Right-click and select Add Page.
3. Choose one page layout:
   • Responsive web pages for different devices.
   • Page types such as forms, lists, or details.
4. Configure the visual elements as needed.
5. Save the page and connect it to the application flow.

Method 3: Creating Pages from the Database

This is the fastest and most efficient method, as it allows you to automatically generate pages based on your data structure.

1. In Data Modeler, select the desired entity (e.g., User).
2. Right-click and select " Generate Overview Pages."
3. Set up:
   • Select the organizations for which you want to create pages.
   • Set the default layout (Atlas UI).
   • Enable the option to overwrite existing pages, if necessary.
4. Click OK to generate the pages automatically.

Mendix will automatically create:

• A list page (Overview Page) with a data grid to display the records.
• An Edit Page for adding and editing records.
• Buttons for creating, editing, and deleting objects directly.

Linking the Page to the Navigation Menu

After creating the page, we need to add it to the menu so that users can access it.

1. Open the navigation menu.
2. Click on New Item and configure:
   • Caption: Page name (e.g., “Users”).
   • Icon: Choose a relevant icon.
   • Action: Show Page and select the overview page generated earlier.
3. Save and restart Mendix to see the changes.

Testing the Web Page

Once everything is set up, we can test the page in the browser:

1. Launch the application and click the navigation button.
2. Go to the new page and view the generated elements.
3. Test by creating, editing, and deleting records to ensure that everything works correctly.

Conclusion

Creating pages in Mendix is a flexible process that can be done in different ways, depending on your project's needs.

How It Works

The process of creating pages in Mendix is simple and intuitive. Follow these steps to develop your pages efficiently:

1. Open Mendix Studio: Launch Mendix Studio and select the project you want to work on.
2. Create a new page: In the navigation panel, click “Pages” and select “New Page.” You can choose a blank template or use one of the predefined templates.
3. Add elements: Use the widget library on the left to drag and drop elements such as buttons, forms, and tables onto your page.
4. Configure properties: Select each element to adjust its properties, such as text, colors, and click actions.
5. Preview and publish: Once you've finished editing, use the preview option to see how the page will look. When you're satisfied, publish the changes.

By following these steps, you can create dynamic and functional pages in Mendix, making it easier to develop web applications.

Benefits

1. Ease of Use

Mendix offers an intuitive interface that allows even users with no programming experience to create pages quickly and efficiently. For example, with just a few clicks, you can add elements such as buttons and forms.

2. Quick Integration

With Mendix, you can easily integrate your pages with databases and external APIs. This means that if you need to access real-time data, such as customer information, the integration can be set up in a matter of minutes.

3. Advanced Customization

The platform lets you customize your pages to suit your business needs. You can adjust layouts, colors, and styles to reflect your brand’s visual identity, making your app more attractive and functional.

4. Real-Time Collaboration

Mendix facilitates collaboration among teams by allowing multiple users to work on the same pages simultaneously. This is especially useful in large projects, where communication and coordination are essential.

5. Support and an Active Community

When you use Mendix, you have access to a large community of developers and technical support. This ensures that you can quickly find solutions to problems and share experiences with other users.

Use Cases

Mendix is a powerful platform that allows you to create web pages quickly and efficiently. Below are some practical use cases that demonstrate how you can apply this tool in different scenarios:

• In-House Application Development:

  A company can use Mendix to create an internal app that manages employee workflows, allowing employees to update project statuses, request time off, and access important documents—all within a user-friendly interface.

• Customer Service Portals:

  Organizations can develop customer service portals where users can submit support tickets, view FAQs, and access troubleshooting guides, thereby improving the customer experience and reducing the volume of support calls.

• E-commerce Systems:

  With Mendix, you can create a custom e-commerce site that allows customers to browse products, make purchases, and track orders—all while integrating with payment and logistics systems.

• Customer Relationship Management (CRM) Applications:

  Companies can develop CRM solutions that help manage customer interactions, store contact information, and track sales, thereby increasing efficiency and the personalization of customer service.

How to Implement

To create pages in Mendix effectively, follow this step-by-step guide:

1. Open Mendix Studio: Launch Mendix Studio and open the project you want to work on.
2. Create a new page: In the navigation panel, click “Pages,” then click “New Page.” Choose a template that meets your needs.
3. Customize the page: Use the visual editor to add widgets, such as buttons, tables, and forms. Drag and drop the elements into the design area.
4. Set the properties: Select each widget and adjust its properties in the panel on the right. This includes text, colors, and behaviors.
5. Test the page: Click “Preview” to test the page’s functionality. Check to make sure all elements are working as expected.
6. Publish the changes: After testing, click “Publish” to apply your changes to the app.

Practical tips:

• Use the Mendix documentation to better understand the features of each widget.
• Use reusable components to maintain consistency across pages.

Avoid the following common mistakes:

• Don't overload the page with too many elements, as this can affect performance.
• Don't forget to test the page's responsiveness on different devices.

Now it's time to get down to business! Start creating your pages and explore Mendix's features.

Discover the power of Mendix

Eduardo Salerno

Eduardo Salerno is a specialist in IT portfolio and project management, with extensive experience in Planview implementations and digital transformation. At TWRT, he leads initiatives that bridge the gap between business strategy and technological execution.

See Full Bio