SugarCRM : Programmatically Hiding and Displaying Panels Based on the Value of a Drop Down

Sugar Version: 5.1

Overview

In many cases it is desirable to hide or show certain fields on a form based on the value of a field.  For example, if the account is a “partner” the form should show partnerish fields.  The easiest way to do this is to create panels with information specific to each record type and then hide or show the panels based on the record type.

Step 1 – Rearrange the Edit and Detail Views

Start with the edit view first.  From Studio, open the account edit view and create 2 panels.

Name the first panel “CUSTOMER INFO” and the second panel “PARTNER INFO”.   The naming of these is very important because they will be used in the JavaScript code to hide these panels.  Drag some fields into both panels (See example below)

Repeat the process for the detail view ensuring the panel names are the same.

Creating a Custom Edit Handler

Create a file called custom/modules/Accounts/views/view.edit.php.  This file is a custom edit view handler for the accounts module.  It will use all of the default behavior, but it will add some JavaScript code to add an event handler for the onchange event of the account type.  The text in red is what you would change for your specific field and panels.

Add the following code:

if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');

require_once('include/MVC/View/views/view.edit.php');

class AccountsViewEdit extends ViewEdit {

        function AccountsViewEdit(){

                parent::ViewEdit();

        }

        function display() {

               

                                global $app_list_strings;         

                                global $mod_strings;

                               

                                $fieldName = 'account_type'; //change this to the name of your field

                                $dropDownName = 'account_type_dom'; //change this to the name of the dropdown

                               

                                $e=$this->ev->defs['panels'];

                                $panelArray = array();

                                foreach($e as $panel_label=>$panel_data) {

                                                if($panel_label != '' && $panel_label != 'default')

                                                {

                                                                $tempArray = array($panel_label,$mod_strings[strtoupper($panel_label)]);

                                                                array_push($panelArray,$tempArray);

                                                }

                                }

                                $prePop = 'document.getElementById(\''.$fieldName.'\').onchange();';

                                                               

                                print '';                       

$js=<<

        

                               

EOQ;

                parent::display();

                echo $js;

        }

}

?>

Explaining the Code

class AccountsViewEdit extends ViewEdit {

        function AccountsViewEdit(){

These two lines set the class and function that is required in edit views. Change the text in red to the name of the module that you are configuring this for.

$fieldName = 'account_type'; //change this to the name of your field

$dropDownName = 'account_type_dom'; //change this to the name of the dropdown

So that the code can be easily adapted to any module, we assign the field that we are checking and the drop down list to variables that will be used throughout the program. The values in red need to be changed so that they reflect the fields in your module.

1 $e=$this->ev->defs['panels'];

2                              $panelArray = array();

3                              foreach($e as $panel_label=>$panel_data) {

4                                              if($panel_label != '' && $panel_label != 'default')

5                                              {

6                                                              $tempArray = array($panel_label,$mod_strings[strtoupper($panel_label)]);

7                                                              array_push($panelArray,$tempArray);

8                                              }

9                              }

 In 5.1 the div names are set with the system panel label which will be something similar toLBL_PANEL1. There are also corresponding user panel labels which are what is seen in the UI ( CUSTOMER INFO ).

Line 1 assigns the editview ( ev ) panel definitions ( defs[‘panels’]  ) to the variable $e.

The foreach loop iterates through all the system panel labels and checks to make sure that they aren’t empty or named default  ( Line 4 ). Then is pushes the system panel label onto an array with its corresponding user panel label ( Line 6 ). On line 7 we push the $tempArray of corresponding values on to another array called $panelArray. This allows me to iterate through $panelarray and get sets of data instead of one value.

//Code to hide or display the panels when first editing the record

 $prePop = 'document.getElementById(\''.$fieldName.'\').onchange();';

When the form first draws (as either a new record or editing an existing record) the correct panels should be hidden or displayed.  The code above will call the onchange event for the account type so the form is initially rendered properly.

print '';

                                                               

                                                               

$js=<<

        

EOQ;

        parent::display();

        echo $js; 

        }

}

?>