Add a "Jump-to-page" control to SugarCRM

bsoremsugar —  December 6, 2009 — 7 Comments

Recently I’ve seen more than a few queries about how to add a “Jump-to-page” control to SugarCRM.  Something like what is shown below

"Jump-to-page" Control

"Jump-to-page" Control

This control needs to be dynamic and it should also always know what page that is currently being shown.  I chose a dropdown control for this but you could write some other control like a YUI slider or just a string of numbers like 1 2 3 4 5 6 7.  It would only require a small change to a few lines of my code to use a different control.  I am going to stick to the dropdown for this tutorial however.

For many new programmers, the hardest thing to figure out in a new project is where to put your code.  Some changes can be made in an upgrade safe way, in the custom directory, and some cannot.  To find out which this will be I will first have to find the files that will need to be altered.  First I choose where my new dropdown control will be located.  I chose right beside the pagination controls (the “VCR” buttons).  So I need to find the file where that control is drawn.  The first thing I did was look at the HTML that is in that section.  I pulled up a “View Source” (actually I used a FireFox add-on called “Web Developer” to inspect that section but a view source will do just fine.  When I found the pagination control in the HTML it started like this.

<td class="paginationChangeButtons" nowrap="nowrap" width="1%" align="right">

So from that I use my source code editor (I use Zend Studio 5.5.1 myself) to search all the files in SugarCRM for the phase “paginationChangeButtons”, that search returned one file,  /include/ListView/ListViewPagination.tpl.  Files that end in TPL are smarty templates.  Smarty is the utility that SugarCRM uses to render the HTML on the different screens.  So this template file is the template file that draws the pagination section of a listview page.  Sounds perfect. So that fileis where I am going to put my code.  Now I am not going to go into how smarty works in this blog but basically there is a template and a PHP script that fills that template.  In this template I am going to put a “Smarty Variable”, I will call it $loopNavButtons.  I want to place this variable right before the start button of the pagination control as shown in the image above.  So I find the bit in the code that draws that button and place my variable

<td  nowrap='nowrap' width='1%' align="right" class='paginationChangeButtons'>
 {$loopNavButtons}
{if $pageData.urls.startPage}
 <button type='button' name='listViewStartButton' title='{$navStrings.start}' class='button' {if $prerow}onclick='...
 <img src='{sugar_getimagepath file='start.gif'}' alt='{$navStrings.start}' align='absmiddle' border='0' width='13' height='11'>
 </button>
 {else}
 <button type='button' name='listViewStartButton' title='{$navStrings.start}' class='button' disabled>
 <img src='{sugar_getimagepath file='start_off.gif'}' alt='{$navStrings.start}' align='absmiddle' border='0' width='13' height='11'>
 </button>
 {/if}

After that I need to add the code that will fill in that variable.  That code goes in the file /include/ListView/ListViewSmarty.php.  This is where I find that this modification cannot be made upgrade safe.  The TPL files are loaded from a static path so there is no way to get around having to edit the core files.  Some modifications are just that way.  Anyway moving on….

In ListViewSmarty.php I know I am going to have to calculate the number of pages that the drop down will show.  I have to take the number of records, divide that by the number shown on each screen.  Then I will need to draw my drop down and fill that with the correct number of options.  I will also need to figure out what page I am on already and make that the default selection of the dropdown.  All that code looks like this, I start after all the code needed to do my math around line #106.  The first 10 lines already exist in the file, I show them only for reference.

$this->ss->assign('bgHilite', $hilite_bg);
$this->ss->assign('colCount', count($this->displayColumns) + 1);
$this->ss->assign('htmlVar', strtoupper($htmlVar));
$this->ss->assign('moduleString', $this->moduleString);
$this->ss->assign('editLinkString', $app_strings['LBL_EDIT_BUTTON']);
$this->ss->assign('viewLinkString', $app_strings['LBL_VIEW_BUTTON']);
$this->ss->assign('allLinkString',$app_strings['LBL_LINK_ALL']);
$this->ss->assign('noneLinkString',$app_strings['LBL_LINK_NONE']);
$this->ss->assign('recordsLinkString',$app_strings['LBL_LINK_RECORDS']);
$this->ss->assign('selectLinkString',$app_strings['LBL_LINK_SELECT']);
//kbrill - pagination steps
// Step 1: Do the math
 $tStep=$this->data['pageData']['offsets']['next'] - $this->data['pageData']['offsets']['current'];
 $tPages=$this->data['pageData']['offsets']['end'] / $tStep;
// Step 2: Draw the control with the needed javascript
 $control="<select name=pSteps onChange='return sListView.save_checks(this.options[this.selectedIndex].value , "{$this->moduleString}")'>";
 for ($loopNumber=0;$loopNumber<=$tPages;$loopNumber++) {
 $currentPageNumber=$loopNumber*$tStep;
 $loopPageNumber=$loopNumber+1;
 if($this->data['pageData']['offsets']['current']==$currentPageNumber) {
 $selected="SELECTED /";
 } else {
 $selected = "/";
 }
 $control .= "<option value='{$currentPageNumber}' {$selected}>Page {$loopPageNumber}</option>";
 }
 $control .= "</select>";

//Step 3: Render the control
 if($tPages>0) {
 $this->ss->assign('loopNavButtons', $control);
 } else {
 //If there is only one page then dont draw the control
 $this->ss->assign('loopNavButtons', "");
 }

So with that code in place, we run a quick repair to replace the cached smarty template and we are done.

7 responses to Add a "Jump-to-page" control to SugarCRM

  1. 

    hi i copy the code to 5.2.0l,but there is a error PHP Parse error: syntax error, unexpected '{' in /var/www/html/SugarCRM3/include/ListView/ListViewSmarty.php on line 120and the 120 line was $control=”

    • 

      Hi, first of all, thanks a lot Ken for sharing this. I am using 5.2.0j.
      Here is what worked for me.
      $control=”moduleString.””)’>”;

  2. 

    $control=”<select name=pSteps onChange='return sListView.save_checks(this.options[this.selectedIndex].value , “{$this->moduleString}”)'>”;

  3. 

    Check you code again, I just went over it and as the code is shown here it doesnt get that error., send me your ListViewSmarty.php if you cant find the issue. My email address is kbrill@sugarcrm.com

  4. 

    I am running 5.5.2 and get an http 500 errror page. Is this 5.5.2 compatiable?

  5. 

    i had to change the $control variable string to work in my environment to: $control=”moduleString”)’>”;

    It now works great! Thanks :-)

  6. 

    Hey, I like this idea, I was wondering if you can suggest how to modify it for Sugar 6.1. As is when I click on a module link I get a blank page.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s