Sugarcrm支持产品指南糖开发人员糖开发人员指南11.0用户界面小什莱斯

小什莱斯

概述

dashlets是特殊视图 - 组件插件,可从上下文呈现数据并使用dashlet插件。它们通常由控制器JavaScript文件(.js)和至少一个把手模板(.hbs)组成。

层次结构图

糖以下列方式加载dashlet视图组件:

hierarchyviews.

笔记: Sugar应用程序的客户类型是“基础”。有关各种客户类型的更多信息,请参阅 用户界面 page.

德希特观点

使用dashlets时是三个视图: 预习, Dashlet View., 和 配置视图。以下部分讨论了视图之间的差异。

预习

选择要添加到主页时使用预览视图。将分配元数据中的预览变量将分配给自定义模型变量。

'preview' => array(
    'key1' => 'value1',
),

可以使用以下命令检索预览元数据中的值:

this.model.get("key1");

预习

Dashlet View.

dashlet视图将呈现dashlet的内容。它还包含编辑,删除和刷新dashlet的设置。

Dashletview.

配置视图

当用户单击Dashlet Frame的下拉菜单上的“编辑”选项时,将显示配置视图。元数据中的配置变量将被分配给自定义模型变量

'config' => array(
    //key value pairs of attributes
    'key1' => 'value1',
),

可以使用以下内容检索配置元数据中的值:

this.model.get("key1");

配置视图

Dashlet示例

The RSS feed dashlet, located in ./clients/base/views/rssfeed/, handles the display of RSS feeds to the user. The sections below outline the various files that render this dashlet.

元数据

dashlet视图包含“dashlets”元数据:

参数 类型 必需的 描述
标签 细绳 是的 dashlet的名称
描述 细绳 Dashlet的描述
配置 目的 是的 配置视图中的预填充变量
笔记:元数据中的配置变量被分配给自定义模型变量。
预习 目的 是的  预览中的预填充变量
筛选 目的 过滤器显示

RSS Feed Dashlets元数据位于:

./clients/base/views/rssfeed/rssfeed.php.

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.phone2play.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['view']['rssfeed'] = array(
    'dashlets' => array(
        array(
            'label' => 'LBL_RSS_FEED_DASHLET',
            'description' => 'LBL_RSS_FEED_DASHLET_DESCRIPTION',
            'config' => array(
                'limit' => 5,
                'auto_refresh' => 0,
            ),
            'preview' => array(
                'limit' => 5,
                'auto_refresh' => 0,
                'feed_url' => 'http://blog.phone2play.com/feed/',
            ),
        ),
    ),
    'panels' => array(
        array(
            'name' => 'panel_body',
            'columns' => 2,
            'labelsOnTop' => true,
            'placeholders' => true,
            'fields' => array(
                array(
                    'name' => 'feed_url',
                    'label' => 'LBL_RSS_FEED_URL',
                    'type' => 'text',
                    'span' => 12,
                    'required' => true,
                ),
                array(
                    'name' => 'limit',
                    'label' => 'LBL_RSS_FEED_ENTRIES_COUNT',
                    'type' => 'enum',
                    'options' => 'tasks_limit_options',
                ),
                array(
                    'name' => 'auto_refresh',
                    'label' => 'LBL_DASHLET_REFRESH_LABEL',
                    'type' => 'enum',
                    'options' => 'sugar7_dashlet_reports_auto_refresh_options',
                ),
            ),
        ),
    ),
);

控制器

The rssfeed.js controller file, shown below, contains the JavaScript to render the news articles on the dashlet. The Dashlet view must include 'Dashlet' plugin and can override initDashlet to add additional custom process while it is initializing.

./clients/base/views/rssfeed/rssfeed.js.

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.phone2play.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */
/**
 * RSS Feed dashlet consumes an RSS Feed URL and displays it's content as a list
 * of entries.
 * 
 * The following items are configurable.
 *
 * - {number} limit Limit imposed to the number of records pulled.
 * - {number} refresh How often (minutes) should refresh the data collection.
 *
 * @class View.Views.Base.RssfeedView
 * @alias SUGAR.App.view.views.BaseRssfeedView
 * @extends View.View
 */
