Adding Custom Code or HTML to a Module View

sugarcrmdevelopers —  February 20, 2013

This tutorial will cover how to override a view to add custom code or HTML before or after the main view. You may want to add special instructions for a certain module view, or add a logo and link to your website for a custom module. You might also want to add some pre-processing code, such as importing new records from a 3rd-party API. In this example, we’ll simply add some custom HTML to the list view of the contacts module.

Upgrade Safe: yes
Target Audience: Developer
CRM: SugarCRM
 
 

 

Section 1: Create the Base View Override File
1.1 Create custom/modules/<modulename>/views/view.<viewname>.php

So for our example, we'll create custom/modules/Contacts/views/view.list.php. Point to note here is, if a module already has view.list.php under modules/Contacts/views then we first need to copy over the file and then add our customizations.

1.2 Add the base code for the view override class
Add this code:

&lt;?php

require_once('include/MVC/View/views/view.&lt;viewname&gt;.php');

class &lt;Module&gt;View&lt;Viewname&gt;extends View&lt;Viewname&gt; {

    function &lt;Module&gt;View&lt;Viewname&gt;(){
        parent::View();
    }

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

    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

For our example, the code would look like this:

&lt;?php

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

class ContactsViewList extends ViewList {

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

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

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

}

Section 2: Adding Preprocessing Code

2.1 The preDisplay() function:
Any preprocessing code should go within the preDisplay() function of the class. Any code that appears here will execute BEFORE the view is created. The code should always come before the parent:: preDisplay(); line.
In our example, we'll simply set up some string variables that we'll use to output in the display.

Add this code:

function preDisplay() {
        $this-&gt;contacts_warning = 'Our contacts database is not for personal use. Please do not use it for things not strictly related to company business. You know who you are!';
        $this-&gt;company_logo_path = SugarThemeRegistry::current()-&gt;getImage('company_logo','align="absmiddle" alt="Schedule Call" border="0"'); ;
        $this-&gt;company_tagline = 'Serving the biggest and brightest stars in Hollywood!';
        parent::preDisplay();
    }

As you can see we will be using the variables in class scope, we need to declare those member variables.

class ContactsViewList extends ViewList {

    var $contacts_warning;
    var $company_logo_path;
    var $company_tagline;
..
..
..

Section 3: Adding Custom HTML to the Display

3.1 The display() function:
Any code that outputs to the display should go within the display() function. If the code should appear before the main view, then place it before the parent::display() function. If it should output after the main display, then place the code after parent::display(). Keep in mind that the main view here refers to the view content which appears specifically as a part of the module, i.e. between the Sugar header and footer content. So any changes you make will appear within that area.

For our example, we'll output a stern reminder of company policy before the list, and the company logo and tagline after.
Add this code:

function display() {
        echo '&lt;div align="center" style="font-color: red"&gt;'.$contacts_warning.'&lt;/div&gt;'; 
        //display BEFORE the view should go ABOVE this line
        parent::display();
        //display AFTER the view should go BELOW this line
        echo '&lt;div align="center"&gt;'.$this-&gt;company_logo_path.'&lt;br/&gt;'.$this-&gt;company_tagline.'&lt;/a&gt;&lt;/div&gt;';
    }

Section 4: Rebuild the view

Any views file do not require rebuilding cache.

Section 5: Test

5.1 – Go to the contacts list view, and you'll see your new display changes!