A requirement on a recent SharePoint 2010 intranet project that I worked on was to implement a mechanism for users to click on a Contact image on a page which would then create an e-mail addressed to a designated site administrator. This would enable the users to either submit feedback or a question related to a page in the site to the site administrator. This link needed to be available on all pages in the site. The SharePoint site where this needs to be implemented is based on the Publishing Site with Workflow template.
Given that the link needed to be available on all pages in the site, it was decided to add it to the master page. Also, I did not want to hard-code the e-mail address of the site administrator in the master page. This would make it difficult to maintain, if the e-mail address needed to be changed to that of another administrator in the future. So I chose to create a list that would contain the e-mail address. This way the e-mail address can be changed easily by simply updating the list item. ListData.svc provides a way of getting information from a SharePoint list using REST. If you are looking for a good resource on REST, check out this MSDN article. So the approach was to retrieve the e-mail address that is stored in the list using ListData.svc, and then use javascript to auto-populate the “To…” field in the e-mail with the e-mail address retrieved from the list.
Prerequisites
1. In order to use ListData.svc you need to install the ADO.NET Data Services Update for .NET Framework 3.5 SP1 for Windows 7 and Windows Server 2008 R2 which can be downloaded from this Microsoft site.
2. jQuery library which can be downloaded from this jQuery site. I used version 1.4.2 in my solution.
3. Starter Publishing master page (_starter_publishing.master) provided by Randy Drisgill which can be downloaded from this CodePlex site.
Nuts and Bolts
Here are the details on how I implemented the solution:
1. Created a SharePoint List (based on Contacts) in the top level site. The name of the list is Contact. When you create a List based on Contacts, it will include the columns as shown in Figure 1 below.
In my case, I only needed the First Name, Last Name, and E-mail Address columns. So I deleted the other columns. Figure 2 below shows the 3 columns in my List. I also changed the First Name and E-mail Address columns to be required columns.
A screenshot of the first item in the Contact list is shown in Figure 3 below:
2. Within the <form></form> tags in the master page, added code as shown below to render the Contact image that users will click.
<img id="siteAdminEMail" src="/images/link_contact.gif" width="72" height="17" border="0" />
And this rendered the image shown in Figure 4 below:
3. Within the <form></form> tags in the master page, added the following javascript code to handle the click event of the Contact image. It contains a function that retrieves the URL of the top level site and passes it as a parameter to the getContactEMailFromList() function as shown below:
<script type="text/javascript">
$('#siteAdminEMail').click(function()
{
//get top site Url and pass it to the getContactEMailFromList function
var topSiteUrl = "<asp:Literal id="litSiteUrl" runat='server' Text='<% $SPUrl:~SiteCollection/%>' />";
getContactEMailFromList(topSiteUrl);
});
</script>
4. Within the <head></head> tags of the master page, added the code shown below to reference the javascript files. The first line references the jQuery library which I got from the jQuery site. The second line references my custom javascript file, titled HelperFunctions.js. Details on HelperFunctions.js is provided in item 5 below. Both .js files were stored in a document library titled, JSLibrary, in the top level site.
<!-- jQuery and custom javascript references -->
<script type="text/javascript" src="/JSLibrary/jQuery.min.js"></script>
<script type="text/javascript" src="/JSLibrary/ HelperFunctions.js "></script>
5. The HelperFunctions.js file contains 2 functions:
a. getContactEMailFromList() – This function retrieves the value in the EMailAddress column in the first item in the Contact list using ListData.svc. This is done by building the url parameter using the siteURL supplied as input, and then appending the ListData.svc portion. The List contains one Item. So I used Contact(1) to get the first item. EMailAddress is the column in the Contact list which contains the value that we want to retrieve. The $.ajax() call is a jQuery method that performs an asynchronous HTTP request using the url supplied. If the call is successful, the e-mail address is returned in the data object, and another javascript function createEmailMessage is invoked. If it fails, an error message is displayed via the javascript alert() function.
b. createEMailMessage() – This function retrieves the e-mail address from the data object, and then creates a new e-mail with the “To…” field auto-populated with the e-mail address retrieved from the Contact list.
function getContactEMailFromList(siteURL) {
//Build the URL for ListData.svc
//Get the value in the EMailAddress column in the first item in the Contact List
var url = siteURL + "_vti_bin/ListData.svc/Contact(1)/EMailAddress";
$.ajax({
url: url,
dataType: "json",
success: function (data) {
createEMailMessage(data);
},
error: function (data) {
alert("Contact address unavailable.");
}
});
}
function createEMailMessage(data) {
//retrieve the e-mail address
var mailToRecipient = data.d['EMailAddress'];
//Construct mailto
var mailtoSiteAdmin = "mailto:%20" + mailToRecipient;
//Display a new e-mail with the recipient e-mail in the To field
window.location = mailtoSiteAdmin;
}
6. When the Contact image is clicked, a new e-mail message is created and the e-mail address of the Contact person is auto-populated in the To… field as shown in Figure 5 below:
