Monday, October 29, 2007

Record Paging In SalesForce.com

I had to create a custom page in SalesForce using their APEX API to pull a custom object records and display only 5 at a time. I also had to provide a Previous/ next links for users to be able to scroll to the next set of records.

I create a custom s-control with the following code to achieve this:



<html>
<head>
<title>MagnetMail</title>
<link href="/dCSS/Theme2/default/common.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" >
<link href="/dCSS/Theme2/default/custom.css" type="text/css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" >

<script src="/soap/ajax/9.0/connection.js" type="text/javascript"></script>

<script type="text/javascript">

function init(lastNameToUse, nextPrev)
{

var limitTo = 5;


if(nextPrev=="next")
{
query = "Select Name, Id, LastModifiedDate, Email, FirstName, LastName, Fax from contact Where name > '" lastNameToUse.replace("'", "\\'") "' order by name limit " limitTo;
}
else
{
query = "Select Name, Id, LastModifiedDate, Email, FirstName, LastName, Fax from contact Where name < '" lastNameToUse.replace("'", "\\'") "' order by name desc limit " limitTo;
}

var result = sforce.connection.queryAll(query);
var records = result.getArray("records");




if(nextPrev=="prev")
{
records.reverse();
}

var tbodyElem = document.getElementById("myTbody");
var nbrOfRows = tbodyElem.rows.length;

for(var i = 0; i < nbrOfRows; i )
{
tbodyElem.deleteRow(0);
}


var trElem, tdElem, txtNode;
for (var j = 0; j < records.length; j ) {
var record = records[j];

if(lastNameToUse=='' && j==0)
{
document.form1.firstRecord.value = record.Name;
}



trElem = tbodyElem.insertRow(tbodyElem.rows.length);
trElem.className = "tr" (j%2);

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col0";
tdElem.innerHTML = "<a target='_parent' href='/" record.Id "'>" record.Name "</a>";
// txtNode = document.createTextNode("<a href='/" record.Id "'>" record.Name "</a>");
// tdElem.appendChild(txtNode);

// txtNode = document.createTextNode(record.CreateDate__c.substring(0,10));
// tdElem.appendChild(txtNode);

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col1";
tdElem.innerHTML = record.LastModifiedDate.substring(0,10);

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col2";
tdElem.innerHTML = record.Email;
tdElem.align = "center";

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col3";
tdElem.innerHTML = record.FirstName;
tdElem.align = "center";

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col4";
tdElem.innerHTML = record.LastName;
tdElem.align = "center";

tdElem = trElem.insertCell(trElem.cells.length);
tdElem.className = "col5";
tdElem.innerHTML = record.Fax;
tdElem.align = "center";

if(j==limitTo-1)
{
document.form1.nextName.value = record.Name;
}

if(j==0)
{
if(record.Name != document.form1.firstRecord.value)
{ document.form1.prevName.value = record.Name;}
else
{document.form1.prevName.value = '';}
}



}

if(records.length < 5)
{
document.getElementById("nextLink").style.display = 'none';
}
else
{
document.getElementById("nextLink").style.display = 'inline';
}

if(lastNameToUse == '' || document.form1.prevName.value == '')
{
document.getElementById("prevLink").style.display = 'none';
}
else
{
document.getElementById("prevLink").style.display = 'inline';
}


/*
for (var i=0; i<records.length; i ) {
var record = records[i];
alert(record.Name);

document.print(record.Name ");

//log(record.Name " -- " record.Id);
}

*/
}

</script>




<!--cq new styles-->
<style type="text/css">
.btn, .button, .formulaButton, .btnWhatsNew {
font-family: 'Verdana', 'Geneva', sans-serif;
font-size: 10px;
width:270px;
}

table, tr, td {font-size:12px;}
</style>
<!--end cq new styles-->
</head>
<body class="Account" bgcolor="#F3F3EC" width="80%" onload="init('','next');" >
<form name="form1">

<DIV class=bPageTitle>
<DIV class="ptBody secondaryPalette">
<DIV class=content>
<img src="/s.gif" alt="MagnetMail" class="pageTitleIcon" title="MagnetMail"/>
<H1 class=pageType>Magnet Mail<SPAN class=titleSeparatingColon>:</SPAN></H1>
<H2 class=pageDescription>Home</H2>
</DIV></DIV></DIV>


<p><p><strong>MagnetMail Messages</strong>

<div class="hotListElement">
<div class="bPageBlock secondaryPalette">
<div class="pbBody">
<table id="myTable" class="list" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td><strong>Message Name</strong></td>
<!--- <th>Create Date</th> --->
<td><strong>Last Sent Date</strong></td>
<td align="center"><strong>Email</strong></td>
<td align="center"><strong>FNAme</strong></td>
<td align="center"><strong>LName</strong></td>
<td align="center"><strong>Fax</strong></td>
</tr>
</thead>

<tbody id="myTbody">
</tbody>
<tr>
<td colspan="6"><a id="prevLink" href="javascript:init(document.form1.prevName.value,'prev');">Previous</a> <a id="nextLink" href="javascript:init(document.form1.nextName.value,'next');">Next</a></td>
</tr>
</table>
</div>
<div class="pbFooter secondaryPalette">
<div class="bg"></div>
</div>
</div>
</div>
<div class="listElementBottomNav"></div>
<!-- End ListElement -->
</div>

<input type="Hidden" name="prevName" id="prevName" value="">
<input type="Hidden" name="nextName" id="nextName" value="">
<input type="Hidden" name="firstRecord" id="firstRecord" value="">

</form>

</body>

</html>

Hope this helps someone.

No comments: