A new Sugar UX coming in Winter ’18

Please visit this post at the Developer Blog’s new home if you want to leave comments.

https://community.sugarcrm.com/community/developer/blog/2017/11/29/a-new-sugar-ux-coming-in-winter-18

 

SugarCRM is on a mission to empower our users to delight their customers. To that end, we are pleased to introduce the first phase of visual restyling, and give some tips on how to work with the new UX.

Our process in developing the new UX

Sugar 7 introduced the Sidecar framework with massive user interface improvements (called SugarUX) and a modernized architecture. Since then, we have been working hard on the next iteration of SugarUX built on the Sidecar framework. Our guiding principles came from our customers and their feedback on Sidecar. A competitive analysis and feedback from customers revealed three concerns; cluttered complicated UX, inefficient unguided layout, and a drab outdated user interface.

The SugarCRM User Experience team (led by Brian Ng) launched a rigorous heuristic evaluation of the web and mobile Sugar products. Issues were identified as we evaluated key use cases and new solutions were documented. This thorough understanding of the product, customers, and the industry has helped us identify which issues to address first.

Dark gray text on light gray background led to poor legibility. Heavy blacks and gray linen added to the dated look and feel.

Sugar Mobile had a dark and drab visual design. Buttons for key actions were positioned differently on key screens.

How to create beautiful PDFs with CSS within Sugar

Here is a guest post from Sugar Developer Francesca Shiekh who works for our customer Wolfram Research. She also happens to be one of the most active developers in the Sugar Developer Community! In this post, Francesca and Wolfram Research Systems Administrator Trey Mitchell share how you can customize Sugar to use an alternative PDF generator for the creation of PDF documents in Sugar.

Creating better PDFs with CSS

We wanted a custom Contracts module that allowed specific styling to be applied to all Contract PDFs.  We determined that we could use CSS to apply a consistent style to any and all PDF documents associated with this new custom Contracts module. But we could not achieve this with SugarPDF due to the complexity of our CSS. Also overriding sugarpdf.pfdmanager.php was not an option as it is an extension of TCPDF and TCPDF has limited CSS support.

It was therefore necessary for use to look at alternatives that could better handle CSS.  We found a promising open source tool called wkhtmltopdf that uses WebKit.  WebKit should be familiar because it is the same layout engine used in Safari and Google Chrome, and is therefore very accurate in rendering CSS.

We still wanted to leverage the PDF Manager module to create and maintain our PDFs. We planned to develop our Contract templates in HTML with our own custom CSS and then copy them into the HTML editor that was already available in PDF Manager.

Read more below to find out how we made it work.

Using Script and CSS loading plug-ins for easy Sugar integrations

Getting 3rd party JavaScript into Sugar

The most common UI integration point between Sugar and external applications is the trusty Sugar Dashlet. This is why we spend so much time talking about Dashlets here on the blog and at our Sugar Developer events throughout the year. However, if you are building something more complicated than an iframe dashlet integration then there is often a requirement to pull 3rd party JavaScript into the page. For example, many integrations are facilitated using JavaScript API client libraries.  Or there is code that a developer is trying to reuse that relies on JavaScript libraries that Sidecar does not already use.

Out of the box, this developer has a couple different options:

Use JSGroupings Extension

Using JSGroupings extension allows you to include additional JavaScript files with the core Sugar application JS that is pulled into the page when the Sugar application is loaded. The drawback is that this JavaScript will get pulled into the page whether or not it is ever used by a user.

Adding script tags to page dynamically

You could add script tags to your Handlebars template or via a Sidecar controller. But this approach adds a bunch of ugly complexity to your code as you have to manage many routine tasks related to loading scripts.

Providing another way!

But Sugar gives us the tools we need to design another way! Below we will explore using the Sidecar plug-in framework to provide an easy way to dynamically load JavaScript and CSS for use with your custom Sidecar components.

Adding a new popup view in Sugar 7.x Record View

Here is a guest post from Shijin Krishna from BHEA, an Elite SugarCRM Partner, and active member of the Sugar Developer community.

Are you interested in posting on the Sugar Developer Blog? Contact developers@sugarcrm.com with your idea.

In this post we are going to see how we can add a quick create pop-up view for related modules in record view. This idea is taken from Sugar Portal which comes with Sugar Enterprise, Ultimate and Corporate editions. Sugar Portal’s detail view for Bugs and Cases modules includes an action to add a note to the bug or case. In this post, we are going to see how we can create a similar quick create pop up on the base Sugar 7 web client which will be shown at the click of a button.

Creating a Dashlet for Sugar 7 List Views

In our previous “Hello World” dashlet post, we established what a minimal dashlet entailed.  In these next post, we’ll be building on those skills to create a more useful dashlet that takes advantage of Sugar 7 List Views.  We will be creating a dashlet for Cases that binds to the list’s Collection and sums the number of Cases by their status.  So if the Cases list contains 5 records, and 3 of those are in “New” state and 2 are in “Closed” state then we want our dashlet to display “New: 3” and “Closed: 2”.  To the code!

File Structure

Again, using what we learned in the previous post, we’re going to create a folder in custom/clients/base/views/ called “case-count-by-status“. Inside that folder you should create 3 files:

• case-count-by-status.php
• case-count-by-status.js
• case-count-by-status.hbs

You should have something that looks like the following screenshot:

While technically optional, we will also utilize the Language extension in order to provide multilingual support for our example dashlet.  This extension file will be located at custom/Extension/application/Ext/Language/en_us.case-count-by-status.php.

Font Awesome 3.2.1 compatibility package for Sugar 7.6

In last week’s post on the Font Awesome 4.x upgrade in Sugar 7.6 we mentioned that Sugar Engineering has been putting together a compatibility package.  This package can be installed into Sugar 7.6 instances to add Font Awesome 3.2.1 back.

That package is now ready.  It can be installed into Sugar 7.6 Beta or Sugar 7.6 GA once that is available.

Upgrade to Font Awesome 4.2 in Sugar 7.6

Engineering wanted to let you know about a CSS change coming in Sugar 7.6 which is planned for release before end of June.  There has been an upgrade to the library we use for our icons called Font Awesome.  We will be upgrading from Font Awesome version 3.2.1 to 4.2.  So what does that mean for you?  Two things.

Font Awesome 3.x vs 4.x Performance

First thing is improved performance. Using Font Awesome 4.x is faster than using Font Awesome 3.x. But why?

An example of Font Awesome 3.x Bug icon markup

 <i class="icon-bug"></i>

The issue with Font Awesome 3.x is not so much the markup but the CSS selectors that were used to translate all the <i> elements in the page into nifty little icons.  Font Awesome 3.x CSS makes use of many regex style selectors like this example below.

[class^="icon-"],
[class*=" icon-"] {
 font-family: FontAwesome;
 ...
}

This means that regular expressions have to be run multiple times over every element on the page in order to translate all the icons properly.  For web applications with many HTML elements, like Sugar 7, this can result in a fairly significant performance impact.