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

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

Criar páginas no Mendix é um processo simples e intuitivo, que pode ser feito de diferentes formas. Neste guia, vamos explorar três métodos diferentes para criar páginas e configurar sua aplicação de maneira eficiente.

Antes de começarmos, este tutorial foi realizado na versão Mendix 10.17.0, podendo haver pequenas diferenças caso esteja utilizando uma versão diferente.

Method 1: Creating a Page via the Navigation Menu

A primeira forma de criar uma página é diretamente no menu de navegação do Mendix. Siga os passos abaixo:

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.
   • Tipos de layouts padrão do Mendix (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. No Explorer do Mendix, acesse o seu módulo.
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.

O Mendix criará automaticamente:

• 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. Salve e recarregue o Mendix para ver as alterações.

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

Criar páginas no Mendix é um processo flexível que pode ser feito de diferentes formas, dependendo da necessidade do seu projeto.

How It Works

O processo de criação de páginas no Mendix é simples e intuitivo. Siga estas etapas para desenvolver suas páginas de forma eficiente:

1. Acesse o Mendix Studio: Inicie o Mendix Studio e selecione o projeto no qual deseja trabalhar.
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.

Com essas etapas, você pode criar páginas dinâmicas e funcionais no Mendix, facilitando o desenvolvimento de aplicações web.

Benefits

1. Ease of Use

O Mendix oferece uma interface intuitiva que permite até mesmo usuários sem experiência em programação criar páginas de forma rápida e eficiente. Por exemplo, com apenas alguns cliques, você pode adicionar elementos como botões e formulários.

2. Quick Integration

Com o Mendix, você pode integrar facilmente suas páginas a bancos de dados e APIs externas. Isso significa que, se você precisar acessar dados em tempo real, como informações de clientes, a integração pode ser feita em questão de minutos.

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

O Mendix facilita a colaboração entre equipes, permitindo que múltiplos usuários trabalhem nas mesmas páginas simultaneamente. Isso é especialmente útil em projetos grandes, onde a comunicação e a sincronização são essenciais.

5. Support and an Active Community

Ao utilizar o Mendix, você tem acesso a uma vasta comunidade de desenvolvedores e suporte técnico. Isso garante que você possa encontrar soluções para problemas rapidamente e compartilhar experiências com outros usuários.

Use Cases

O Mendix é uma plataforma poderosa que permite a criação de páginas web de forma rápida e eficiente. A seguir, apresentamos alguns casos de uso práticos que demonstram como você pode aplicar essa ferramenta em diferentes cenários:

• In-House Application Development:

  Uma empresa pode utilizar o Mendix para criar um aplicativo interno que gerencie o fluxo de trabalho dos funcionários, permitindo que eles atualizem status de projetos, solicitem férias e acessem documentos importantes, tudo em uma interface amigável.

• 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:

  Com o Mendix, é possível criar uma página de e-commerce personalizada que permita aos clientes navegar por produtos, realizar compras e acompanhar pedidos, tudo isso com integração a sistemas de pagamento e logística.

• 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

Para criar páginas no Mendix de forma eficaz, siga este guia passo a passo:

1. Acesse o Mendix Studio: Inicie o Mendix Studio e abra o projeto no qual você deseja trabalhar.
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:

• Utilize a documentação do Mendix para entender melhor as funcionalidades de cada 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.

Agora é hora de colocar a mão na massa! Comece a criar suas páginas e explore as funcionalidades do Mendix.

Discover the power of Mendix

Eduardo Salerno

Eduardo Salerno is a specialist in IT portfolio and project management, with extensive experience in Planview implementations Planview digital transformation. At TWRT, he leads initiatives that link business strategy to technology execution.

See Full Bio