Candidate Information.html
Force.com Cookbook Sample Code
Chapter 8: Customizing Force.com Pages and Fields - Displaying Fields from a Related Record on a Detail Page
To download all the code samples, access the Cookbook. - 
This s-control can be used to display fields from a related object on another object's detail page. Note that this example is based on the Recruiting App metadata.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Candidate</title>
<!-- Include the Salesforce style sheets -->
<link href="/sCSS/Theme2/en/common.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />
<link href="/sCSS/10.0/Theme2/allCustom.css" media="handheld,print,projection,screen,tty,tv" rel="stylesheet" type="text/css" />
<!-- Get the AJAX Toolkit -->
<script src="/soap/ajax/10.0/connection.js"></script>
<script>
// Use a global variable to capture the Id of the Candidate record
// whose data should be retrieved. Use a merge field to access this
// information.
var candidateId= "{!Job_Application__c.CandidateId__c}";
// Set up a method to write errors to the body of the s-control
// asynchronously.
function failure(error) {
document.body.innerHTML += "Error retrieving candidate info";
document.body.innerHTML += "<br>API Error: " + error;
}
// This function is called when the page loads
function initPage() {
try{
// Use the retrieve call and the candidateId variable to
// asynchronously retrieve the desired fields.
// Note that while the retrieve call used to be more efficient
// than the query call, the two calls are now comparable.
var result= sforce.connection.retrieve("Name, First_Name__c,Last_Name__c,Phone__c,Mobile__c,Email__c", "Candidate__c", [candidateId], {onSuccess: render, onFailure: failure});
} catch (e) {
document.body.innerHTML += "Error retrieving candidate info";
document.body.innerHTML += "<br>Fault code: " + e.faultcode;
document.body.innerHTML += "<br>Fault string: " + e.faultstring;
}
}
// This function is called asynchronously on success.
// It renders the results on the page.
function render(result) {
try {
// We'll only get a single result, so get the record
// from the first element of the result array
var record = result[0];
// Now generate HTML output for the body of this page
// Leverage standard Salesforce detail page styles
var output = "<div class='bPageBlock secondaryPalette' id='ep'>";
output += "<div class='pbHeader'>";
output += "<div class='pbBody'>";
output += "<div class='pbSubsection' style='display: block;'>"
// Output Candidate data into a detailList table
output += "<table class='detailList' cellpadding='0' cellspacing='0' border='0'>";
output += "<tr>";
output +="<td class='labelCol'>Candidate</td>"
output += "<td class='dataCol col02'><a target='_top' href=/" + candidateId + ">" + record.Name + "</a></td><td class='labelCol empty'> </td><td class='dataCol empty'> </td>";
output += "</tr>";
output += "<tr>";
output += "<td class='labelCol'>Name </td>";
output += "<td class='dataCol col02'>" + record.First_Name__c + " " + record.Last_Name__c + "</td>";
output += "<td class='labelCol'>Phone </td>";
output += "<td class='dataCol'>" + record.Phone__c + "</td>";
output += "</tr>";
output += "<tr><td class='labelCol last'>Email </td>";
output += "<td class='dataCol col02 last'><a href='mailto:" + record.Email__c + "'>" + record.Email__c + "</a></td>";
output += "<td class='labelCol last'>Mobile </td>";
output += "<td class='dataCol last'>" + record.Mobile__c + "</td>";
output += "</tr></table>";
output += "</div></div></div><div class='pbFootersecondaryPalette'><div class='bg'/></div></div>";
document.body.innerHTML += output;
} catch (e) {
document.body.innerHTML += "Error retrieving candidate information";
document.body.innerHTML += "<br>Fault code: " + e.faultcode;
document.body.innerHTML += "<br>Fault string: " + e.faultstring;
}
}
</script>
</head>
<!--Use the custom tab class to match the look of Job Application page -->
<body class="Custom79Tab detailPage" onload="initPage();">
<!-- Candidate data is written here -->
</body>
</html>
Sample code provided by salesforce.com. All rights reserved.