Om het maximale uit IBM Maximo Application Suite (MAS) te halen, is een van de belangrijkste uitgangspunten configureren, niet aanpassen. De flexibiliteit van MAS maakt het mogelijk om het systeem aan te passen aan de look, feel en workflow van uw organisatie, zonder het technische schuld- en onderhoudsrisico te introduceren dat vaak gepaard gaat met aangepaste code.

In deze blog bespreken we de MAS-functie waarmee beheerders aangepaste CSS MAS-functies kunnen configureren om je MAS te verfijnen en de Manage-header te verfijnen. In gerelateerde blogs zal ik ook kijken naar het aanpassen van de eigenschappen van het beheersysteem en de MAS-functie om de koptekst aan te passen.

Wat is CSS

In het kort staat CSS voor Cascading Style Sheets. In Maximo zorgt dit ervoor dat alles, van kleuren, lettertypen, witruimte-opvulling en meer, kan worden beheerd met een opmaaktaal. Over het algemeen kun je met CSS bepalen hoe de Maximo-inhoud eruitziet op het scherm, niet welke inhoud wordt weergegeven.

Hoe kom je bij de CSS-functie

Als u inlogt op MAS met toegang tot de systeemconfiguratie, gaat u naar het menu Configuraties. In MAS v9.1 is dit in het navigatiemenu onder Suite > Beheer > Configuraties. In oudere versies van MAS is het menu vergelijkbaar, maar in eerste instantie moet het toegankelijk zijn via het beheerderstoestel in de rechterbovenhoek van de applicatie.

A screenshot of a computerAI-generated content may be incorrect.

Als u eenmaal in het configuratiemenu bent, kunt u op de pagina voor het aanpassen van de gebruikersinterface de koptekst configureren. Er is een tweede tabblad genaamd CSS-aanpassing waar aangepaste CSS kan worden opgeslagen en gepubliceerd. Het mooie van deze configuraties is dat ze zich op het MAS-kernniveau bevinden, dus wanneer u uw productiedatabase terugstuurt naar een niet-productiesysteem, blijven ze hetzelfde.

A screenshot of a computerAI-generated content may be incorrect.

Hoe weet je wat je moet veranderen?

In de meeste browsers is er een inspectiefunctie als onderdeel van de ontwikkelaarstools. In mijn voorbeeld klik ik met de rechtermuisknop op het gebied waarvoor ik de CSS wil inspecteren, selecteer ik inspecteer en zoek ik vervolgens het stijltabblad per browser. Hier kunt u bestaande tags vinden die u wilt wijzigen of extra tags toevoegen. Een leuke browserfunctie is dat je deze configuraties tijdelijk in je sessie kunt aanpassen en realtime feedback kunt krijgen. Dit kan erg handig zijn als je leert hoe je de CSS moet manipuleren of als je geen systeembeheerderstoegang hebt en je je beheerder wijzigingen wilt voorstellen.

A screenshot of a computerAI-generated content may be incorrect.

Voorbeeld CSS

In deze sectie heb ik enkele voorbeelden uitgelicht waarmee je de kopbalk en menu's kunt voorzien van CSS. Dit zijn slechts enkele voorbeelden die volgens mij op bijna alle systemen kunnen worden toegepast. Ik vind deze vooral handig in niet-productiesystemen waarbij je wilt benadrukken dat de gebruiker niet in het productiesysteem zit.

/* Breid de breedte van de koptekst uit */

.mas-common-shell--aangepast logo

{maximale breedte: 6rem;}

Group 1, Grouped object

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

Group 1, Grouped object


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

Group 1, Grouped object

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

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

Group 3, Grouped object

Finale naast elkaar met alle voorbeelden van CSS toegepast

Group 5, Grouped object

Door te focussen op configuratie in plaats van maatwerkkun je een Maximo Manage-omgeving creëren die uniek aanvoelt als de jouwe: visueel vertrouwd, eenvoudig te navigeren en volledig ondersteund bij toekomstige upgrades.

Kleine aanpassingen, zoals wijzigingen in eigenschappen, headerupdates en CSS-verfijningen, helpen de gebruikerservaring aanzienlijk te verbeteren zonder uw systeem ingewikkeld te maken. Dit soort aanpassingen maken Manage niet alleen functioneel, maar ook comfortabel, zoals thuis.

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