Lorsqu'il s'agit de tirer le meilleur parti d'IBM Maximo Application Suite (MAS), l'un des principes directeurs les plus importants est de configurer et non de personnaliser. La flexibilité du MAS permet d'adapter le système à l'apparence et au flux de travail de votre organisation, sans introduire la dette technique et les risques de maintenance qui accompagnent souvent le code personnalisé.
‍

Dans ce blog, nous allons passer en revue la fonctionnalité MAS qui permet aux administrateurs de configurer des fonctionnalités CSS MAS personnalisées pour affiner votre en-tête MAS et Manage. Dans les blogs connexes, j'examinerai également l'ajustement des propriétés du système de gestion et de la fonction MAS pour personnaliser l'en-tête.

Qu'est-ce que le CSS

En bref, CSS est l'abréviation de Cascading Style Sheets. Dans Maximo, cela permettra de contrôler tout ce qui concerne les couleurs, les polices, le remplissage des espaces blancs, etc. à l'aide d'un langage de balisage. En général, le CSS vous permet de contrôler l'apparence du contenu Maximo à l'écran, et non le contenu qui s'affiche.

Comment accéder à la fonctionnalité CSS

La connexion à MAS avec accès à la configuration du système vous permet d'accéder au menu Configurations. Dans MAS v9.1, cela se trouve dans le menu de navigation sous Suite > Administration > Configurations. Dans les anciennes versions de MAS, le menu est similaire mais doit d'abord être accessible via l'équipement d'administration situé dans le coin supérieur droit de l'application.

‍

‍

Une fois dans le menu des configurations, la page de personnalisation de l'interface utilisateur permettra de configurer l'en-tête. Il existe un deuxième onglet appelé Personnalisation CSS dans lequel le CSS personnalisé peut être enregistré et publié. L'avantage de ces configurations est qu'elles se situent au niveau central du MAS. Ainsi, lorsque vous redirigez votre base de données de production vers un système hors production, elles restent les mêmes.

‍

‍

Comment savez-vous ce qu'il faut changer ?

Dans la plupart des navigateurs, une fonction d'inspection fait partie des outils de développement. Dans mon exemple, je clique avec le bouton droit de la souris sur la zone pour laquelle je souhaite inspecter le CSS, je sélectionne inspecter, puis je trouve l'onglet de style dans chaque navigateur. À partir de là, vous pouvez soit trouver des balises existantes que vous souhaitez modifier, soit en ajouter d'autres. Une fonctionnalité intéressante du navigateur est que vous pouvez modifier temporairement ces configurations au cours de votre session et obtenir des commentaires en temps réel. Cela peut être très utile lorsque vous apprenez à manipuler le CSS ou si vous ne disposez pas d'un accès administrateur système et que vous souhaitez suggérer des modifications à votre administrateur.

‍

‍

Exemple de CSS

Dans cette section, j'ai mis en évidence quelques exemples qui vous permettront de personnaliser la barre d'en-tête et les menus avec du CSS. Ce ne sont là que quelques exemples qui, je pense, pourraient être appliqués à presque tous les systèmes. Je les trouve particulièrement utiles dans les systèmes hors production où vous souhaitez souligner que l'utilisateur n'est pas dans le système de production.

‍

/* Agrandir la largeur de l'en-tête */

.mas-common-shell--logo personnalisé

{largeur maximale : 6 mètres ;}

‍

/* 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; }

‍

‍

‍

Finale côte à côte avec tous les exemples de CSS appliqués

‍

‍

En mettant l'accent sur configuration au lieu de personnalisation, vous pouvez créer un environnement Maximo Manage qui vous ressemble : visuellement familier, facile à naviguer et entièrement pris en charge lors des futures mises à niveau.
‍

De petits ajustements tels que les modifications de propriétés, les mises à jour des en-têtes et les améliorations du CSS contribuent grandement à améliorer l'expérience utilisateur sans compliquer votre système. Ce sont ces types d'ajustements qui rendent Manage non seulement fonctionnel, mais aussi confortable, comme à la maison.