Создание дашлетов в SugarCRM 7

Дашлеты в SugarCRM 7 сейчас классифицируются как "view", это нужно учитывать при переходе с 6 версии.

1. Объявляем метаданные

Вам больше не надо создавать файлы метаданных в custom/modules/accounts/dashlets. Вместо этого, вам нужно создать новую папку в custom/clients/base/views назвав её "dashlet-count-contacts" (это название может быть любым). После того как вы создали новую папку, вам необходимо создать файл, назвав его "dashlet-count-contacts.php" (То есть файл должен называться также как и папка, только у файла должно быть расширение .php). Этот файл будет содержать матаданные необходимые для нашего дашлета.

Содержимое файла dashlet-count-contacts.php

<?php

$viewdefs['base']['view']['dashlet-count-contacts'] = array(
        'dashlets' => array(
                array(
                        'label' => 'LBL_DASHLET_COUNT_CONTACTS_NAME',
                        'description' => 'Count number of contacts in different states',
                        'config' => array(),
                        'preview' => array(),
                        'filter' => array(
                                'module' => array(
                                        'Accounts',
                                ),
                                'view' => 'record',
                        ),
                ),
        ),
);

?>

В этом файле мы указываем что дашлет будет доступен только на модуле Accounts, на вьюхе(view) record. 

2. Свой javascript контроллер

Следущий шаг это создание javacript контроллера, который будет управлять отображение нашего дашлета.
Ключевым моментом в определении контроллера является определение свойства "plugins", которое должно содержать значение ['Dashlet'], так же контроллер дожен содержать две основные функции:

loadData: function (options)
Эта функция вызывается когда дашлету необходимо загрузить данные для отображения


_renderHtml: function ()
Данная функция отвечает за отображение данных на дашлете.

Cодержимое файла dashlet-count-contacts-js

({
        plugins: ['Dashlet'],
        chartCollection: {},
        metricsCollection: {},
        chart: {},
        total: 0,

        loadData: function (options) {
                if(_.isUndefined(this.model)) {
                        return;
                }

                var self = this;
                var AcctID = this.model.get('id');
                app.api.call('GET', app.api.buildURL('Accounts/' + AcctID + '/count_contacts'), null, {
                        success: function(data) {
                                if(self.disposed) {
                                        return;
                                }
                                _.extend(self, {totalContacts: data});
                                self.evaluateResult(data);
                                self.render();
                        },
                        error: function(error) {
                                app.alert.show("server-error", {
                                        level: 'error',
                                        messages: 'ERR_GENERIC_SERVER_ERROR',
                                        autoClose: false
                                });
                                app.error.handleHttpError(error);
                        },
                        complete: options ? options.complete : null
                });
        },
        
        evaluateResult: function(totalContacts) {
            // set the data for the chart here based on the totalContacts result
            // set the metricsCollection and chartCollection
        },
        
        _renderHtml: function() {
            app.view.View.prototype._renderHtml.call(this);
            
            if(this.viewName == "config" || _.isEmpty(this.chartCollection)) {
              return;
            }
            
            // create the chart here using nv.models.pieChart()
            // invoke app events on app:toggle:sidebar to update chart
            // invoke app events on preview::close to update chart
        }
}) 

3. Создание своего шаблона

After defining the view metadata file and the javascript controller, a custom handlebars template called “dashlet-count-contacts.hbs’ needs to be created which contains the HTML snippet of how the Intelligence Pane should be rendered.  In this particular example, we only need the div component as the wrapper for the chart to be rendered.

Содержимое файла dashlet-count-contacts.hbs

{{#if total}}
<div class="dashlet-count-contacts-wrapper">
    <div class="nv-chart nv-chart-donut">
        <svg id="{{cid}}"></svg>
    </div>
</div>
{{/if}}
{{#eq total 0}}
    <div class="block-footer">There are no contacts in this Account.</div>
{{/eq}}