Starting with Maximo Application Suite 9.0, administrators can change the appearance of the user interface by relabelling the common header and applying custom styles through advanced CSS customisations. This feature, called User Interface Customisation, is available under MAS Administration → Configuration. Because these customizations are instance-specific, a distinct set of styles can be applied per environment. Making it easy to visually distinguish Development, QA, or Test environments from Production.

However, this feature does not apply to MAS Mobile distributed through app stores.

Even though MAS Mobile doesn't support this feature, you can still give users a visual hint about which environment they're working in - the good news is that this customisation is easy to achieve.

Proposed customisation is built around two principles:

• Environment colour property - The colour associated with each environment is defined as a custom system property in MAS Manage, so a different value can be set independently per environment (Development, QA, Production, etc.).
• Waffle menu colour indicator — The waffle menu icon colour in MAS Mobile reflects the current environment, giving users visual clue about which environment they are working in. No more navigating to the About page in Settings just to check environment weburl.

Changes:

1. Create custom maximo.mobile.c_envcolour system property in MAS Manage.
   
2. Customise MAS Mobile - APPID: NAVIGATOR application by adding custom code and publish new revision of the application.

   class AppCustomizations {
      async applicationInitialized(app) {
       this.app = app;
   
       try {
         const sysPropColour = await this.app.client.getSystemProperty('maximo.mobile.c_envcolour');
         if (sysPropColour) {
           const style = document.createElement('style');
           style.textContent = `
               :root {
                   --environment-color: ${sysPropColour};
               }
   
               .Application > header #NavigatorMenuButton > svg {
                   fill: var(--environment-color, #ffffff) !important;
               }
           `;
           document.head.appendChild(style);
         }
       } catch (err) {
         // Ignore and use default colour
       }
      }
    }
   
    export default AppCustomizations;

Example of usage

TEST Environment - Red colour (#da1e28)

QA Environment - Green colour (#32a852)

PRODUCTION Environment - Empty property (default IBM colour will be used)

Summary:

Knowing which environment you're working in is a simple but effective way to avoid accidental changes in the wrong place. By defining a single system property in MAS Manage and using it in the waffle menu colour, you get a lightweight, low-maintenance solution that works consistently across all your environments. If your customer needs an even stronger visual signal, you can go a step further and apply additional colour styling for other icons/labels even background colour in the footer section as well.