S-Controls and AJAX: Showing a pull-down list of related contacts
S-Controls
| Note: S-controls have been superseded by Visualforce pages. For more information, please visit S-Control_Deprecation |
This S-control is an example of how to use AJAX and JavaScript to add functionality to a standard page.
It adds a "Related Contacts" pull-down list to the Contacts page, showing other contacts with the same email domain (eg @company.com). This is useful when you wish to find related contacts that might not be attached to the same Account.
- Selecting a contact from the list will jump to that contact page.
- A "Show All" option displays a search screen for all contacts with that email domain
This sample code demonstrates how to supplement a normal page with additional information, while maintaining a familiar user interface.
Installation:
- Create a new S-Control
- Paste the code below directly into the S-control
- Save the S-Control (Type: HTML)
- Go to your Contact Page Layout
- Drag the new S-Control onto the layout
- Double-click the field, set Height to 22 and Tick "Show label"
- Save
- Make sure your Users have a Profile with ""API Enabled"" turned ON
To test: Go to a Contact that shares an e-mail address with another Contact (eg fred@gmail.com and jim@gmail.com). The pull-down menu should appear.
Want to exclude certain domains (eg msn.com)? Take a look at the related topic in the discussion forums.
<html>
<head>
<script src="/soap/ajax/12.0/connection.js" type="text/javascript"></script>
</head>
<body bgcolor=#f3f3ec>
<select id="contacts" onchange="related_contact(this)">
<script>
function related_contact(contact)
{
// If a user is selected, show them!
top.location.href = "/" + contact.options[contact.selectedIndex].value;
}
// Find Contacts with same email domain
domain = "{!Contact.Email}".split("@")[1];
related_contacts = sforce.connection.query(
"select Name, Email, Id from Contact where Email like '%@"
+ domain + "' and Id != '{!Contact.Id}' ");
// Show them
var list = document.getElementById('contacts');
if (related_contacts.size == 0)
list.style.display = 'none'
else
{
// Show them in a pull-down list
var option = document.createElement('option');
option.text = related_contacts.size + " Contact"
+ (related_contacts.size> 1 ? "s" : "") + " with similar email address:";
try { list.add(option, null) } catch (ex) { list.add(option) } // For IE
// Look through each Contact and add the to the list
records = related_contacts.getArray("records");
for (var i=0; i < records.length; i++)
{
option = document.createElement('option');
option.value = records[i].Id;
option.text = records[i].Name + " ("+ records[i].Email + ")";
try { list.add(option, null) } catch (ex) { list.add(option) } // For IE
}
// Finally, add an option to go to the Search screen and look for the email domain
option = document.createElement('option');
option.value = "search/SearchResults?sen=003&sbstr=" + domain;
option.text = "Show All";
try { list.add(option, null) } catch (ex) { list.add(option) } // For IE
}
</script>
</body>
</html>
This sample code was provided by John Rotenstein (john.sf@john.balgara.com). Reuse encouraged.