Quick ListView customization

bsoremsugar —  March 23, 2009 — 13 Comments

As the next installment in the Sugar Tips and Tricks series from the Sugar engineering team, I will perform a quick and simple ListView customization which leverages the Carousel widget from the Yahoo UI (YUI) library. This customization completely changes the look and feel of the Contact ListView from a “rows and columns” view of your search results to a Yahoo UI Carousel view. The YUI library is included in SugarCRM and provides a ton of UI features beyond what we use in the core application.

Carousel Widget on Contacts Listview

I will only need to customize two files:

  1. view.list.php in the Contacts module
  2. ListViewContacts.tpl – a new smarty file which I have added to be used within the view.list.php file

Create a new file view.list.php file in custom/modules/Contacts/views. The beginning of the file including the constructor should look like:

require_once('include/MVC/View/views/view.list.php');
class ContactsViewList extends ViewList {

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

You can see that I am extending from the ViewList class as defined in ‘include/MVC/View/views/view.list.php’ so that I can take advantage of the methods which are already implemented and only override what I need. Since I only want to change how the ListView looks, I will do most of that in Smarty so I need to only override the method in ViewList which deals with rendering the template.

listViewProcess()

should do the trick.
Here is the full listing for the ContactsViewList class below:

require_once('include/MVC/View/views/view.list.php');
class ContactsViewList extends ViewList {

function ContactsViewList(){
parent::ViewList();
}
function listViewProcess(){
$this->processSearchForm();
$this->searchColumns = $this->searchColumns;
if(!$this->headers)
return;
if(empty($_REQUEST['search_form_only']) || $_REQUEST['search_form_only'] == false){
$this->lv->setup($this->seed, 'custom/modules/Contacts/tpls/ListViewContacts.tpl', $this->where, $this->params);
$savedSearchName = empty($_REQUEST['saved_search_select_name']) ? '' : (' - ' . $_REQUEST['saved_search_select_name']);
echo get_form_header($GLOBALS['mod_strings']['LBL_LIST_FORM_TITLE'] . $savedSearchName, '', false);
echo $this->lv->display();
}
}
}

Now that we have provided a way to get my own custom smarty template loaded on the Contacts ListView, I will create my Smarty file in custom/modules/Contacts/tpls/ListViewContacts.tpl. My goal here will be to remove most of the table rendering logic defined in ListViewGeneric.tpl and replace it with my own rendering logic to display the carousel.


link rel="stylesheet" type="text/css" href='{sugar_getjspath file='include/javascript/yui/build/fonts/fonts.css'}'>



{literal}


.yui-carousel-element li {
height: 158px;
text-align: left;
}

#container {
font-size: 13px;
margin: 0 auto;
}

#container a {
text-decoration: none;
}

#container .intro {
display: inline;
margin: 0px 14px 0px 4px;
width: 202px;
}

#container .item {
display: inline;
margin: 0 22px 0 12px;
overflow: hidden;
padding-right: 80px;
width: 106px;
}

#container .item .authimg {
bottom: 2px;
margin-left: 61px;
position: absolute;
z-index: 1;
}

#container .item h3 {
line-height: 85%;
margin-top: 4px;
}

#container .item h3 a {
font: 77% Arial, sans-serif;
position: relative;
text-transform: uppercase;
z-index: 2;
}

#container .item h3 a:link {
color:#35a235;
}

#container .item h4 {
margin-top:5px;
}

#container .item h4 a {
font: 100% Georgia, Times, serif;
position: relative;
z-index:2;
}

#container .item h4 a:link {
color:#00639b;
}

#container .item cite {
color: #888;
display: block;
font-size: 77%;
line-height: normal;
margin-bottom: 30px;
}

#container .item p.all {
bottom: 25px;
position: absolute;
z-index: 2;
}

#container .item p.all a {
font-weight: bold;
font-size: 85%;
}

{/literal}
<div class="yui-skin-sam">
<div id="container">
<ol id="carousel">
{foreach name=rowIteration from=$data key=id item=rowData}
<li class="item">
<a href='index.php?module={$pageData.bean.moduleDir}&amp;action=detailview&amp;record={$rowData.ID}'>
{foreach from=$displayColumns key=col item=params}
{if $params.link &amp;!$params.customCode}

{$rowData.$col}

{elseif $params.customCode}
{sugar_evalcolumn_old var=$params.customCode rowData=$rowData}
{elseif $params.currency_format}
{sugar_currency_format
var=$rowData.$col
round=$params.currency_format.round
decimals=$params.currency_format.decimals
symbol=$params.currency_format.symbol
convert=$params.currency_format.convert
currency_symbol=$params.currency_format.currency_symbol
}
{elseif $params.type == 'bool'}

