Maximo Application Suite
Customer-managed

Updating the user interface

Note: If you are using a Maximo® Application Suite as a Service environment that is based on Maximo Application Suite 9.0, this feature is not available.

Starting in Maximo Application Suite 9.0, you can change the appearance of the user interface by relabeling the common header and apply custom styles by using advanced CSS customizations.

About this task

To update the common header and the Maximo Application Suite CSS, you can use the User interface customization option on the Configurations page to implement the following changes:

Customized branding

You can replace the IBM and Maximo Application Suite branding on the header and also remove IBM brand styles by using CSS overrides, applying colors, typographic styles to any visual element.

Environment identification

Because these customizations are instance-specific, one set of styles can be applied to development or test environments, including labeling the name of the application, to differentiate them from production environments.

Style adjustments

Similar to all IBM products, the Maximo Application Suite user interface uses the Carbon Design System, which is a visual and UX design language. For more information, see, Carbon Design System.

By using the user interface customization feature, you can change the style of the current Carbon skin. For example, you can change the skin in Maximo Manage to reduce the font size and required scrolling. Previously, Maximo Manage supported several skins, but in Maximo Application Suite all applications use a single Carbon-based skin. Combined with existing UI system properties for Maximo Manage, you can change the current skin in Maximo Manage to be more similar to an older skin.

To get started, you can use the Manage_Overrides_tempate.css template file, which includes multiple key CSS classes and example customizations. The following image illustrates the updated skin for Maximo Manage and shows a smaller font size and reduced spacing. The updated skin for Maximo Manage that shows smaller font size and reduced spacing.

Note: This template is an example of changes that you can implement and is not officially supported by IBM® Support.

It might be necessary to customize individual applications. For example, customizing Maximo Manage does not impact Maximo Health.

You can update the user interface by applying changes on the Header configuration and CSS customization pages:

Header configuration

You can replace the IBM and Maximo Application Suite branding with your own company branding and also upload a formatted company logo.

CSS customization

Cascading Style Sheets (CSS) is code that defines the visual appearance of the user interface. With this customization, a single override code block is loaded on each page, which you can define to change the appearance of any element in Maximo Application Suite. These changes include colors, spacing, font sizes, and typography.

CSS classes are shared across pages and applications. Any CSS change to an application is considered a customization to code and might cause unexpected changes to any application in the Suite.

Considerations

CSS customization is not supported by IBM. Consider whether changes that are made by CSS customization cause any issues before you open support cases. The purpose of user interface customization is only to streamline the delivery of these types of changes.
CSS classes can change from one release to another, particularly in the newer, role-based applications. After you upgrade from Maximo Application Suite 9.0 to a later version, test your customization again when the upgrade is complete.
CSS classes might affect multiple pages or applications.
Customizations that are made do not impact Maximo Monitor or Maximo Mobile applications from the app stores in Maximo Application Suite 9.0.

Procedure

On the Suite administration page, from the side navigation menu, click Configurations and then click User interface customization.
To show your own logo and company branding in the header, update the header configuration.
1. On the Header configuration tab, enter your company name and product name.
2. Upload a .svg or .png file that shows before the company name in the header.
  The maximum file size is 1 MB, and the optimum height is 40 pixels or less.
To change the appearance of the user interface by using CSS, update the current CSS.
1. On the CSS customization tab, set Enable CSS customization to on.
2. Enter your CSS changes. You can also upload the CSS changes.
  To search the current CSS and find classes, you can use the developer tools in your browser.
  For example, to change the color of the header class from black to dark cyan, add the following syntax:
```
.bx--header {
  background-color: darkcyan;
}
```
  To update an application skin, you can upload a predefined CSS file. For example, upload the Manage_Overrides_tempate.css file to change the appearance of the Maximo Manage application.
3. To disable changes and return to the default CSS, you can set Enable CSS customization to off.
Save your changes.

Example

If you want to change the appearance of the login page to show your company name and a different image, you can update the CSS and header. For more information, see Example: Changing the login page.

What to do next

If you update the CSS and custom changes do not show, you must configure the content security policy (CSP).