This is a follow up to the webcast I presented for SharePoint Saturday in DC May 2nd 2009. The goal is to enable presence information on usernames within a SharePoint site. This works well when you don't have Office Communication Server to leverage, and while it is not a replacement, it can be useful still. You can launch chat sessions or call the user from the presence dialog from within SharePoint. You'll also be able to see the users latest status from twitter, and you could go a step further by enabling a reply to that user. While this script is in essence a prototype, its not far off from being very useful to those who wanted to take it to the next level. So without further ado, here we go.
Step 1: jQuery Your SharePoint Site
The first step is to get jQuery and put it somewhere on your site. Visit http://www.jquery.com to find the latest version of the script and download a copy to your computer.
Once you have it downloaded drag it to the images directory, or a directory of your choosing on your SharePoint site. You can see here that I've uploaded both the development versions and the minified versions for different purposes.
Step 2: Create Your Presence List
Create a custom list and add the following fields:
Column (click to edit) | Type | Required |
Twitter
| Single line of text | 
|
ADUser
| Person or Group | 
|
Skype
| Single line of text | 
|
Phone
| Single line of text | 
|
You'll end up with a list that looks similar to this: Don't forget to populate it with our own data.
Step 3: Prepare Your Script
Copy the following script into notepad or a text editor:
<script
src="http://www.sharepointevolved.com/images/jquery-1.3.2.js" type="text/javascript"></script>
<script
type="text/javascript">
/*
* Configuration settings for the Twitter Presence List
*/
var twitterNameField = "Title"; //Name of the field used for the twitter name
var twitterNameFieldInt = "Title"; //Internal Name should be the same, but just in case its different or has spaces
var adNameField = "ADUser"; //Name of the Field with the Active Directory User
var adNameFieldInt = "ADUser"; //Internal Name should be the same, but just in case its different or has spaces
var skypeNameField = "Skype"; //Name of the field used for the Skype Name
var skypeNameFieldInt = "Skype"; //Internal Name of the field used for the Skype Name
var phoneNameField = "Phone"; //Name of the field used for the Skype Name
var phoneNameFieldInt = "Phone"; //Internal Name of the field used for the Skype Name
var listName = "{B5B2B296-9B79-4950-862E-5163DFDA3BC5}"; //Name/Guid of the list you're storing the values in
/*
* Url, Relative to the SharePoint site with the list.
* This link should not be terminated with a "/" forward slash
* Since "/_vti_bin/lists.asmx" will be appended;
* IE: "http://www.sharepointevolved.com" would be ""
*/
var urlToSite = "/presence";
/*
* Script by Isaac Stith http://www.sharepointevolved.com
* Modify below this line at your own risk
*/
var lastLookupId = "";
var lastLookupName = "";
var curTweeter = null;
var curElement = null;
var curSkype = null;
var curPhone = null;
var foundTName = false;
var readyToClose = false;
$(document).ready(function() {
//Lets put some javascript here!
$("a[href*='userdisp']").hover(
function () {
setNotReadyToClose();
var loc = $(this).attr("href");
var name = $(this).html();
var id = loc.substring(loc.indexOf("=")+1,loc.length);
curElement = $(this);
getTwitterName(id,name);
},
function () {
setReadyToClose();
}
);
});
function getTwitterName(id,name)
{
if(lastLookupId != id)
{
removeOldBox();
var soapEnv =
"<?xml version=\"1.0\" encoding=\"utf-8\"?> \
<soap:Envelope xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'> \
<soap:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>\
<listName>"+listName+"</listName> \
<query><Query><Where><Eq><FieldRef Name='"+adNameField+"' /><Value Type='User'>"+name+"</Value></Eq></Where></Query></query> \
<viewFields><ViewFields><FieldRef Name='"+adNameField+"' /><FieldRef Name='"+twitterNameField+"' /><FieldRef Name='"+skypeNameField+"' /><FieldRef Name='"+phoneNameField+"' /></ViewFields></viewFields> \
<rowLimit>0</rowLimit> \
<queryOptions><QueryOptions/></queryOptions> \
</GetListItems>\
</soap:Body>\
</soap:Envelope>";
lastLookupId = id;
lastLookupName = name;
foundTName = false;
$.ajax({
url: urlToSite + "/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: getTwitterNameCallback,
contentType: "text/xml; charset=\"utf-8\""
});
}
else
{
//Same information being retreived, check and see if the div is closed
if($("div#tweeter").html() ==null)
{
popupFromJson();
}
}
}
function removeOldBox()
{
if($("div#tweeter").html() !=null)
{
$("div#tweeter").remove();
}
}
function getTwitterNameCallback(xData, status)
{
$(xData.responseXML).find("listitems").children().children().each(function(){
if(foundTName ==false){
var title = ($(this).attr("ows_"+twitterNameFieldInt));
var usr = ($(this).attr("ows_"+adNameFieldInt));
curSkype = ($(this).attr("ows_"+skypeNameFieldInt));
curPhone= ($(this).attr("ows_"+phoneNameFieldInt));
var curid = usr.substring(0,usr.indexOf(";"));
if(lastLookupId == curid)
{
getTwitterStatus(title);
foundTName = true;
return;
}
}
});
}
function getTwitterStatus(username)
{
$.getJSON("http://twitter.com/status/user_timeline/"+username+".json?count=1&callback=?",getTwitterStatusCallback);
}
function getTwitterStatusCallback(json)
{
curTweeter = json;
popupFromJson();
}
function popupFromJson()
{
//Need to get all the parameters we want to display and put them ina nice little tooltip
var outdiv = "<div id='tweeter'><img src="+$($(curTweeter).attr("user")).attr("profile_image_url")+" height='25'/>"+$(curTweeter).attr("text")+"<br/><a href='skype:"+curSkype+"'><img src='http://mystatus.skype.com/smallicon/"+curSkype+"' style='border:0px;'/></a> <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?chat'>Chat</a> | <a href='skype:"+curSkype+"?call'>Skype Call</a> | <a href='skype:"+curSkype+"?add'>Add</a> | <a href='skype:"+curPhone+"?call'>Call Phone</a></div>";
$(curElement).after(outdiv);
var pos = $(curElement).position();
$('div#tweeter').css("top", pos.top+10);
$('div#tweeter').css("left", pos.left+25);
}
function setReadyToClose()
{
readyToClose = true;
window.setTimeout(finallyClose,2000);
}
function setNotReadyToClose()
{
readyToClose = false;
}
function finallyClose()
{
if(readyToClose==true){
$("div#tweeter").remove();
}
}
function EnsureIMNControl()
{
}
</script>
<style
type="text/css">
div#tweeter{
background-color:#FFFFCC;
border:3px black groove;
margin: 5px;
padding-right: 5px;
padding-top: 5px;
padding-left: 5px;
padding-bottom: 5px;
position:absolute;
}
div#tweeter img{
vertical-align:text-top;
border: 1px black solid;
padding: 2px;
margin-right:5px;
float:left;
}
div#tweeter a {
text-decoration:underline;
color:black;
vertical-align:bottom;
}
</style>
The only thing you have to change if you've followed the instructions are the listName and the url to site properties in the configuration section. You Can find the listId by going to the list settings of the Presence list and looking at the end of the URL.
You'll need to change the urlToSite property to the relative url to the site you're currently working on. You may also need to change the location of the jQuery file depending on where you've placed it on the site.
Step 4: Master your Master Page
Now that your script is ready, it is time to put it in your Master Page. Open up your master page in SharePoint designer and find the closing body tag. Should look like this:
You're going to paste the script you've modified for your use right above the closing body tag, then go ahead and save the master page.
If you've gotten this far should have successfully modified your site to see the presence information when you hover over a username. As an added bonus, I've removed the function that calls Microsoft's presence information in the EnsureIMNControl().
Step 5: Show of your brand new presence to your coworkers!
Or email meInsertATHereisaacstith.com