AnsweredAssumed Answered

SugarCRM 7 Custom Dashlet with Configuration

Question asked by mirazalmamun mirazalmamun on Aug 2, 2015
Latest reply on Nov 4, 2015 by Bal Hana Kim do Amaral Oliveira
Recently I was having trouble with setting up a custom dashlet with configuration screen integrated. After scouring the web, I came up with the solution and I really would like to share that as it might be pretty useful to somebody and save time.

I was trying to create a custom dashlet with data fetched via custom API call. So, do get it done we basically need couple of files. Here they are:

Under the "custom/clients/base/views/custom_dashlet" folder (note, you need to create the folder "custom_dashlet" as well) create the files for dashlet:
  1. custom_dashlet.hbs
  2. custom_dashlet.php
  3. custom_dashlet.js
  4. dashlet-config.hbs
If you would like to fetch the data for the dashlet from some custom API you need to create the API class in the desired destination. something like, to get a list of Notes that satisfy my criteria, I created "custom/modules/Notes/client/base/api/MyCustomNotesApi.php". The details of creating API you can find somewhere in the site.

Anyway, the custom_dashlet.php should contain metadata like:
$viewdefs['base']['view']['custom_dashlet'] = array(
    'dashlets' => array(          array(              'label' => 'LBL_DASHLET_CUSTOM',              'description' => 'DESC_DASHLET_CUSTOM',              'config' => array(                  'auto_refresh' => 0,              ),              'preview' => array(                   'auto_refresh' => 0              )
        ),      ),      'config' => array(          'fields' => array(              array(                  'name' => 'auto_refresh',                  'label' => 'LBL_REPORT_AUTO_REFRESH',                  'type' => 'enum',                  'options' => 'sugar7_dashlet_auto_refresh_options',              ),          ),      ),  );

The core part of it is the "config" element in the array. Also in the "custom_dashlet.js" file put the contents:
({          plugins: ['Dashlet'],          /**          * {Integer} auto_refresh The default value for auto_refresh interval          *          * @protected          */          _defaultOptions: {              auto_refresh: 0          },          initDashlet: function(view) {              var self = this;              this.viewName = view;              var settings = _.extend({}, this._defaultOptions, this.settings.attributes);              this.settings.set(settings);              if (settings.auto_refresh) {                  if (this.timerId) {                      clearInterval(this.timerId);                  }                  this.timerId = setInterval(_.bind(function() {                      if (self.context) {                          self.context.resetLoadFlag();                          self.loadData();                      }                  }, this), settings.auto_refresh * 1000 * 60);              }          },          loadData: function (options) {              var self = this;              app.api.call('GET', app.api.buildURL('custom_api'), null, {                      success: function(data) {                          if(self.disposed) {                              return;                          }                          _.extend(self, {data: data});                          self.render();                      },                      error: function(error) {                          app.alert.show("server-error", {                              level: 'error',                              messages: 'ERR_GENERIC_SERVER_ERROR',                              autoClose: false                          });                          app.error.handleHttpError(error);                          _.extend(self, {data: {}});                          self.render();                      },                      complete: options ? options.complete : null              });              self.render();          },          _renderHtml: function() {              var self = this;              app.view.View.prototype._renderHtml.call(this);               if(this.viewName == "config" || _.isEmpty(this.data)) {                return;              }              //render the template              this.$el.html(self.template({'data' : self.data}));          }  })

Here you can see, in "initDashlet", we are setting the "settings" value and always it is a good idea to maintain a "default Options" and then override it with the "settings" passed from config.

The rest of the files for dashlet are pretty generic and I am not including them for brevity. If anyone needs it, put in the comments, I can help with that.

Outcomes