{elseif $params.type == 'multienum'}
{if !empty($rowData.$col)}
{counter name="oCount" assign="oCount" start=0}
{assign var="vals" value='^,^'|explode:$rowData.$col}
{foreach from=$vals item=item}
{counter name="oCount"}
{sugar_translate label=$params.options select=$item}{if $oCount !=  count($vals)},{/if}
{/foreach}
{/if}
{else}
{$rowData.$col}
{/if}
{/foreach}
</a>
</li>
{/foreach}
</ol>
</div>
</div>
{literal}

(function () {
var carousel;

YAHOO.util.Event.onDOMReady(function (ev) {
var carousel    = new YAHOO.widget.Carousel("container", {
animation: { speed: 0.5 }
});

carousel.render(); // get ready for rendering the widget
carousel.show();   // display the widget
});
})();

{/literal}

You can see from the above I have stripped out the table HTML and now the meat of the display is done here:


<div id="container">
<ol id="carousel">
{foreach name=rowIteration from=$data key=id item=rowData}
<li class="item">

We simply loop through each of our rows and output it into the <li> tags and then once this has rendered the JavaScript:


(function () {
var carousel;

YAHOO.util.Event.onDOMReady(function (ev) {
var carousel    = new YAHOO.widget.Carousel("container", {
animation: { speed: 0.5 }
});

carousel.render(); // get ready for rendering the widget
carousel.show();   // display the widget
});
})();

will render the widget.

13 responses to Quick ListView customization

  1. 

    Thanks! This information was exactly what I was after in order to custom a list only slightly. Though, I can see potential for a cool customisation to optionally select an option to make the contacts listview appear as contact cards, like in outlook!

  2. 

    Thanks! This information was exactly what I was after in order to custom a list only slightly. Though, I can see potential for a cool customisation to optionally select an option to make the contacts listview appear as contact cards, like in outlook!

  3. 

    Hi, I have a question, I followed your instructions but when I want to seed the view in the explorer it shows me the default view, What could happend?

    Thanks

  4. 

    Hi, I have a question, I followed your instructions but when I want to seed the view in the explorer it shows me the default view, What could happend?

    Thanks

  5. 

    Hello, I am new in Sugar, I am interesting to get a proper display in my contact list. I followed the instruction, but get this error message.
    Any ideas?

    thank you.
    Christian.

    Warning: Smarty error: unable to read resource: “custom/modules/Contacts/tpls/ListViewContacts.tpl” in /home/tccwebsi/public_html/sugar/include/Smarty/Smarty.class.php on line 1095

  6. 

    Hello, I am new in Sugar, I am interesting to get a proper display in my contact list. I followed the instruction, but get this error message.
    Any ideas?

    thank you.
    Christian.

    Warning: Smarty error: unable to read resource: “custom/modules/Contacts/tpls/ListViewContacts.tpl” in /home/tccwebsi/public_html/sugar/include/Smarty/Smarty.class.php on line 1095

  7. 

    You said SugarCRM will introduce a fresh look and feel to CRM this summer. We are looking to see more updates for this. I'm impressed by the clean friendly design as well. David part of hemorrhoids treatment team.

  8. 

    are we able to easily add column and rows into it?

  9. 

    Hi,I'm new in sugar too……hope everything is easy smooth and sweet as, programming is not really my specialty but was force to for my project.

  10. 

    Hi Everybody,

    I have facing a problem about custom template.

    I have a custom module without any database or bean for example ordersearch and in this module I have an action named action_search.

    Controller Code
    class ordersearchController extends SugarController {
       
        public function  action_search(){
            $mobileNumber=$_GET[‘mobile’];
            $accountFocus = new Account();
            $accountFocus->retrieve_by_string_fields(array(‘phone_office’=>$mobileNumber));
            $this->view = ‘search';
        }
    }

    In this action, I am including a custom view named search (view file exists in ordersearch/views/view.search.php ) and I have a custom template file for this also (template file exits ordersearch/tpls/search.tpl).

    My custom view file is including properly. But I am clueless where to
    include or call this custom template file what will be code for  this or
    should I have to create some other files also like
    metadata/searchdefs.php etc (but if so then what will be their code).

    Waiting for response

    Hrishikesh Mishra

     

     

Trackbacks and Pingbacks:

  1. mainstreet web hosting - December 11, 2011

    mainstreet web hosting…

    […]SugarCRM Developer Blog » Blog Archive » Quick ListView customization[…]…

  2. SugarCRM – adding a total for the opportunity amount « Marketing and Sales Technology – The Synaxis Blog - October 30, 2012

    […] I also referred to this post http://developers.sugarcrm.com/wordpress/2009/03/23/quick-listview-customization/ […]

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