Cuando se trata de aprovechar al máximo IBM Maximo Application Suite (MAS), uno de los principios rectores más importantes es configurar, no personalizar. La flexibilidad de MAS permite adaptar el sistema a la apariencia, el funcionamiento y el flujo de trabajo de su organización, sin generar el endeudamiento técnico y el riesgo de mantenimiento que suelen conllevar el código personalizado.
‍

En este blog, analizaremos la función MAS que permite a los administradores configurar funciones CSS MAS personalizadas para refinar el encabezado MAS y Manage. En blogs relacionados, también analizaré cómo ajustar las propiedades del sistema de administración y la función MAS para personalizar el encabezado.

Qué es CSS

En resumen, CSS son las siglas de Cascading Style Sheets. En Maximo, esto permitirá que todo, desde los colores, las fuentes, el relleno de espacios en blanco y más, se controle con un lenguaje de marcado. En general, el CSS te permite controlar cómo se ve el contenido de Maximo en la pantalla, no qué contenido se muestra.

¿Cómo se llega a la función CSS?

Al iniciar sesión en MAS con acceso a la configuración del sistema, puede acceder al menú Configuraciones. En MAS v9.1, se encuentra en el menú de navegación, en Suite > Administración > Configuraciones. En las versiones anteriores de MAS, el menú es similar, pero inicialmente hay que acceder a él a través del engranaje de administración situado en la esquina superior derecha de la aplicación.

‍

‍

Una vez en el menú de configuraciones, la página de personalización de la interfaz de usuario permitirá configurar el encabezado. Hay una segunda pestaña llamada personalización de CSS donde se pueden guardar y publicar CSS personalizados. Lo bueno de estas configuraciones es que se encuentran en el nivel básico del MAS, por lo que cuando vuelvas tu base de datos de producción a un sistema que no sea de producción, seguirán siendo las mismas.

‍

‍

¿Cómo sabes qué cambiar?

En la mayoría de los navegadores, hay una función de inspección como parte de las herramientas para desarrolladores. En mi ejemplo, hago clic con el botón derecho en el área en la que quiero inspeccionar el CSS, selecciono inspeccionar y, a continuación, busco la pestaña de estilos en cada navegador. Desde aquí puedes buscar las etiquetas existentes que deseas modificar o añadir otras adicionales. Una buena característica del navegador es que puedes modificar estas configuraciones temporalmente en tu sesión y obtener comentarios en tiempo real. Esto puede resultar muy útil a la hora de aprender a manipular el CSS o si no tienes acceso de administrador del sistema y quieres sugerirle cambios a tu administrador.

‍

‍

Ejemplo de CSS

En esta sección, he destacado algunos ejemplos que te permitirán marcar la barra de cabecera y los menús con CSS. Estos son solo algunos ejemplos que creo que podrían aplicarse a casi todos los sistemas. Me parecen especialmente útiles en los sistemas que no son de producción, en los que se quiere destacar que el usuario no está en el sistema de producción.

‍

/* Ampliar el ancho del encabezado */

.mas-common-shell--logotipo personalizado

{ancho máximo: 6rem;}

‍

/* Hide values in the help menu */ 
a[data-testid="suite-header-help--whatsNew"], 
a[data-testid="suite-header-help--gettingStarted"], 
a[data-testid="suite-header-help--support"], 
a[data-testid="suite-header-help--videos"], 
a[data-testid="suite-header-help--requestEnhancement"]  
{ display: none !important; } 

‍

‍

‍
‍

/* Adjust Header Background Colors */ 
.cds--header,  
.cds--header .cds--header__name,  
.cds--header__global,  
.cds--header a.cds--header__menu-item, 
.iot--suite-header-profile 
{ background-color: #365A6F; }

‍

‍

‍

/* Adjust left menu colors */ 
.cds--side-nav 
{ background-color: #365A6F; }  

/* Adjust menu search bar */ 
.cds--search, 
.cds--search-input   
{ background-color: #18242C !important; }

‍

‍

‍

Final lado a lado con todos los ejemplos de CSS aplicados

‍

‍

Centrándose en configuración en lugar de personalización, puede crear un entorno de Maximo Manage que se sienta exclusivamente suyo: visualmente familiar, fácil de navegar y totalmente compatible con futuras actualizaciones.
‍

Los pequeños ajustes, como los cambios en las propiedades, las actualizaciones de encabezados y las mejoras de CSS, contribuyen en gran medida a mejorar la experiencia del usuario sin complicar el sistema. Estos son los tipos de ajustes que hacen que Manage no solo sea funcional, sino también cómodo, como en casa.