Increasing the Width of a Multi-Select Field in a SugarCRM Search Form

sugarcrmdevelopers —  September 14, 2012

At Atcore Systems, we enjoy sharing ideas or being able to troubleshoot coding issues that we may be facing with other developers. This blog post will be technical in nature as we try to provide helpful hints we recently learned while trying to address a problem one of our customers had. 

During a recent engagement, our customer completed the customization of a multi-select field so that options were grouped using prefixes as seen below. Due to the width of the field in the SugarCRM search panel the values could not be read to enable the user to search on the correct value.

*The example shown above is of a select field with long entries being displayed using the default 150px

After a little searching we discovered that this would take a light customization. One way to accomplish this is to edit the template file used to create the field. But that wouldn’t be upgrade safe and would affect all the multi-select fields in search.

Global Non-Upgrade Safe Change

  • In the include/SugarFields/Multienum/SearchView.tpl  file you will find the following line:

{html_options name='{{$vardef.name}}[]' options={{sugarvar key='options' string=true}} size=”{{$displayParams.size|default:6}}” style=”width: 150px” multiple=1 selected={{sugarvar key='value' string=true}}}

  • In order to change the width globally you can simply change the width variable.

    • Note: If you decide to change this file so all select fields will be wider, you will need to add !important to the style tag.

style=”width: 250px !important”

  • There is a css definition in style.css with an !important directive that overrides the style on the select. Therefore your code must include the extra code for the change to take effect.

Non-Global Upgrade Safe Change

  • The way we implemented the change was to override the list view and use javascript to change the width of the field that needed to be wider. For this example, let’s use the Leads module. To override the list view, you will need to create the following file: custom/modules/Leads/views/view.list.php

  • In this file, add the following:

<?php
require_once('include/MVC/View/views/view.list.php');

class LeadsViewList extends ViewList{

   function LeadsViewList(){
      parent::ViewList();
   }

   function processSearchForm(){
      parent::processSearchForm();
  
      //Custom code to make the status select wider. Has to go here to pick up
      //Basic and Advanced panels.

      if( (isset($_REQUEST['search_form_view'])) and
          ($_REQUEST[ 'search_form_view' ] = 'advanced_search') )
         $field = 'status_advanced[]';
      else
         $field = 'status_basic[]';
        
      echo '
               var j = document.getElementsByName(“'
. $field . '”);
               if(j.length > 0)
                  j[0].setAttribute(“style”,”width: 250px !important”);
            '
;       
   } 
}
?>

Here, we’re overriding the processSearchForm() method. You will need to change the name of the field to match yours. In this example, the field is “status”. Depending on which Search panel your field is on, it will be appended with either _basic[] or _advanced[]. The code above will handle both. If you don’t have the field on both panels, you can reduce the code, but leaving it will not cause any problems.

*The example shown above is with the field set to 250px.

We hope you have found this post to be helpful and look forward to hearing any suggestions you might have for other problem areas that you have come across.  Please feel free contact us with the details.