SharePoint Tasks Popup using JavaScript API

Introduction

This article uses SharePoint’s Content Editor Web part (CEWP) with Darren’s JavaScript API to display the tasks for current logged in user. JavaScript API is used to query the SharePoint Task list and the tasks for the current user will be displayed in the CEWP.

This article explains how to use JavaScript API to fetch the SharePoint data and a CEWP to display Tasks list for logged in user. The same approach can be used in various scenarios like displaying announcements, news, displaying scrolling news / list information, etc.

User Tasks Popup

The below screen shows the user tasks popup for the current logged in user. This will be helpful for the logged in user to complete the important tasks when he enters into the site. The user can click on the listed tasks to navigate to the display form of the selected task.

Content Editor Web Part

The Content Editor Web Part is intended to add HTML content to a Web Part Page, which may include hyperlinks.

It is possible to add content to the Content Editor Web Part in three ways:

Rich Text Editor

Use the Rich Text Editor to create the formatted content without the prior knowledge of HTML. There are different toolbars available in this editor to format the content.

Source Editor

Use this Source Editor to add or modify the HTML source code. This Source Editor is a plain text editor and it is intended for users who are familiar with HTML syntax. It is also possible to add JavaScript and CSS Styles using Source Editor.

Content Link

Use this Content Link to link to the existing content by entering a hyperlink to a text file that contains a HTML source code. HTTP or HTTPS are the two valid hyperlink protocols that you can use to link to the file.

The following image shows the Content Editor Tool Pane:

JavaScript API

XMLHTTP can be used to send an HTTP request directly to a web server and load the server response data directly back into the scripting language. We are going to use XMLHTTP to query the SharePoint data using SharePoint Lists Web Service.

Darren has written a set of JavaScript proxy classes providing cross-browser access to the SharePoint Data. You can download the JavaScript API from his site. It uses XMLHTTP to fetch data from SharePoint. 

Follow the steps given below to display the user tasks as popup.

Upload the JavaScript API files to a Document Library / Place the files in LAYOUTS of SharePoint 12 Hive.

Add a Content Editor Web part (CEWP) in header of the page for adding script tags. Include the following two scripts to fetch SharePoint List items. Set the Web Part’s Chrome Type to “none” so that the Web Part title will not be displayed.

Script

<script src="JSAPI/SPAPI_Core.js"></script>
<script src="JSAPI/SPAPI_Lists.js"></script>

Note: I have created a Document Library by name JSAPI and added the script files. It is also possible to add these scripts to LAYOUTS folder of 12 Hive and refer the files in this CEWP.

Add another Content Editor Web part (CEWP) below the above specified CEWP scripts (JSAPI Scripts) Web Part. Add the following script in the Source Editor.

Script to Display Tasks List

<div id="topbar">
<a href="" onClick="closebar(); return false">
<img src="_layouts\images\CMSRemoveImage.GIF" border="0" />
</a>
<span id='count'></span>
<br><br>
<span id='content'></span>
</div>

//Styles for the top bar
<style type="text/css">
#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightblue; //Background Color of div
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>

<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, 
		//it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? 
			document.documentElement : document.body
}

function get_cookie(Name)
{
     var search = Name + "="
     var returnvalue = "";
     if (document.cookie.length > 0)
     {
     offset = document.cookie.indexOf(search)
     if (offset != -1)
     {
     offset += search.length
     end = document.cookie.indexOf(";", offset);
     if (end == -1) end = document.cookie.length;
     returnvalue=unescape(document.cookie.substring(offset, end))
     }
     }
     return returnvalue;
}

function closebar()
{
     if (persistclose)
     document.cookie="remainclosed=1"
     document.getElementById("topbar").style.visibility="hidden"
}

function staticbar()
{
	barheight=document.getElementById("topbar").offsetHeight
	var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
	var d = document;

	function ml(id)
	{
		var el=d.getElementById(id);
		if (!persistclose || persistclose && get_cookie("remainclosed")=="")
		el.style.visibility="visible"
		if(d.layers)el.style=el;
		el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
		el.x = startX;
		if (verticalpos=="fromtop")
		el.y = startY;
		else
		{
		el.y = ns ? pageYOffset + innerHeight : 
			iecompattest().scrollTop + iecompattest().clientHeight;
		el.y -= startY;
		}
		return el;
	}

	window.stayTopLeft=function()
            {
		if (verticalpos=="fromtop")
                       {
		var pY = ns ? pageYOffset : iecompattest().scrollTop;
		ftlObj.y += (pY + startY - ftlObj.y)/8;
		}
else
                {
		var pY = ns ? pageYOffset + innerHeight - barheight: 
			iecompattest().scrollTop + 
			iecompattest().clientHeight - barheight;
		ftlObj.y += (pY - startY - ftlObj.y)/8;
		}

		ftlObj.sP(ftlObj.x, ftlObj.y);
		setTimeout("stayTopLeft()", 10);
	}
	ftlObj = ml("topbar");
	stayTopLeft();
}

if (window.addEventListener)
	window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
	window.attachEvent("onload", staticbar)
else if (document.getElementById)
	window.onload=staticbar

// Return Tasks for the current user from My Tasks view of SharePoint Tasks list
var siteURL = 'http://yoursiteaddress';
var listName = 'Tasks';

var lists = new SPAPI_Lists(siteURL)

var items = lists.getListItems(
listName,
'{E453BBF6-CCD0-4AE5-96B3-DB5A84ED8C20}', //My Tasks view GUID
'',
'',
5,
'',
null);

if (items.status == 200)
{
var rows = items.responseXML.getElementsByTagName('z:row');

//Tasks Count
var taskCount = 'You have ' + rows.length + ' task(s)';
document.getElementById('count').innerText = taskCount;

var str = '';
for (var i=0; i<rows.length; i++)
{
var ID = rows[i].getAttribute('ows_ID');

str = str + '<a href=Lists/'+listName+'/DispForm.aspx?ID='+ID+'>' + 
		(i+1) + ' - '+ rows[i].getAttribute('ows_Title') + '</a><BR>';
}
}
else
{
  str = 'There was an error: ' + items.statusText;
}

document.getElementById('content').innerHTML = str;
</script>

Note

1. Change the text marked in Yellow with respective data.
2. To get the view GUID open the view in SharePoint UI, get the GUID from URL.

The following screen shows the “Tasks” List with sample data.

User “SHAREPOINT\Administrator” has one record and “moss1” has 2 records. The following shows the details of tasks of logged-in user.

Login -“SHAREPOINT\Administrator”:

Login - “moss1”:

Using getListItems method also accepts CAML query, this will help to query data from SharePoint using JavaScript.

Conclusion

This article helps you to understand the use of JavaScript API to fetch SharePoint data using SharePoint web services. The future enhancements will contain a custom web part with property tool pane to input the SharePoint site, list and view details.

History

• 30^th July, 2009: Initial post