You are currently reviewing an older revision of this page.

UI/UX Redesign Technical Guide

What is this UX/UI Redesign?

Sugar is implementing a customer-inspired, research-based redesign of the user interface and navigation. This redesign gives you more visual real estate, serving up more relevant data to your fingertips to help increase your productivity and accelerate goal achievements.

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

  • Reduced noise - Limiting the top navigation elements in the left Nav (rail) were easier to consume for user. We heard that most average users navigate to 3 modules. Admins do use much more but the expanding drawer was identified as a convenient solution for them.
  • Familiarity - Admins anticipate the alignment of the design with other tools their users work with daily will make Sugar more intuitive and comfortable. Particularly when onboarding new employees. Using common UI patterns means that new users can leverage existing knowledge making the application feel more intuitive.
  • Search front and center - Search is a highly used feature for service agents and Sales reps to quickly get to a record. The new header design promotes this interaction. (admins mentioned the number of times they were surprised that their users asked how to search within Sugar even though the search is in the header today.
  • Screen Real estate – This change keeps the overall content area very much the same. This is desirable for working in lists and our 2 column records. (Screen size/resolution will greatly impact the perceived value of this)

Who is affected by this change?

This redesign has a significant impact on day-by-day user experience. New navigation and positioning of elements are part of this change as well as customizations can be impacted and not displayed as users are used to currently.

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

  • Header
  • Footer (including Footer Logo)
  • Quickcreate
  • Quicksearch

These areas suffered minimum to no impact in this redesign:

  • Notifications
  • Profile Dropdown

When is this happening?

Sugar’s redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.

  • End-users:
    • Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.
  • Developers: 
    • Sugar will release a preview as per our cadence by mid-November 2022. It follows our release preview program with an initial Release Preview Drop 1 and subsequently in December a 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.
  • Sugar Upgrader will install all newly redesigned components in their proper places avoiding any conflicts that could potentially prevent upgrades.
  • Metadata menus and links are upgraded and will be displayed in the new UX accordingly.
  • If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.
  • If you use the Extension Framework, best case you just need to test and ensure it still works, but could be more to it, the component's  HTML/CSS elements behave different now.
  • Views/Layouts
    • Handlebar Template
      • If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.
    • Javascript
      • If you used the extendsFrom, your changes will be loaded and should work, however we recommend you test to ensure it still does what it was supposed to.
    • PHP/Metadata
      • If you've extended the metadata,your changes will be loaded and should work, however we recommend you test to ensure it still does what it was supposed to.
      • If you overwrote it, you must refactor your code with the new view's code.
  • Important to note you will not be able to simply override the new component with your current (prior to 12.3) code as the components have been redesigned and have different behavior.
  • Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly. 

What action do I need to take?

  • At the very least, you should plan to test your customizations on the new UI that exist in your Sugar instance to ensure it still works as expected after upgrade.
  • Change management is an important
    • This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.
  • 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 12.3 and greater.
    • You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)

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 redesign is about and its impacts, let's get technical:

Move on to New Component Structure.