Personalización del Frontend para proyectos Mendix

Con herramientas como Sass, JavaScript y React, es perfectamente viable lograr resultados visuales y funcionales a nivel profesional.
En muchos proyectos desarrollados con Mendix se requiere una interfaz coherente con el ecosistema visual de la empresa. Sin embargo, los recorridos de aprendizaje iniciales de la plataforma suelen centrarse en la modelación de datos, la creación de CRUDs o el consumo de APIs. El diseño de la experiencia de usuario (UX) y la interfaz (UI) queda muchas veces en segundo plano.
Cuando me uní al equipo de Mendix en Incentro, su experiencia era ya profunda, pero querían cubrir precisamente ese aspecto del frontend: diseños cuidados, visuales y personalizados. Lo mejor es que esto es perfectamente alcanzable con las herramientas nativas de Mendix, incluso sin conocimientos avanzados de la plataforma. Cualquier desarrollador frontend con experiencia puede llevar el diseño mucho más allá del aspecto por defecto de los widgets. Y si formas parte de un equipo técnico que valora el detalle y la coherencia visual, contar con perfiles especializados en frontend no es solo recomendable: es una apuesta por el valor añadido.

Temas a medida y organización Sass sobre Atlas UI

Mendix utiliza Atlas UI como sistema de diseño base, construido con Sass y basado en una estructura DOM generada por sus propios componentes. A diferencia de un proyecto frontend desarrollado desde cero, en Mendix es clave entender y adaptarse al DOM que se genera automáticamente. Aquí, el mejor aliado del desarrollador es sin duda el inspector de código del navegador, que permite entender la jerarquía, clases aplicadas y comportamientos visuales de cada widget o layout.

Este enfoque está alineado con los flujos de trabajo modernos de cualquier agencia web, y permite aplicar personalizaciones eficaces sobre una base estructurada. Y lo mejor: cualquier equipo que ya tenga experiencia en diseño web puede integrarse fácilmente en este flujo de trabajo.

Mi estructura habitual de trabajo incluye:

• Configurar estilos base en theme/web/custom-variables.scss. Todo lo que se pueda aprovechar del Atlas UI es bienvenido.
• Excluir bloques de estilo a los que voy a hacer una personalización profunda desde theme/web/exclusion-variables.scss. Los sustituiré por mis propios componentes en mi Sass.

Crear la carpeta theme/web/sass inspirándome en el patrón 7-1, adaptado a Mendix:

sass/

├── base/             # Variables no cubiertas en Atlas y mixins

├── components/       # Botones, formularios,... excluyendo widgets

├── layout/           # Header, Footer, layouts de página

├── pages/            # Estilos específicos por página

├── widgets/          # Widgets propios y de Mendix

├── buildingblocks/   # Estilos específicos para Building Blocks

Recomendaciones:

• Copia los layouts del Atlas (Default, TopBar, Popup) y añade clases propias para personalizar mejor y poder hacer distinciones por layout.
• Usa Building Blocks y Page Templates para facilitar la aplicación de clases personalizadas. Esto ayudará especialmente a los compañeros de equipo menos experimentados en frontend.
• Familiarízate con los mixins, helpers y estructuras de Atlas UI.
• Aprende a usar display: contents para ignorar contenedores innecesarios en la maquetación (y observa cómo Atlas UI usa este recurso).

Utiliza Visual Studio Code (o cualquier IDE moderno con soporte para Sass) para navegar entre variables, mixins y estilos de Atlas UI con mayor eficiencia.

Uso de JavaScript: flexibilidad y buenas prácticas

JavaScript es una herramienta poderosa en el frontend y por supuesto en Mendix. Para el mejor resultado, lo ideal es apuntar a React y los Pluggable Web Widgets. Pero a veces se necesitan soluciones rápidas y con Mendix puedes explorar otras vías para usar Javascript.

Esta versatilidad permite dar un paso más allá en personalización y, si estás en un equipo que busca diferenciarse con interfaces intuitivas y a medida, o si lideras un proyecto que quiere reflejar identidad en cada detalle, aquí JavaScript puede convertirse en un gran aliado.

Opciones disponibles:

