Archives For Dashlets

This blog will be the first in a two part series on building Charts components for Sugar 7. This post is targeted at beginner to intermediate Sugar Developers who want to learn how to build their first Chart component.

This post assumes some basic knowledge of Sugar 7 development, Sugar 7 administration, JavaScript, and PHP.  This information should be useful to anyone who has an interest in Sugar 7 development.

The examples in this post were created on an out-of-the-box installation of Sugar Professional  But this technique should work on any on-premise Sugar 7 instance.


You may have noticed that a number of out of the box dashlets and views contain various fancy charts and visualizations.  This is possible because Sugar has a charting component build into it.  You can make use of this to display charts within your own custom dashlets, views or layouts.

In this post, we will focus on the “LineChart” type. There are other chart types that use different data formats and chart options but the general techniques covered here will work for all chart types.  These examples were implemented in a basic custom view but they will also work within dashlets.

Continue Reading…

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.

Continue Reading…

What are Sugar Integration Building Blocks?

This is a new effort to create an open source library of re-usable common components that can be easily adapted by developers interested in integrating applications with Sugar 7.  This project is focused on the needs of SugarCRM ISVs and Technology partners that want to build integrations and get them listed on Sugar Exchange quickly and painlessly so they can be offered to Sugar customers.

This new open source project is hosted on Github at and is accepting contributions from the Sugar Developer community.

Watch this project because more and more components and examples will be added in the coming months.

Contextual Frame Dashlet Package

One of the first building blocks is an easy to use iframe dashlet that passes contextual information about the current page to the iframe using URL parameters.  In the current package, the context that is passed is the record id (when there is one) and the module name.  The external endpoint can then use that context to create an appropriate UI to present in the iframe.

This dashlet can be easily used to create a lightweight UI integration with an external application.  It can be deployed as-is for a Proof of Concept or demonstrations or it can be easily customized for additional tailored capability.

Contextual iFrame Dashlet configuration page

Contextual iFrame Dashlet configuration page

It also happens to be a good example of a Dashlet that uses a configuration page in order to manage settings such as the base URL and the frame’s height.

Continue Reading…

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: caseCountByStatusFileStructure

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/

Continue Reading…

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?

Continue Reading…

In a recent blog post by W-Systems, an Elite SugarCRM Partner, Christian Wettre showed off a cool enhancement to the Sugar 7 Saved Report Chart dashlet.  Very conveniently, they included a package you can download so you can easily install it and look at the code to see how it works without any fuss.  I just tried it in a Sugar 7.5.1 instance and it worked like a charm!

Since some of the most effective SugarCRM dashboard elements are charts based on reports, I find my dashboards full of those charts. These charts scream out for the ability to dig down into the underlying details. In the current release of SugarCRM 7 it is a little cumbersome to actually do this. We solved this with a code enhancement module that adds a drill down link to any Saved Report Chart dashlet. With this module installed you can click on the drill down link on any report based dashlet to open the dashlets underlying report in a new browser tab.

Head over to the W-Systems blog to see an instructional video and download this package for yourself!

A quick aside.  In production, SugarCRM recommends deploying new custom dashlets instead of overriding the built-in dashlets.  Users will be able find your custom dashlet just as easily as built-in dashlets while allowing the built-in dashlets to get upgraded.

Sugar 7 Dashlets

As you may know Dashboards and Dashlets are some of Sugar 7’s most popular front-end features. Customizable Dashboards empower users with the ability to customize the contextual intelligence that gets delivered to them by their CRM within every single view of the application.  For Sugar Developers, Dashlets allow us to deliver contextual intelligence (including integrations) to our end users in a well encapsulated component and a consistent pattern.

A Dashlet Gotcha!

Since Sugar 7 Dashlets are just Sidecar views, there is metadata that you need to manage.  So one of the biggest things you’ll want to remember when working with Dashlet metadata is that Dashlet metadata gets copied into the dashboards table. If you change the .php metadata file for the dashlet, you need to make sure that you delete the old dashlet definition from the database for the module/view you are testing it on.  Otherwise no matter how many times you clear your cache, restart your computer, or throw your mouse, that dashlet won’t be doing what you’re expecting it to do!

The simple way

The simplest way to do that is to delete the dashlet using the Sugar user interface.

Removing a Dashlet

Removing a Dashlet

Once you’ve done that, you can edit your dashboard to add your dashlet over again and this time it will include the updated metadata.

The automated way

If you are doing a lot of dashlet development and are interested in a way to automate this process a bit, then you can create a dashboard cleanup SQL script that goes into the dashboards table and deletes the row for your test dashboard.

See below as an example of working with a Dashboard entry in Sugar 7.5.0 via the Sugar database.

Continue Reading…