Is there a way to override the css of the components in Maximo mobile 9.0.5 ?. Customer wanted a different layout for the Technician list screen which doesn't fit into any of the out of box templates. I have created custom layout using Card component and adaptive rows and columns. This looks fine layout wise. But I want to remove/modify default padding and margins. Also would like to use smaller font size. Didn't find any css file that I can use.

Hi Pasada,

You can create your custom css file, add it to WORKSPACE (NAVIGATOR/src/custom.css) and import it using this line import './custom.css'; in the AppCustomizations java script file. Please remember that these changes needs to be done in NAVIGATOR application definition (so they will work for real mobile device in all apps).

// Custom Application Logic
import './custom.css';

 class AppCustomizations {
    (...)
 }

 export default AppCustomizations;
 

------------------------------
Bartosz Marchewka
IBM Maximo Consultant
AFRY
------------------------------

Hi Prasad,

I was mistaken. The mobile application still uses an iframe (you can see this in the HTML source of the MAS Mobile application). Because of this, if you want to customize the style for the Technician list screen (TECHMOBILE) application, the changes I described earlier need to be applied in the TECHMOBILE application rather than in the NAVIGATOR application.

The file that needs to be added: TECHMOBILE/src/custom.css

The file that needs to be modify: TECHMOBILE/src/AppCustomizations.js (add import section)

// Custom Application Logicimport './custom.css'; class AppCustomizations {    (...) } export default AppCustomizations;