Adding custom javascript to a SugarCRM view is essential when creating new functionality such as dependent dropdowns, calculated fields, and other dynamic customizations. This tutorial will take you through the essential steps to add javascript to a view. Section 1 - I​ncluding a Javascript File in a View The simplest way to include javascript in a view is to use the 'includes' array that resides within the view's metadata definition. This method can be used only for including javascript files, not raw code. 1.1 - Creating a custom view Copy the file modules/<moduleName>/metadata/<viewname>viewdefs.php to custom/modules/<moduleName>/metadata/<viewname>viewdefs.php For instance, if you are going to be adding javascript to the detail view of the Contacts module, you would copy modules/Contacts/metadata/detailviewdefs.php to custom/modules/Contacts/metadata/detailviewdefs.php 1.2 - Copy the javascript file If your javascript file is specific to a module, copy the file into custom/modules/<moduleName>/js/ If your javascript file will be used in more than one module (i.e. a javascript library such as jQuery or protoype), you may want to place it in custom/js/. If either directory doesn't exist, simply create it. 1.3 - Including the javascript file In the <viewname>viewdefs.php file, there is a metadata array that will be structured similar to this:
<?php

    $viewdefs ['<ModuleName>'] = 
    array (
        '<viewName>View' => 
        array (
            'templateMeta' => 
            array (
            ...
            ...
            ...
            ), 
        ), 
    );

?>
Your javascript includes will go within the includes array, which is an index of the templateMeta array. The includes array may already exist, depending on which module you copied the base file from. If it does not exist, simply add it, and then add your includes as array items. Your code will look similar to the following:
    'templateMeta' => 
    array (
        ...,
        'includes' => array (
            0 =>array ('file' => 'custom/js/jQuery.js',),
            1 =>array ('file' => 'custom/modules/Contacts/js/contactpicture.js',),
        ),
        ...
    ),
Take caution in placing parenthesis, commas, and quotes, there are several dimensions of arrays and one misplaced character can cause the entire file not to work. Section ​2 - Outputting javascript directly to the view A more advanced method of adding javascript to a view is by overriding the view class and adding javascript before calling the view::display() method of the view class. This method can be used to include javascript files just as the above method, but it can also be used to output javascript code directly to the view. This method should be used if there is a need to mix custom PHP code with javascript includes or code. 2.1 - Creating the view override Create custom/modules/<modulename>/views/view.<viewname>.php and add the following code:  
<?php

    require_once('include/MVC/View/views/view.<viewname>.php');

    class <Module>View<Viewname> extends View<Viewname> {
        function <Module>View<Viewname>() {
            parent::View<Viewname>();
        }

        function display() {
            parent::display();
        }

    }
?>
  • replace <viewname> with the name/type of the view in all lowercase
  • replace <Module> with the (case-sensitive) name of the module
  • replace <Viewname> with the name/type of the view, starting it with an uppercase letter
Staying with the example of the detail view of the Contact module, we would create the file custom/modules/Contacts/views/view.detail.php and the code would look like this:
<?php
    require_once('include/MVC/View/views/view.detail.php');

    class ContactsViewDetail extends ViewDetail{
        function ContactsViewDetail(){
            parent::ViewDetail();
        }

        function display(){
            parent::display();
        }
    }
?>
2.2 - Adding javascript All of your custom javascript, whether it be an include file, or raw script, should be output directly to the view using the PHP echo command. This output will go into the display() function, before parent::display(). If you are including a javascript file, copy the file as instructed in step 1.2 above. Your code will look something similar to the following:
    function display(){
        echo '<script type="text/javascript" src="custom/js/prototype.js"></script>'; //js file
        echo '<script type="text/javascript">var foo = "bar";</script>'; //direct output
        parent::display();
    }
Whether using an include or raw script, be sure the wrap the code within HTML <script></script> tags. Section 3 - Update the ​view Either of the above methods requires a repair/rebuild to update the view. 3.1 - Go to Admin -> Repair -> choose Quick Repair and Rebuild 3.2 - Choose Repair which will repair all modules. Section 4 - Other Approach of adding Javascript file. Another advanced method of adding javascript to a view is by overriding the view class and adding javascript after calling the view::display() method of the view class. This method can be used to include javascript files just as the above shown methods, also it will load the script once the entire page is loaded, Which helps us to manipulate or operate on the DOM elements of the page. Staying with the example of the detail view of the Contact module, we would create the file custom/modules/Contacts/views/view.detail.php and the code would look like this:
<?php
    require_once('include/MVC/View/views/view.detail.php');

    class ContactsViewDetail extends ViewDetail{
        function ContactsViewDetail(){
            parent::ViewDetail();
        }

        function display(){
            
            $javascript= <<<EOQ
                <script language='javascript'>
                    YAHOO.util.Event.onDOMReady(function(){
                        // Code in this block will be executed once the entire page is loaded.
                        var objTransaction = YAHOO.util.Get.script("custom/js/prototype.js", {
                                onSuccess: function() {
                                        // Code here will be executed once the javascript is loaded
                                }
                        });
                    });
                </script>
EOQ;
            parent::display();
            echo $javascript; //Printing the javascript
        }
    }
?>
The above approach can be used for adding javascripts to EditView, ListView in the same way mentioned above.

Download the free eBook Why IT Loves Sugar!

IT-Main-Cover-copy-968x1024

Why I.T. Loves Sugar presents real world examples and use cases that display the many ways SugarCRM can help IT departments provide solutions for businesses.