Author: Pavel Chumachenko, Software Engineer
We are always striving to make work in SugarCRM more convenient and efficient and here we share the most interesting solutions on SugarCRM customization. While filling in data concerning a Lead or a Contact, users of CRM systems frequently include the person’s accounts on different social networks or instant messengers. And while following a link in any social network is a piece of cake, making a Skype call can be much more complicated provided that you know only Skype Name.
This article examines SugarCRM customization by the creation of a special field type, enabling to make a Skype call by clicking Skype Name, stored in the same field. Automation of this kind will simplify the work of ordinary users of the system.
We would like to indicate, just in case, that for the due operation of the future mechanism you will still need to install Skype distribution. Any version will do.
Testing was conducted on the basis of Google Chrome 44.0.2403.155 browser.
Step 1: Create a New Type of Field
So, first, we need to somehow call our new field type. Let it be “px-skype”. Next, we determine the scope. If fields of the new type are to be present in several modules, declare them in the global directory.
1 | \custom\clients\base\fields |
Otherwise, declare them only for one application block.
1 | \custom\modules\<MODULE>\clients\base\fields |
where is the name of the relevant application block.
In the chosen directory, create a folder “px-skype”. The folder will be declared in 4 files:
- px-skype.js – controller
- list.hbs – template of the list view
- edit.hbs – template of the edit view
- detail.hbs – template of the detail view.
An example of the created structure is demonstrated in Pic.1
Pic.1. File structure of declaring a new field type
Step 2. Filling Logic
At this stage, we fill in each of the components. Let’s start with the controller. Here we implicitly inherit the standard class “BaseField” and as the 4 main methods of field type controller (initialize (), _render (), format (), unformat ()) we call the parent ones. We determine that this type of field is a link in the method getFieldElement ().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | ({ initialize: function(options) { this._super('initialize', [options]); }, _render: function() { this._super('_render'); }, format: function(value) { return this._super('format', [value]); }, unformat: function(value) { return this._super('unformat', [value]); }, getFieldElement: function () { return this.$('a'); } }) |
At the next step, we define the contents of the field template used when editing (edit.hbs). It is a standard declaration of the field for entering the system (input) because, in fact, the user here should only be able to enter/edit Skype Name.
1 2 3 4 5 6 | <input class="input-large" tabindex="{{def.tabindex}}" maxlength="{{def.len}}" name="{{name}}" type="text" value="{{value}}" placeholder="" /> {{#unless hideHelp}} {{#if def.help}} <p class="help-block">{{str def.help module}}</p> {{/if}} {{/unless}} |
The special feature of this field type implementation is hidden in the templates of display on the forms of a detail view and list view. They are defined in files list.hbs and detail.hbs, respectively. At the same time, we note that each of them is declared by the same code.
1 2 3 4 5 | {{#if value}} <a class="ellipsis_inline" title="{{value}}" href="skype:{{value}}?call" data-placement="bottom">{{value}}</a> {{/if}} As a result of compiling the field according to the template with non-empty values, we get the following HTML-element (in the example Skype Name = “echo”) <a class="ellipsis_inline" title="echo" href="skype:echo?call" data-placement="bottom">echo</a> |
Step 3. Finishing Touch
At the final stage, we must assign a new type – px-skype for the field that stores a value of Skype Name. For example, let’s change the type of user field Skype in an application block “Contacts” in the form of a detail view. The required file is located in the following directory:
1 | \custom\modules\Contacts\clients\base\views\record\record.php |
Among the declarations of all fields, we find field Skype and add/edit its attribute “type”.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $viewdefs['Contacts']['base']['view']['record']['panels'] = array( array( ... ), array( 'name' => 'panel_body', 'label' => 'LBL_RECORD_BODY', 'columns' => 2, 'labelsOnTop' => true, 'placeholders' => true, 'fields' => array( ... array( 'name' => 'skype', 'type' => 'px-skype' ), ... ), ), array( ... ) ); |
Following the undertaken actions, we reset the rights for the created files/directories and run Quick Repair and Rebuild. Done!
Conclusion
This article describes how to useSugarCRM customization to create a new type of field, which allows you to make Skype calls after clicking Name Skype, indicated on the form of a detail view or a list view. Our SugarCRM customization is quite straightforward and is generally based on the correct determination of a template of field values display.
By the way, we not only publish the articles on SugarCRM customization, but also provide advice on how to customize SugarCRM successfully. If you need it – let us know.