View/Field

SugarField widget. A field widget is a low level field widget. Some examples of fields are text boxes, date pickers, drop down menus.

Creating a SugarField

SugarCRM allows for customized "fields" which are visual representations of a type of data (e.g. url would be displayed as a hyperlink).

Anatomy of a SugarField

Field files reside in the sugarcrm/clients/base/fields/{field_type} folder.

Inside the {field_type} directory is a set of files that define templates for different views and field controller. A typical directory structure will look like the following:

clients
|- base
   |- bool
      |- bool.js
      |- detail.hbs
      |- edit.hbs
      |- list.hbs
   |- int
      ...
   |- text
      ...
|- portal
   |- portal specific overrides
|- mobile
   |- mobile specific overrides

[sugarFieldType].js files are optional. Sometimes a SugarField needs to do more than just display a simple input element, other times input elements need additional data such as drop down menu choices. To support advanced functionality, just add your additional controller logic to [sugarFieldType].js javascript file where sugarFieldType is the type of the SugarField. Example for bool.js controller:

const ViewManager = require('view/view-manager');
({
   events: {
        handler: function() {
            // Actions
        }
   },

   initialize: function(options) {
      ViewManager.Field.prototype.initialize(options);
      // Your constructor code here follows...
   },

   unformat: function(value) {
       value = this.el.children[0].children[1].checked ? '1' : '0';
       return value;
   },

   format: function(value) {
       value = (value == '1') ? true : false;
       return value;
   }
})

.hbs files contain your templates corresponding to the type of View/View the field is to be displayed on. Sugar uses Handlebars.js as its client side template of choice. At this time no other templating engines are supported. Sample:

<span name="{{name}}">{{value}}</span>

These files will be used by the metadata manager to generate metadata for your SugarFields and pass them onto the Sugar JavaScript client.