For Sugar Developers, the Dashboard and Dashlet framework provided in Sugar 7 really helps you to build slick reusable Dashlets that can be targeted for certain parts of the app or made globally available anywhere in the app.  They’re also really easy to use which is something we are gonna highlight today.

For a more detailed look at how Sugar 7 Dashlets work then you should read up on the topic in the Sugar Developer Guide.  The focus on this post is to highlight the most basic elements necessary that we can then build upon in later posts.

A quick reminder

Just some quick advice to anyone about to embark on the Dashlet development journey.  We recently featured a post on a common Sugar 7.x dashlet gotcha.  Basically, dashlet metadata gets copied into database when you add a dashlet to a dashboard.  You’ll need to delete the dashlet or the dashboard and add it all over again whenever you modify dashlet metadata.  We are working on making this seamless in future but this is something you should remain aware of when building dashlets.

Creating a Dashlet Summarized

Dashlets are simply Sugar 7 Views that have some extra features added via the ‘Dashlet’ plug-in and an additional metadata requirement. This tutorial will be brief because creating a basic dashlet is incredibly easy.  As with any Sugar 7 view, we will need three files: a JS controller, a PHP metadata file, and a Handlebars template for the presentation.

Shall we begin?

Step 1: Create a ‘hello-world’ directory

In your Sugar 7 instance, create a new directory called custom/clients/base/views/hello-world and create three files called hello-word.js, hello-world.php, and hello-world.hbs inside.  This is just like any other Sidecar view in Sugar 7.

Sugar 7 Dashlets are just like any other Sidecar view


Step 2: Implement the Dashlet Controller (JavaScript)

To make this “hello-world” view a dashlet, all we need to do is add one line to the view’s JS Controller.  This adds the ‘Dashlet’ Sugar 7 plug-in to your view.  This applies a bunch of changes in behavior to your view that gives it a Dashlet nature.  Plug-ins are essentially Sugar 7’s implementation of the Mixin JavaScript design pattern.  You can examine the Dashlet plug-in implementation under include/javascript/sugar7/plugins/Dashlet.js if you are curious but for the most part you don’t need to worry about the details.  Just know that all dashlets needs to include the ‘Dashlet’ plug-in in their controller.

At a minimum, Dashlet controllers must include the ‘Dashlet’ plug-in.


Step 3: Implement the Dashlet Metadata (PHP)

Dashlet metadata is also fairly straightforward. Make sure your metadata is wrapped in an array labeled ‘dashlets’ and it should have the following params:

  • label – A String label, preferably a language string key “LBL_HELLO_WORLD_TITLE” or something similar that you’ve included in a custom language file
  • description – A String description, again, preferably a language string key
  • config – an array of config params (if applicable) that allows users to configure the dashlet before it’s added to a dashboard
  • preview – an array of preview params (if applicable) to be passed when your dashlet is “previewed” when being added to a dashboard
  • filter – an array of filter params (if applicable) for making this dashlet only show up on a specific view or module

At a minimum, all Dashlet metadata must include a ‘dashlets’ array that defines a ‘label’ and ‘description’.


Step 4: Implement the Dashlet Template (Handlebars)

The template can be as basic as you want it to be.  There is no requirement for the content you put into the template.

There is no minimum requirement for Dashlet templates.  You are in full control of the presentation.


Step 5: Run Quick Repair and Rebuild

So that is all the programming we need to do. With those three files in place, we just need to rebuild the cache so that Sugar 7 picks up our new Dashlet and makes it available to end users.

The simplest way to do this is to run Quick Repair and Rebuild or by manually removing the contents of your cache/ directory and reloading the Sugar 7 web app which will then rebuild the file cache automatically.

Step 6:  Add your Dashlet to a Dashboard

If you login now as any user and try to add a dashlet to any dashboard, you should see your “Hello World” dashlet listed.  This dashlet is an option within all dashboards because we did not specify and dashlet filter criteria in Step 3 when we defined the metadata.


Finding “Hello World” in the Dashlet Picker

After adding it to a dashboard and saving it, you should see your dashlet appear just like the one below.

“Hello World” on a Dashboard

If you were at UnCon in April 2015 then you know that one of our hottest topics was plans for a SugarCRM Mobile SDK.  Since mobile devices and mobile use cases are such a key part of what Customer Relationship Management and Customer Experience is today and will be in the future, we are planning to enhance the SugarCRM Mobile development platform available to Sugar Developers.  You can follow the blog here for updates on that as they become available in the future.

However, there are already many different ways that developers can customize the behavior of the existing SugarCRM Mobile application today.  That will be the focus of today’s post.  In fact, you can drastically customize the behavior of the SugarCRM Mobile application without the hassle of having to distribute any custom code or apps to end-user Mobile devices.  All these techniques listed below involve only Sugar 7 server side code and metadata customizations.

Continue Reading…

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.

Continue Reading…

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-"] {
 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.

Continue Reading…

This post is targeted at beginner to intermediate Sugar Developers who want to add a subpanel to a module which returns custom results.

This post assumes some basic knowledge of Sugar 7 development, Sugar 7 administration, PHP, and SQL.  This article will hopefully be useful to those who have done some Sugar 7 development but are not necessarily experts.

The example in this post was created on an out-of-the-box installation of Sugar Professional with the generated demo data.  But this technique should work on any on-premise Sugar 7 instance.

An acknowledgement

I recently needed to add a subpanel to a module which returned rows matching some unusual criteria.  The requirement for this subpanel didn’t match the standard one-to-many or many-to-many relationship with another module that a subpanel usually reflects.  I researched ways to do this and came across an excellent blog post on the subject by Shane Dowling.  Following what he had written I was able to accomplish my task.  This post is an attempt to make this technique accessible to those who are less familiar with Sugar 7 development.

Continue Reading…

When it comes to customization, Sugar 7 is far away the best and most flexible CRM on the market. The Sugar framework empowers the developers to make heavy modifications in the user interface (UI) without touching the core of the product.

Our customers are always coming up with interesting use cases.  One customer asked me this question.

I don’t want my end users to accidentally unlink related Contact records.  Is it possible to selectively disable the Unlink button so that only some users are allowed to use it?

The Unlink action that our customer wanted disabled.

The Unlink action that our customer wanted disabled.

There are many ways to do this but here is an easy one that allow us to manage who has access to unlink a record using Teams.  But we could just as easily adapt this technique to use a Role or some other attribute of a Sugar user to do the same thing.  Sugar’s flexibility means your imagination is the limit.

Continue Reading…

There are certain parts of the Sugar 7 user interface that are always available to the user.  For example, the Sugar Cube at the top left corner of both our mobile and web applications is always visible as an anchor that allows the user to return to their home dashboard.  Another example is the Help button that is displayed in the Sugar 7 footer.  It is available in every screen and allows the user to toggle the display of the contextual help dashboard for whatever they happen to be doing.

Help button in the Sugar 7 application footer

Help button in the Sugar 7 application footer

Most examples of UI customizations in Sugar 7 involve making additions to particular modules, dashboards, or screens within the application.  However certain features benefit from being available at all times because they can be applied universally.  A good example would be a collaboration feature such as in-application chat or a share button.

In this post, we will show how easy it is to add your own custom Views to the Sugar 7 application footer layout that can serve as anchors for a custom feature or integration with Sugar.

We will add a Chat button that will display an alert when it is clicked on whatever screen is currently in use.  You will see it is as easy as adding a new Sugar 7 view to an existing layout.

Continue Reading…