Click here to Skip to main content
13,193,600 members (41,438 online)
Click here to Skip to main content
Add your own
alternative version

Stats

41.6K views
15 bookmarked
Posted 30 Jul 2009

SharePoint Tasks Popup using JavaScript API

, 30 Jul 2009
Rate this:
Please Sign up or sign in to vote.
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

  • 30th July, 2009: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Zabiullah Sheik Ismail
Architect
India India
Zabiullah SI is working for an MNC in Chennai.

Blog : http://zabistop.blogspot.com

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralSchedule task web part in sharepoint server 2010 Pin
nisha8827-Apr-11 4:27
membernisha8827-Apr-11 4:27 
GeneralRe: Schedule task web part in sharepoint server 2010 Pin
Zabiullah Sheik Ismail24-May-11 18:13
memberZabiullah Sheik Ismail24-May-11 18:13 
GeneralThank you, and your kind help is needed Pin
nado2315-Sep-10 3:20
membernado2315-Sep-10 3:20 
GeneralNice Idea Pin
xerebro22-Nov-09 4:25
memberxerebro22-Nov-09 4:25 
GeneralThere was an error: Not Found Pin
Hawkmoth17-Sep-09 2:55
memberHawkmoth17-Sep-09 2:55 
Generalgood idea! Pin
Sohel_Rana7-Aug-09 18:00
memberSohel_Rana7-Aug-09 18:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171018.2 | Last Updated 30 Jul 2009
Article Copyright 2009 by Zabiullah Sheik Ismail
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid