Catalog UI pages lose their style when the instance is upgraded to Fuji or Geneva. This is due to a change introduced in Fuji where the call to the CSS file is done within each page, rather than globally. If customers modify the UI page before upgrading, they won't get the latest change, so their pages won't render properly.
Steps to Reproduce
On a pre-Fuji instance:
- Go to System UI > UI Pages.
- Search for name = com.glideapp.servicecatalog_checkout_view and open it.
- Make a change and save it.
In a Fuji instance:
- Order an item.
- Notice that the checkout page does not have the proper style. See screenshot.
Customized UI Macros or UI Pages do not get upgraded to get the latest changes. To overcome most of the CSS issues, each one of the customized pages must include lines to call the missing scripting files.
- Navigate to System UI > UI pages.
- Search for the UI page with CSS problems. (In the example below, it is named com.glideapp.servicecatalog_checkout_view.)
- Include the lines just after the line <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<g:requires name="scripts/js_includes_catalog.js" includes="true" />
<g:requires name="styles/js_includes_catalog.css" includes="true" />
<g:requires name="styles/sc_cat_only.css" includes="false"/>
- Save the record.
- More adjustments might be required, depending on your customizations.
Related Problem: PRB621891