Configuración del diseño de pantalla y CSS en MAS 9

Bhooshan Shukla

June 4, 2025

A medida que los sistemas empresariales evolucionan, también lo hace la necesidad de experiencias de usuario personalizadas. Ya sea para alinearse con la marca corporativa o para mejorar la usabilidad, la personalización de la interfaz de usuario desempeña un papel clave en la satisfacción y la adopción de los usuarios. Para los administradores de Maximo, Maximo Application Suite (MAS) 9 ofrece la flexibilidad y la comodidad que tanto necesitan para personalizar los elementos de la interfaz sin tener que profundizar en los procesos de implementación que requieren mucho código.

Veamos cómo MAS 9 simplifica el diseño y la personalización de CSS, ayudando a las organizaciones a adaptar Maximo para cumplir con sus requisitos únicos, con menos esfuerzo y tiempo de inactividad.

¿Por qué personalizar la interfaz de Maximo?

Maximo ya es conocido por sus potentes capacidades de gestión de activos, pero la capacidad de alinearlo visualmente con su negocio añade una capa adicional de profesionalismo y claridad. Las necesidades comunes incluyen:

  • Añadir el logotipo o el nombre de una empresa
  • Mostrar mensajes de inicio de sesión
  • Cambiar los colores, las fuentes y la alineación de la pantalla

Históricamente, estos cambios requerían la edición de archivos XML o la modificación directa del archivo maximo.css, tareas que consumían mucho tiempo y requerían la reimplementación de la aplicación.

MAS 9 ofrece un nuevo enfoque que permite actualizaciones en tiempo real a través de la interfaz de administrador de la suite, lo que elimina la necesidad de tiempos de inactividad o despliegues completos.

Personalización del encabezado Maximo

MAS 9 permite una personalización sencilla del encabezado de la aplicación. A continuación, le indicamos cómo personalizarlo con la marca de su empresa:

  • Inicie sesión en Maximo Application Suite (MAS) Core
  • Haga clic en Administrador y configuraciones de la suite
Picture 1, Picture


  • Seleccione la opción «Personalización de la interfaz de usuario» en la sección «Otros»
A screenshot of a computerAI-generated content may be incorrect., Picture
  • Actualizar el nombre de la empresa, el nombre del producto y el logotipo
A screenshot of a computerAI-generated content may be incorrect., Picture

Actualiza los detalles y haz clic en «Guardar y publicar». Este cambio se refleja instantáneamente en la página de inicio de sesión y en el encabezado de la aplicación, lo que crea una experiencia de marca coherente.

A screen shot of a computerAI-generated content may be incorrect., Picture
Antes del cambio
A screenshot of a computerAI-generated content may be incorrect., Picture
Tras el cambio

Anular Maximo CSS

Para una personalización más profunda, como los mensajes de inicio de sesión o los ajustes de la interfaz de usuario (color, alineación, fuente), ahora puedes anular el CSS predeterminado de Maximo directamente desde el panel de administración.

Prerrequisito

Antes de realizar un cambio para anular el cambio de CSS, es necesario actualizar la siguiente propiedad del sistema.

«mxe.sec.header.Content_Security_Policy»

  • Inicie sesión en Maximo Gestione la aplicación y modifique la propiedad del sistema
A screenshot of a computerAI-generated content may be incorrect., Picture
  • Agregue el dominio de la empresa al valor de la propiedad después de «style-src» e «img-src» de la siguiente manera:
    Síntex
    : .agregar *.MyCompanyDomain.com
    Ejemplo
    : incluir el dominio en el valor global.
A close-up of a computer codeAI-generated content may be incorrect., Picture


  • Guarde la propiedad del sistema y realice una actualización en vivo

Proceso para anular maximo.css

  • Núcleo de Maximo Application Suite (MAS)
  • Haga clic en Administrador y configuraciones de la suite
  • Seleccione la opción «Personalización de la interfaz de usuario» en la sección «Otros»
  • Haga clic en Personalización de CSS y habilite
A screenshot of a computerAI-generated content may be incorrect., Picture


  • Añada su configuración CSS personalizada y haga clic en «Guardar y publicar». Por ejemplo, añada un mensaje de inicio de sesión personalizado y ajuste la alineación de la pantalla.
    p #x7ynq: :after {visibility: visible; content: «Bienvenido a Maximo - Development»;
    posición: absoluta; izquierda: 0; arriba: 0;} p #x7ynq {visibilidad: oculta; posición: relativa;}
Picture 1, Picture
A person standing on a platformAI-generated content may be incorrect., Picture
Página de inicio de sesión antes del cambio
A screenshot of a computerAI-generated content may be incorrect., Picture
Diseño de la aplicación antes del cambio

Picture 1, Picture
Página de inicio de sesión después del cambio
A screenshot of a computerAI-generated content may be incorrect., Picture
Diseño de la aplicación después del cambio

En este ejemplo se agrega un mensaje de inicio de sesión y se ajusta la ubicación del texto.

Nota: Los cambios de CSS son específicos de cada componente. La personalización de Maximo Manage no afectará a otros componentes, como Maximo Health.

Fuente: https://www.ibm.com/docs/en/masv-and-l/cd?topic=interface-updating-user

Maximo Application Suite 9 permite a los administradores personalizar la apariencia de sus aplicaciones con mayor facilidad que nunca. Al usar las herramientas de personalización integradas, los equipos ahora pueden alinear las interfaces de Maximo con su marca y mejorar la usabilidad, sin largos ciclos de desarrollo ni problemas de reimplementación.


Si aún no has explorado las funciones de personalización de MAS 9, ahora es el momento perfecto para sumergirte y mejorar visualmente tu entorno de Maximo.

Unlock the Ultimate Guide to IBM Maximo Application Suite (MAS)

Discover everything you need to know to modernize your asset management strategy.

Inside, you’ll learn:

  • What’s new in IBM Maximo Application Suite 9.0
  • Key differences between Maximo 7.6 and MAS
  • How AppPoints and OpenShift change the game
  • Industry use cases across energy, manufacturing, and transportation
  • Step-by-step guidance for upgrading and migration readiness
Cover of 'The Ultimate Guide to MAS Maximo Application Suite' by Naviam featuring a man in a yellow construction helmet and safety vest holding a tablet.
×

ActiveG, BPD Zenith, EAM Swiss, InterPro Solutions, Lexco, Peacock Engineering, Projetech, Sharptree, and ZNAPZ have united under one brand: Naviam.

You’ll be redirected to the most relevant page at Naviam.io in a few seconds — or you can go now.

Read Press Release