Custom Button within record view of SugarCRM 9.0

Companies of various size and scale are implement CRM systems to build and maintain relationships with various business partners. Since core  business processes may vary across organizations, CRM needs to be customized to be used effectively by customer representatives.

These customization may range from simple details validation of the record on click to passing and syncing the record data to an independent portal. All such actions require human intervention to trigger the process, after validating the criteria. Such processes can be aligned to the button within the CRM system, providing a visual interface for the trigger.  Modern day customer relationship management tools like SugarCRM come equipped to deliver to such scenarios.

In this article, we are going to create a custom button in the record view of the SugarCRM module which will redirect the user to a 3rd Party portal. Such a scenario can be particularly useful if the admin needs to restrict the action only to the person allowed to view the record details.

Scenario

Considering the discussed scenario, in which an organization AB Corp, has implemented SugarCRM and uses contacts module to maintain the details of the contact persons and also have a custom portal application in which they have implemented some additional features according to their custom care teams need. Now, the organization has a requirement to add a button in record view which opens up a link(portal link appended with record id) to the custom portal in a new tab of the browser, in relation to the record from the CRM, so as the same record need not be searched again in the custom portal.

Below are the steps to create a custom button in record

Step 1: Defining Metadata for the record view in customs

Step 2: Adding a Custom Button / Row Action

Step 3: Defining Button Label

Step 4: Extending and overriding the js controller

Step 5: Quick Repair and Rebuild

Step 1: Defining Metadata

• All the default buttons by SugarCRM are present in the metadata array of default metadata files for each module. The path for default record view file is

“<instance>/modules/<module>/clients/base/views/record/record.php”.

• To add a custom button to the record view, you will have to create a custom record view if you haven’t created before. Creating a custom record view is possible in 2 ways.
• From Studio: Make some changes in the record view using the studio and save the changes, the changes will be recorded in the custom folder in our intended file. On save, a custom metadata view is created in the below path

“<instance>/custom/modules/<module>/clients/base/views/record/record.php”.

• Create Metadata view Manually: To create metadata view manually. Just copy the file from

“<instance>/modules/<module>/clients/base/views/record/record.php” to “<instance>/custom/modules/<module>/clients/base/views/record/record.php”.

Step 2: Adding a Custom Button

Once the custom record view file is created. A custom button can be added to the button array. In our scenario, we need the button in the action droplist of the record view. Below is the button definition to be added to the main_dropdown in the above-created record view. One can choose the position of the button in the drop list by selecting the appropriate index.

array(
        'type' => 'rowaction', 
        'event' => "button:open_portal:click",
        'name' => 'open_portal',
        'label' => 'LBL_OPEN_IN_PORTAL',
        'acl_action' => 'view',
    );

Above button definition have some properties

• • type: type property defines the widget type
  • event: event name of the button
  • name: name property defines the name of the button
  • label: string key for the button to display
  • acl_view: ACL action of the button

Step 3: Defining Button Label

Once the button definition is added. Now, define the label for the button. Below is the path to define the label

“./custom/Extension/modules/Accounts/Ext/Language/en_us.openInPortal.php” and add below code to the file.

<?php

$mod_strings['LBL_OPEN_IN_PORTAL'] = 'Open In Portal';

Step 4: Extending and overriding the controller

To add functionality to the custom button we need to override the existing default controller and extend the record view controller. Organization ABC’s requirement is to open a portal URL with record id appended at the end in a new window. Below is the path for the overridden controller.

“./custom/modules/<module>/clients/base/views/record/record.js”.

Below is the code to be added in the overridden record view controller

({
    extendsFrom: 'RecordView',
	
    initialize: function (options) {
        this.plugins = _.union(this.plugins, ['LinkedModel']);
        this._super('initialize', [options]);

        //add listener for custom button
        this.context.on('button:open_portal:click', this.open_portal, this);
    }
  
     //function call to portal
    open_portal: function () {
        var id = this.model.get('id');
        var url = {portal URL} +'/'+ id;
        window.open(url);
    }
});

The above code is extended with a record view controller. Context object in the initialize function is used to facilitate interaction between different components on the page using events. In the above code when the button is clicked, an on-click event is triggered and open_portal function is called.

open_portal function will have the current record id, prepares the portal URL and opens the URL in a new browser window.

Step 5: Quick Repair and Rebuild

Once the above 4 steps are implemented, we will need to do a quick repair and rebuild to build the new extensions. Refresh the page and we will find the custom button in the record view. Below is the screenshot for the same.

In this way, a custom button can be created to meet business needs like connecting users to 3rd party applications, web portals, and URLs.

Evaluating SugarCRM for your business – We can help

Reach out to us so that we can assess and plan a road-map for your CRM implementation. Let’s build a system, which you will use for years to come.