You are currently reviewing an older revision of this page.

Modern UI Technical Guide

What is this Modern UI?

As part of SugarCRM’s commitment to simplifying and modernizing its platforms based on customer feedback and research, Sugar is initiating a new modernization phase of its user interface and navigation. This redesign follows principles of simplicity and consistency, aligned with Material Design 3.

Here is a top level overview of the benefits to the Modern UI: 

  • Simplicity & Consistency (Material Design 3 principles.)
  • Visual Hierarchy & Typography
  • Interactive Charts & Data Visualization
  • Colors, Gradients and Graphics
  • Rounded containers and buttons
  • Personalization & User-Centric Design 

Who is affected by this change?

This modernization has been designed to not have any impact on day-by-day user experience. No changes, other than visual (and some minor bug fixes), are being introduced in an iterative approach. 

Developers might be impacted by any customization in the following areas/components of Sugar: 

  • Handlebars templates 
  • CSS 
  • Javascript 

These areas suffered greater impacts, but should not have been customizable by developers: 

  • MVC View Templates (*.tpl)

When is this happening?

Sugar’s redesigned UI update is coming in our next cloud release 14.2 (Q4 2024) planned for October 2024.

  • End-users:
    • Should work with their partners for a sneak peak demo after release preview code is released in late-August.
  • Developers: 
    • Sugar will release a preview as per our cadence by late-August 2024. It follows our release preview program with an initial Release Preview Drop 1 and subsequently in Mid-September second drop with a more stable release.
    • Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.
    • Testing your refactored code will be available in the release preview's initial Drop.1. 

What will happen during the upgrade?

  • Sugar Upgrader will change core files in the base directory that were modified in this release.
  • If you have customized any Handlebars templates, Javascript controllers, or view/layout metadata files, your custom files will not be altered.
  • You may need to make some updates to your customizations to work well in the updated UI (see “What Action do I Need to Take” below for more information).

What action do I need to take?

  • At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
    • If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.
  • If you have any existing customizations of the Handlebars templates, Javascript controllers, or layout/view metadata files updated by Modern UI work:
    • You will likely need to refactor your customizations to incorporate the new changes to the core file(s)
    • If you don't have, just make sure you test your customizations to ensure they still appear and behave as expected.
  • If you have any customizations built on these components:
    • Through the extension framework, these are typically safer customizations that are less likely to have issues on upgrade.
    • By overriding the core component file, these customizations are more likely to encounter issues on upgrade 
  • For more technical information about what changes to look for/test on upgrade to 14.2, and how to handle them, see the technical information section below 
  • Views/Layouts 
    • Handlebars Template 
      • If you override these templates, they may break on upgrade.
      • If they do break, make sure you compare your customization to the updated core file and incorporate changes from the core file into your custom template as needed 
    • Javascript 
      • If you used the extendsFrom attribute to extend a core controller, your changes will be loaded and should work.
      • We recommend you test to ensure it still does what it was supposed to.
      • The changes in 14.2 had minor impacts to Javascript behavior, but one change in particular to look out for is that some views/layouts/fields have had their ‘className’ attributes modified to update the CSS of the component.
      • If you have overridden this attribute in your Javascript customization, you may need to modify it to incorporate the changes from the core file 
    • PHP/Metadata 
      • If you've extended the metadata, your changes will be loaded and should work.
      • We recommend you test to ensure it still does what it was supposed to. 
  • If you've built an app or integration for Sugar that uses a Module Loadable Package (MLP) that includes custom Header or Footer:
    • You will need to refactor your customization manually to use the new components accordingly.
    • You will also need to update your module manifest to indicate compatibility with Sugar 14.2 and greater.
    • You may need to maintain two versions of your addon/MLP (prior to 14.2 and 14.2+)
  • Change management is an important
    • Modern UI affects how your end-users interact with Sugar hence plan knowledge transfer sessions so they can adapt to this new experience.

Can I opt out of this new UI change?

  • No. This is a part of Sugar’s standard release. This and future releases will include this redesign.
  • You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they'll work as designed in this release.
  • If your customizations and/or partners could not refactor their code in time or if your company is not ready to transition/train your users by GA.
  • We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.
  • If you still have questions about this redesign or customization updates, check our Support Team Case Portal.

You know what this guide is about and its impacts, let's get technical:

Move on to UI Element Changes.