Wenn es darum geht, das Beste aus der IBM Maximo Application Suite (MAS) herauszuholen, ist eines der wichtigsten Leitprinzipien die Konfiguration, nicht die Anpassung. Die Flexibilität von MAS ermöglicht es, das System an das Erscheinungsbild und den Arbeitsablauf Ihres Unternehmens anzupassen — ohne die technischen Schulden und das Wartungsrisiko einzugehen, die häufig mit benutzerdefiniertem Code einhergehen.
‍

In diesem Blog werden wir die MAS-Funktion vorstellen, mit der Administratoren benutzerdefinierte CSS-MAS-Funktionen konfigurieren können, um Ihren MAS- und Manage-Header zu verfeinern. In verwandten Blogs werde ich mich auch mit der Anpassung der Systemeigenschaften verwalten und der MAS-Funktion befassen, um den Header anzupassen.

Was ist CSS

Kurz gesagt, CSS steht für Cascading Style Sheets. In Maximo wird dies ermöglichen, dass alles, angefangen bei Farben, Schriftarten, Leerraumabständen und vielem mehr, mit einer Auszeichnungssprache gesteuert werden kann. Im Allgemeinen können Sie mit CSS steuern, wie der Maximo-Inhalt auf dem Bildschirm aussieht, nicht, welcher Inhalt angezeigt wird.

Wie kommst du zum CSS-Feature

Wenn Sie sich mit Zugriff auf die Systemkonfiguration bei MAS anmelden, gelangen Sie zum Konfigurationsmenü. In MAS v9.1 finden Sie dies im Navigationsmenü unter Suite > Administration > Konfigurationen. In älteren Versionen von MAS ist das Menü ähnlich, muss aber zunächst über das Admin-Gerät in der oberen rechten Ecke der Anwendung aufgerufen werden.

‍

‍

Sobald Sie sich im Konfigurationsmenü befinden, können Sie auf der Seite zur Anpassung der Benutzeroberfläche den Header konfigurieren. Es gibt eine zweite Registerkarte namens CSS-Anpassung, auf der benutzerdefiniertes CSS gespeichert und veröffentlicht werden kann. Das Schöne an diesen Konfigurationen ist, dass sie sich auf der MAS-Core-Ebene befinden. Wenn Sie also Ihre Produktionsdatenbank in ein System zurückfließen lassen, das kein Produktionssystem ist, bleiben sie unverändert.

‍

‍

Woher weißt du, was du ändern musst?

In den meisten Browsern gibt es eine Inspektionsfunktion als Teil der Entwicklertools. In meinem Beispiel klicke ich mit der rechten Maustaste auf den Bereich, für den ich das CSS überprüfen möchte, wähle Inspect aus und suche dann den Style-Tab in meinem Browser. Von hier aus können Sie entweder vorhandene Tags finden, die Sie ändern möchten, oder zusätzliche hinzufügen. Eine nette Browserfunktion ist, dass Sie diese Konfigurationen in Ihrer Sitzung vorübergehend ändern und Feedback in Echtzeit erhalten können. Dies kann sehr hilfreich sein, wenn Sie lernen, das CSS zu manipulieren, oder wenn Sie keinen Systemadministratorzugriff haben und Ihrem Administrator Änderungen vorschlagen möchten.

‍

‍

Beispiel CSS

In diesem Abschnitt habe ich einige Beispiele hervorgehoben, mit denen Sie die Kopfleiste und die Menüs mit CSS kennzeichnen können. Dies sind nur einige Beispiele, die meiner Meinung nach auf fast alle Systeme angewendet werden könnten. Ich finde diese besonders nützlich in Nicht-Produktionssystemen, bei denen Sie hervorheben möchten, dass sich der Benutzer nicht im Produktionssystem befindet.

‍

/* Header-Breite erweitern */

.mas-common-shell--benutzerdefiniertes Logo

{maximale Breite: 6 rem;}

‍

/* 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 Seite an Seite mit allen angewendeten Beispiel-CSS

‍

‍

Durch den Fokus auf Konfiguration statt Anpassung, können Sie eine Maximo Manage-Umgebung erstellen, die sich wie Ihre anfühlt — visuell vertraut, einfach zu bedienen und durch zukünftige Upgrades vollständig unterstützt.
‍

Kleine Verbesserungen wie Eigenschaftsänderungen, Header-Updates und CSS-Verfeinerungen tragen wesentlich zur Verbesserung der Benutzererfahrung bei, ohne Ihr System zu komplizieren. Das sind die Anpassungen, die Manage nicht nur funktionell, sondern auch komfortabel machen — wie zu Hause.