Mendix 9.6 : Building an e-Commerce Application [Advanced]

Create a blank Mendix 9.6 e-commerce app, enable online services, and configure production authentication to explore login screens, user roles, and anonymous users before building a custom login page.

Discover the Mendix ui design hierarchy from base layouts to page templates and pages, using Atlas Core layouts for responsive phone, tablet, and web views.

Design a custom login and register experience in Mendix 9.6 by creating a blank layout in the anonymous module, building login and register pages, and enabling anonymous access.

Design a login page in Mendix 9.6 by creating a non-persistable anonymous entity with username, password, birthdate, and gender, and connect it via a data view and microflow.

Style the login and register pages with inline styles and flex, center the form, set a 500px width, add a box shadow, and adjust padding and alignment.

Style the register page by duplicating the login layout, adding name, surname, birth date, gender, and email fields, and configuring register and login buttons with primary and success styles.

Compare micro flows and nano flows in Mendix architecture, showing client–runtime interactions and how micro flows run on the backend in Java while nano flows run from the UI.

Compare microflows and nano flows in Mendix, including using nano flows as data sources on a register form and their interaction with Mendix runtime for object creation and UI manipulation.

Implement login functionality by replacing the data view with dedicated login and password fields, adding login and register buttons, styling a 500-pixel container, and testing with a demo user.

Implement anonymous user registration in Mendix by extending the account from system user, adding attributes, and wiring a nano flow and register microflow to create and assign user roles.

Implement validations for the registration process in a Mendix 9.6 e-commerce app by building a nano flow that validates email, name, surname, gender, birth date, and password with real-time feedback.

Add a blocking progress bar to nanoflow interactions using the app store nanoflow commands, configuring a progress bar id and show/hide around Mendix runtime communication with error handling.

Learn to apply a custom CSS to Mendix components, structure CSS files for login and register pages, and move away from inline styling toward a design system.

Reorganize the anonymous module by creating login, shared, utility, and register folders, moving micro flows and nano flows, and organizing layouts, views, regular expressions, and enums under the appropriate folders.

Design and implement an admin panel in Mendix 9.6, using a user snippet and microflow to display the current user in a responsive navbar built on Atlas core.

Create an administrator role inside the admin module to restrict admin page access, then add a sign-out button in the Atlas Core Web layout and test role-based permissions.

Learn to prevent unauthorized access to the admin panel by creating a products module, defining administrator and user roles, configuring role-based home pages, and restricting admin page access.

Configure a Mendix 9.6 products page with Atlas top bar, enabling role-based access for users and admins, and align navigation, snippets, and styling.

Redesign the my account page using css by adjusting the layout grid, setting a 50% width, centering the image, and applying a box shadow to the container.

Customize the profile page by using a before commit event handler to concatenate first name and surname into the full name on save, avoiding infinite loops.

Change the app theme by editing custom css variables in vscode, adjusting top bar and sidebar colors with hex codes, and previewing the results in the running project.

Import excel data into the Mendix app using the Excel Importer module and mix model reflection to map to a product entity with id, name, cost, sale price, and tax.

Unpack Mendix domain model basics: entities, inheritance from system user, validation rules, and microflow calculated values; see how associations create link tables and support many-to-many relationships with auto numbers.

Redesign the products page by tuning auto layout and a four-column grid, then add square product images and display name, price, and tax.

Explore non-persistable entities and their relationship to persistable ones, detailing three uses: import/export mappings, helper objects for data filtering, and in-memory data storage with hashed passwords.

Learn to filter products by price using a non-persistent product filter helper and a macro flow as a data source, then refresh the client to display filtered results.

Learn to implement a price range slider in a Mendix 9.6 advanced e-commerce app, wire the slider to price selected min/max, and apply on-change filtering with a filter pane.

import product category data with the excel importer, creating a persistable category entity (id and name) and prepare a macro flow to assign categories randomly to products.

Learn to assign random product categories to products with a Mendix microflow by selecting random category IDs, looping through products, updating in memory, and committing after the loop for performance.

Enable the refreshing client to see updated database values in Mendix, demonstrated by syncing categories and refreshing pages after deleting associations in the product definitions.

Learn how to retrieve related data by association in a Mendix microflow, using product and product category relationships, conditions, and the 'product category exist' check to improve readability.

Add a product category enum to the filter helper, render as a dropdown on the products page, map to a string for filtering, handling underscores, with non-persistent vs persistent context.

Explore how nested data views establish a data context, with an outer parent and inner child, granting access to both the product filter helper and current product objects.

Explore how Mendix models non-persistent and persistent entities in a one-to-many relation, using a product filter helper to reference a product via in-memory relations, microflows, and data views.

Demonstrates adding a dynamic background highlight for the selected product by checking its association to the current object and applying a custom selected-product CSS with aquamarine background and padding.

Learn to model a many-to-many relationship between a non-persistent and a persistent entity in Mendix, using a product basket and plus button to add multiple products in memory.

Implement checkout UI in Mendix 9.6 by calculating a grand total from each product’s sale price and item count, display total with a dollar sign, and add a checkout button.

Implement a Mendix checkout flow that opens a products checkout web pop-up, uses a macro flow to create a sales record for the current user, and clears the basket.

Show the many-to-many relationship between sales and products on the my account page with a data grid, using a sales transaction entity to record product quantities, configure permissions and columns.

Modify the data grid logic to show sales headers with details in a pop-up, and trigger a macro flow to display order details on a new detail page.

Refine the products page and my account UI by adjusting background color, padding, alignment, and box shadow, and add a centered basket icon button with flex layout.

Mendix 9.6 course teaches applying entity access rules to enforce data security, letting each user see only their own sales orders via domain model constraints on the sales header.

Change the folder structure by creating new folders: products, micro flows, actions, data sources, pages, enums, and snippets, and moving related components into them to simplify the Mendix e-commerce project.

Create a warehouse-based inventory model with id, name, latitude, longitude, import Excel data, and use a macro flow to generate inventory by retrieving products and syncing updates.

Rework the inventory and product definition pages to validate creation of a sales order against stock quantities and refine the data grids with centered layouts, containers, padding, and box shadows.

Validate inventory before commit in Mendix 9.6 using a byproduct flow and before-commit handlers, aggregating inventory to ensure stock for the purchasing process and handle not enough inventory errors.

Learn how error handling in Mendix controls rollbacks and commits within a micro flow, showing how to run code before an error, apply or prevent rollback, and execute post‑error logic.

Learn to use the html snippet widget to inject custom html and javascript in a Mendix 9.6 e-commerce app, binding product data and displaying a hover popup.

Style a product popup card by integrating HTML, CSS, and JavaScript, adjusting padding and badge position, and pass dynamic product name, category, and price data to render discounted prices.