<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="https://sugarclub.sugarai.com/cfs-file/__key/system/syndication/rss.xsl" media="screen"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/"><channel><title>UI Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide</link><description /><dc:language>en-US</dc:language><generator>Telligent Community 12</generator><item><title>UI Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide</link><pubDate>Tue, 17 Sep 2024 14:50:00 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Current Revision posted to Dev Tutorials by Rafael Fernandes on 9/17/2024 2:50:00 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UI accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
&lt;ul&gt;
&lt;li&gt;If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;UI&amp;nbsp;Redesign&amp;nbsp;affects how your end-users interact with Sugar hence plan knowledge transfer sessions&amp;nbsp;so they can adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/31</link><pubDate>Wed, 30 Nov 2022 16:37:11 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 31 posted to Dev Tutorials by Rafael Fernandes on 11/30/2022 4:37:11 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UI accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
&lt;ul&gt;
&lt;li&gt;If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;UI&amp;nbsp;Redesign&amp;nbsp;affects how your end-users interact with Sugar hence plan knowledge transfer sessions&amp;nbsp;so they can adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/30</link><pubDate>Wed, 30 Nov 2022 16:36:20 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 30 posted to Dev Tutorials by Rafael Fernandes on 11/30/2022 4:36:20 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UI accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
&lt;ul&gt;
&lt;li&gt;If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;UI&amp;nbsp;Redesign&amp;nbsp;affects how your end-users interact with Sugar hence plan knowledge transfer sessions&amp;nbsp;so they can adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/29</link><pubDate>Wed, 26 Oct 2022 19:52:48 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 29 posted to Dev Tutorials by Rafael Fernandes on 10/26/2022 7:52:48 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
&lt;ul&gt;
&lt;li&gt;If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;UI/UX Redesign&amp;nbsp;affects how your end-users interact with Sugar hence plan knowledge transfer sessions&amp;nbsp;so they can adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/28</link><pubDate>Wed, 26 Oct 2022 19:07:32 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 28 posted to Dev Tutorials by Rafael Fernandes on 10/26/2022 7:07:32 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.
&lt;ul&gt;
&lt;li&gt;If you have a sandbox environment, you can use it for your tests as it will be upgraded first per our policy.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/27</link><pubDate>Wed, 26 Oct 2022 18:55:04 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 27 posted to Dev Tutorials by Rafael Fernandes on 10/26/2022 6:55:04 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;At the very least, you should plan to test your customizations in your Sugar instance to ensure it still works as expected after upgrade.&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/26</link><pubDate>Wed, 12 Oct 2022 13:10:15 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 26 posted to Dev Tutorials by Rafael Fernandes on 10/12/2022 1:10:15 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:&lt;/li&gt;
&lt;li&gt;
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/w/dev-tutorials/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/25</link><pubDate>Mon, 10 Oct 2022 12:53:14 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 25 posted to Dev Tutorials by Rafael Fernandes on 10/10/2022 12:53:14 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-14/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:&lt;/li&gt;
&lt;li&gt;
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/24</link><pubDate>Tue, 04 Oct 2022 15:31:38 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 24 posted to Dev Tutorials by Rafael Fernandes on 10/4/2022 3:31:38 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-61/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:&lt;/li&gt;
&lt;li&gt;
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/23</link><pubDate>Tue, 04 Oct 2022 15:30:41 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 23 posted to Dev Tutorials by Rafael Fernandes on 10/4/2022 3:30:41 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-61/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications&amp;nbsp;was not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/22</link><pubDate>Tue, 04 Oct 2022 15:10:58 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 22 posted to Dev Tutorials by Rafael Fernandes on 10/4/2022 3:10:58 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-61/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header&amp;nbsp;or Footer:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.3 and greater.&lt;/li&gt;
&lt;li&gt;You may need to maintain two versions of your addon/MLP (prior to 12.3 and 12.3+)&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/21</link><pubDate>Thu, 29 Sep 2022 15:08:59 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 21 posted to Dev Tutorials by Rafael Fernandes on 9/29/2022 3:08:59 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img alt=" " src="/resized-image/__size/800x0/__key/communityserver-wikis-components-files/00-00-00-00-61/1374.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/20</link><pubDate>Thu, 29 Sep 2022 14:10:03 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 20 posted to Dev Tutorials by Rafael Fernandes on 9/29/2022 2:10:03 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t0"&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t1"&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t2"&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2 id="mcetoc_1ge4p2f1t3"&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id="mcetoc_1ge4p2f1t4"&gt;Can I opt out of this new UI change?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;No. This is a part of Sugar&amp;rsquo;s standard release. This and future releases will include this redesign.&lt;/li&gt;
&lt;li&gt;You should use this Technical Guide to refactor your customizations, addons or MLPs to ensure they&amp;#39;ll work as designed in this release.&lt;/li&gt;
&lt;li&gt;If your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users&amp;nbsp;by GA.
&lt;ul&gt;
&lt;li&gt;Send an email to &lt;a href="mailto:support@sugarcrm.com"&gt;support@sugarcrm.com&lt;/a&gt;&amp;nbsp;to request a postponement of your upgrade.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;li&gt;If you still have questions about this redesign or customization updates,&amp;nbsp;check our &lt;a href="https://portal.sugarondemand.com"&gt;Support Team Case Portal&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/19</link><pubDate>Wed, 28 Sep 2022 17:37:48 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 19 posted to Dev Tutorials by Rafael Fernandes on 9/28/2022 5:37:48 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/18</link><pubDate>Tue, 27 Sep 2022 18:54:16 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Julia Mullins</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 18 posted to Dev Tutorials by Julia Mullins on 9/27/2022 6:54:16 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;These areas suffered minimum to no impact in this redesign:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/17</link><pubDate>Tue, 27 Sep 2022 18:53:31 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Julia Mullins</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 17 posted to Dev Tutorials by Julia Mullins on 9/27/2022 6:53:31 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise &lt;/strong&gt;-&lt;strong&gt;&amp;nbsp;&lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly.&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo:
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/16</link><pubDate>Mon, 26 Sep 2022 19:38:05 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 16 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 7:38:05 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise. &lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to transition/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and start working on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/15</link><pubDate>Mon, 26 Sep 2022 19:27:37 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 15 posted to Dev Tutorials by Rafael Fernandes on 9/26/2022 7:27:37 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise. &lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s&amp;nbsp;redesigned UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to empower/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and work on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/14</link><pubDate>Fri, 23 Sep 2022 15:58:11 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 14 posted to Dev Tutorials by Rafael Fernandes on 9/23/2022 3:58:11 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise. &lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s new UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change however it is important to review them accordingly&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to empower/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and work on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/13</link><pubDate>Fri, 23 Sep 2022 15:50:12 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 13 posted to Dev Tutorials by Rafael Fernandes on 9/23/2022 3:50:12 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise. &lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s new UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change, however, it is important to review them accordingly&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to empower/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and work on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item><item><title>UI/UX Redesign Technical Guide</title><link>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide/revision/12</link><pubDate>Fri, 23 Sep 2022 15:48:23 GMT</pubDate><guid isPermaLink="false">5c521d64-519d-47a6-9065-134618b211bf:b72a2032-c83b-4399-b593-931475812c18</guid><dc:creator>Rafael Fernandes</dc:creator><comments>https://sugarclub.sugarai.com/dev-club/w/dev-tutorials/726/ui-redesign-technical-guide#comments</comments><description>Revision 12 posted to Dev Tutorials by Rafael Fernandes on 9/23/2022 3:48:23 PM&lt;br /&gt;
&lt;h2 id="mcetoc_1gdgkm60h0"&gt;What is this UX/UI Redesign?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p&gt;&lt;img class="align-right" alt=" " src="/resized-image/__size/600x360/__key/communityserver-wikis-components-files/00-00-00-00-61/5672.3e49a018_2D00_daa4_2D00_49fd_2D00_ae1f_2D00_a5d3399e0afa.png" /&gt;&lt;/p&gt;
&lt;p&gt;Here is a top level overview of the benefits to the UI changes:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Reduced noise. &lt;/strong&gt;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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Familiarity &lt;/strong&gt;- 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Search front and center&lt;/strong&gt; - 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.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Screen Real estate &lt;/strong&gt;&amp;ndash; 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)&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Who is affected by this change?&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;p&gt;Developers will be impacted by any customization in the following areas/components of Sugar:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Header&lt;/li&gt;
&lt;li&gt;Footer (including Footer Logo)&lt;/li&gt;
&lt;li&gt;Quickcreate&lt;/li&gt;
&lt;li&gt;Quicksearch&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Those areas suffered minimum to no impact in this redesign.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notifications&lt;/li&gt;
&lt;li&gt;Profile Dropdown&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;When is this happening?&lt;/h2&gt;
&lt;p&gt;Sugar&amp;rsquo;s new UI/UX update is coming in our next cloud release 12.3 (Q1 2023) planned for January 2023.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;End-users:
&lt;ul&gt;
&lt;li&gt;Sugar has provided a sneak peek demo environment to experience the new User Interface and familiarize themselves with the new navigation prior upgrade.&lt;/li&gt;
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Developers:&amp;nbsp;
&lt;ul&gt;
&lt;li&gt;Sugar&amp;nbsp;will&amp;nbsp;release a preview as per our cadence by mid-November 2022. It follows our release preview&amp;nbsp;program with an initial Release Preview Drop 1 and subsequently in December a second drop with a more stable release.&lt;/li&gt;
&lt;li&gt;Technical guide provides all the details you need, as a developer, to plan and refactor your code before our GA date.&lt;/li&gt;
&lt;li&gt;Testing your refactored code&amp;nbsp;will be available in the release preview&amp;#39;s initial Drop.1&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;What will happen during the upgrade?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;Sugar&lt;span&gt;Upgrader&lt;/span&gt; will change core files in the base directory that were modified in this release.&lt;/li&gt;
&lt;li&gt;Sugar Upgrader will install&amp;nbsp;all newly redesigned components in their proper&amp;nbsp;places&amp;nbsp;avoiding any conflicts that could potentially prevent upgrades.&lt;/li&gt;
&lt;li&gt;Metadata menus and links are upgraded and will be displayed in the new UX accordingly.&lt;/li&gt;
&lt;li&gt;&lt;span&gt;If you have overridden (copy/paste) the structure, you must take new code and refactor/reapply your customizations.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span&gt;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&amp;#39;s&amp;nbsp; HTML/CSS elements behave different now&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;Views/Layouts
&lt;ul&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Handlebar Template&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you override this template it will break on upgrade, make sure you apply your customization to the new hbs.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;Javascript&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you used the extendsFrom, your changes will be loaded&amp;nbsp;and should work, however we recommend you test to ensure it still does what it was supposed to&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;PHP/Metadata&lt;/strong&gt;&lt;/span&gt;
&lt;ul&gt;
&lt;li&gt;If you&amp;#39;ve extended the metadata,&lt;span&gt;your changes will be loaded&amp;nbsp;and should work&lt;/span&gt;, however we recommend you test to ensure it still does what it was supposed to.&lt;/li&gt;
&lt;li&gt;If you overwrote it, you must refactor your code with the new view&amp;#39;s code.&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span&gt;&lt;strong&gt;&lt;/strong&gt;&lt;/span&gt;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.&lt;/li&gt;
&lt;li&gt;Notifications and Profile Dropdown were not affected by this change, however, it is important to review them accordingly&amp;nbsp;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;/p&gt;
&lt;h2&gt;What action do I need to take?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;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.&lt;/li&gt;
&lt;li&gt;Change management is an important
&lt;ul&gt;
&lt;li&gt;This affects your end-users, so plan knowledge transfer sessions to adapt to this new experience.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;If you&amp;#39;ve built an app or integration for Sugar that uses a &lt;a href="https://support.sugarcrm.com/SmartLinks/Developer_Guide/Architecture/Module_Loader/"&gt;Module Loadable Package (MLP)&lt;/a&gt; that includes custom Header, Footer, Quicksearch, Quick Create and Logo
&lt;ul&gt;
&lt;li&gt;You will need to refactor your customization&amp;nbsp;manually to use the new components accordingly.&lt;/li&gt;
&lt;li&gt;You will also need to update your module manifest to indicate compatibility with Sugar 12.2 and greater.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Is there a workaround, if so, what are the steps?&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;There&amp;rsquo;s no workaround planed for customizations, addons or MLPs at this point other than following the steps in this guide to refactor your code.&lt;/li&gt;
&lt;li&gt;if your customizations and/or partners could not refactor their code in time or&amp;nbsp;if your company is not ready to empower/train your users in time of GA.
&lt;ul&gt;
&lt;li&gt;As an admin, you can request to postpone the upgrade on your instance&lt;/li&gt;
&lt;li&gt;Open a support ticket requesting it.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;We do, however, encourage you to upgrade your sandboxes and work on technical details as required.&lt;/li&gt;
&lt;/ul&gt;
&lt;hr /&gt;
&lt;p id="mcetoc_1f5uvkqns0"&gt;&lt;span style="font-size:18px;"&gt;You know what this redesign is about and its impacts, let&amp;#39;s get technical:&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size:150%;"&gt;&lt;strong&gt;Move on to&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;a href="/dev-club/dev-onboarding/w/documentation/728/new-component-structure"&gt;New Component Structure&lt;/a&gt;.&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt;&lt;div style="clear:both;"&gt;&lt;/div&gt;
</description></item></channel></rss>