Including Custom JavaScript in SugarCRM List Views

Including your custom JavaScript in Detail and Edit views can easily be done in the respective view definition metadata file. For example, including custom JavaScript in the Detail view is done by adding files to the ‘includes’ member of ‘templateMeta’ in detailviewdefs.php.

‘templateMeta’ => array(
    'includes' => array (    
        array (   
            'file' => 'custom/modules/<Module Name>/<Script name>.js',   

This method does not work for the listviewdefs.php. Scripts can be included to the List View in two ways.

  1. Through a custom list.view.php.
  2. Through an After UI Frame logic hook.

While the first option works, it is not desirable as you first have to check for a custom list.view.php then either create one if it does not exist or modify the existing code. This can lead to inadvertently overwriting a custom list.view.php.
The second option, using an After UI Frame logic hook, can be deployed without any worries of overwriting existing code. Create a new logic hook.

class ListViewScriptHook {

    public function after_ui_frame($event, $arguments) {
        if (strtolower($_REQUEST['action']) == 'index' || strtolower($_REQUEST['action']) == 'listview') {
            echo '<script src="custom/<Module Name>/<Script Name>.js"></script>';


Include your new logic hook in your manifest.php

'logic_hooks' => array(
        'module' => 'Accounts',
         'hook' => 'after_ui_frame',
        'order' => 99,
        'description' => 'Include Script Hook',
        'file' => 'custom/modules/<Module Name>/<Logic Hook File>.php’,
        'class' => 'ListViewScriptHook',
        'function' => 'after_ui_frame',

Install your package and you have an upgrade safe method of including JavaScript in the SugarCRM List View.