({
    plugins: ['Dashlet'],

    /**
     * Default options used when none are supplied through metadata.
     *
     * Supported options:
     * - timer: How often (minutes) should refresh the data collection.
     * - limit: Limit imposed to the number of records pulled.
     *
     * @property {Object}
     * @protected
     */
    _defaultOptions: {
        limit: 5,
        auto_refresh: 0
    },

    /**
     * @inheritdoc
     */
    initialize: function(options) {
        options.meta = options.meta || {};
        this._super('initialize', [options]);
        this.loadData(options.meta);
    },

    /**
     * Init dashlet settings
     */
    initDashlet: function() {
        // We only need to handle this if we are NOT in the configure screen
        if (!this.meta.config) {
            var options = {};
            var self = this;
            var refreshRate;

            // Get and set values for limits and refresh
            options.limit = this.settings.get('limit') || this._defaultOptions.limit;
            this.settings.set('limit', options.limit);

            options.auto_refresh = this.settings.get('auto_refresh') || this._defaultOptions.auto_refresh;
            this.settings.set('auto_refresh', options.auto_refresh);

            // There is no default for this so there's no pointing in setting from it
            options.feed_url = this.settings.get('feed_url');

            // Set the refresh rate for setInterval so it can be checked ahead
            // of time. 60000 is 1000 miliseconds times 60 seconds in a minute.
            refreshRate = options.auto_refresh * 60000;

            // Only set up the interval handler if there is a refreshRate higher
            // than 0
            if (refreshRate > 0) {
                if (this.timerId) {
                    clearInterval(this.timerId);
                }
                this.timerId = setInterval(_.bind(function() {
                    if (self.context) {
                        self.context.resetLoadFlag();
                        self.loadData(options);
                    }
                }, this), refreshRate);
            }
        }

        // Validation handling for individual fields on the config
        this.layout.before('dashletconfig:save', function() {
            // Fields on the metadata
            var fields = _.flatten(_.pluck(this.meta.panels, 'fields'));

            // Grab all non-valid fields from the model
            var notValid = _.filter(fields, function(field) {
                return field.required && !this.dashModel.get(field.name);
            }, this);

            // If there no invalid fields we are good to go
            if (notValid.length === 0) {
                return true;
            }

            // Otherwise handle notification of invalidation
            _.each(notValid, function(field) {
                 var fieldOnView = _.find(this.fields, function(comp, cid) { 
                    return comp.name === field.name;
                 });

                 fieldOnView.model.trigger('error:validation:' + field.name, {required: true});
            }, this);

            // False return tells the drawer that it shouldn't close
            return false;
        }, this);
    },

    /**
     * Handles the response of the feed consumption request and sets data from 
     * the result
     * 
     * @param {Object} data Response from the rssfeed API call
     */
    handleFeed: function (data) {
        if (this.disposed) {
            return;
        }

        // Load up the template
        _.extend(this, data);
        this.render();
    },

    /**
     * Loads an RSS feed from the RSS Feed endpoint.
     * 
     * @param {Object} options The metadata that drives this request
     */
    loadData: function(options) {
        if (options && options.feed_url) {
            var callbacks = {success: _.bind(this.handleFeed, this), error: _.bind(this.handleFeed, this)},
                limit = options.limit || this._defaultOptions.limit,
                params = {feed_url: options.feed_url, limit: limit},
                apiUrl = app.api.buildURL('rssfeed', 'read', '', params);

            app.api.call('read', apiUrl, {}, callbacks);
        }
    },

    /**
     * @inheritdoc
     *
     * New model related properties are injected into each model:
     *
     * - {Boolean} overdue True if record is prior to now.
     */
    _renderHtml: function() {
        if (this.meta.config) {
            this._super('_renderHtml');
            return;
        }

        this._super('_renderHtml');
    }
})

工作流程

触发时,以下过程将呈现视图区域:

loadhierarchy.

检索数据

使用以下命令检索相应的数据:

数据位置 元素 命令
主窗格 记录视图 this.model
记录视图 this.context.parent.get("model")
列表显示 this.context.parent.get("collection")
元数据   this.dashletConfig['metadata_key']
模块Vardefs.   app.metadata.getModule("ModuleName")
远程数据 豆角,扁豆 new app.data.createBean("Module")
new app.data.createBeanCollection("Module")
RESTAPI.  app.api.call(method, url, data, callbacks, options)
Ajax呼叫  $.ajax()
用户输入   this.settings.get("custom_key")

把手模板

The rssfeed.hbs template file defines the content of the view. This view is used for rendering the markup rendering in the dashlet content.

./clients/base/views/rssfeed/rssfeed.hbs.


{{!--
/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.phone2play.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */
--}}
{{#if feed}}
    <div class="rss-feed">
        <h4>
            {{#if feed.link}}<a href="{{feed.link}}">{{/if}}
            {{feed.title}}
            {{#if feed.link}}</a>{{/if}}
        </h4>
        <ul>
        {{#each feed.entries}}
            <li class="news-article">
                <a href="{{link}}">Dashlets</a>
                {{#if author}} - {{str "LBL_RSS_FEED_AUTHOR"}} {{author}}{{/if}}
            </li>
        {{/each}}
        </ul>
    </div>
{{else}}
    <div class="block-footer">
        {{#if errorThrown}}
        {{str "LBL_NO_DATA_AVAILABLE"}}
        {{else}}
        {{loading 'LBL_ALERT_TITLE_LOADING'}}
        {{/if}}
    </div>
{{/if}} 

最后修改:2021-02-17 02:44:13