• Aloja tus propios scripts en theme/web/js e insertarlos con el widget HTML/JavaScript Snippet.
• Usa el Script Loader del Marketplace para scripts externos (de análisis o seguimiento, por ejemplo).
• Crea JavaScript Actions para integración con microflows/nanoflows.

Lamentablemente, los widgets HTML Snippet y Script Loader dependen de Dojo y no son compatibles con React puro. Dojo ha sido durante muchos años el framework subyacente del cliente clásico de Mendix, pero la dirección es clara: tanto el equipo de Mendix como nosotros en Incentro, apostamos por dejarlo atrás y apostar por desarrollar en React.

El cliente React de Mendix comenzó a estar disponible en versiones anteriores como preview, pero desde la versión 10.18, se considera estable y lo puedes activar en los ajustes de la app. Te invito a activarlo y usarlo sin modo de migración, si tu app lo permite.

Beneficios del cliente React:

• Sin Dojo → menos legacy.
• Carga por demanda (lazy loading).
• Mejor rendimiento.
• Menos problemas con el DOM y renderizados dobles.
• Mejor integración con widgets personalizados.

Ten en cuenta que si activas el cliente React sin modo de migración, los widgets dependientes de Dojo dejarán de estar disponibles.

Aún así, si tienes prisa y quieres hacer algo sin React, puedes hackear el build y adjuntar tus propios scripts desde el index.html y acceder a la nueva API de mx sin necesidad de mx-global. Esto te permite ejecutar lógica global sin tener que montar widgets. Pero en realidad, funciones como mx.data.fetch deben ejecutarse en el contexto correcto y lo ideal es una acción JS o un widget.

Pluggable Web Widgets: el camino a seguir

Si quieres un frontend realmente robusto y moderno, los Pluggable Widgets son la solución definitiva. Y además, son el punto donde la experiencia frontend y el desarrollo low-code se dan la mano.

Ventajas:

• React + TypeScript = máxima productividad.
• Personalización absoluta del interfaz.
• Integración con props de Mendix.
• Componentes reutilizables y versionables.

Desarrollar uno es más fácil de lo que parece. Usa el Pluggable Widget Generator de Mendix, que te monta la estructura base con todo preparado. 

Consejo de estructura: Mantén una organización clara para tus widgets personalizados. Una práctica útil es agrupar todos los widgets propios bajo una ruta como widgets/custom/, y dentro de esa estructura utilizar carpetas por componente. Así facilitas el mantenimiento, el control de versiones y la incorporación de nuevos desarrolladores al proyecto.

En  la carpeta de un Pluggable Widget te encontrarás con ficheros como:

• package.json y package.xml con info de nombre, versión y ruta de despliegue.  La versión es relevante especialmente cuando haces actualizaciones, para evitar que se cargue una versión anterior cacheada. En el xml, observa que se declara el path del fichero de deployment relativo a deployment/web/widgets.
• .xml con definición del componente, especialmente sus propiedades configurables desde el Studio Pro.
• Archivo .tsx para el componente principal (si has optado por TypeScript).
• Archivo .editorPreview.tsx para personalizar cómo se muestra el componente en el editor de Mendix.

Consejo práctico: En el archivo package.json, dentro del atributo config, puedes definir el projectPath, que indica dónde se genera el build del widget. Por defecto apunta a una ruta absoluta local, pero si vas a compartir el proyecto con otros compañeros o mantener una estructura clara, es mejor definir una ruta relativa. Por ejemplo, si estás desarrollando un componente AlertDismissible dentro de widgets/custom/alertDismissible, puedes usar como projectPath: "../../../" para que el build se deposite en la carpeta widgets directamente.

Lo más complejo suele ser el manejo de props dinámicos desde el Data Model y la comunicación con microflows, pero eso no debe asustarte. Documentación oficial, ejemplos y comunidad ayudan mucho.

Recomiendo revisar la documentación del SDK de Pluggable Widgets, especialmente sobre dynamicValue y ActionValue, para integrar correctamente valores dinámicos y microflows.

Tip de depuración: Si algo no funciona como esperas, utiliza herramientas como React DevTools para inspeccionar el árbol de componentes en tiempo real, y no olvides revisar el panel de consola del navegador para interceptar errores de comunicación con Mendix.

Si estás cómodo trabajando con componentes en React, la transición a los widgets personalizados de Mendix te resultará tan natural como satisfactoria.