Supporters of End User
Web

JQuery for Everyone: Create a Client-Side Object Model

 
Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories: 
But Paul! SharePoint has a client-side object model. Well, yes and no. Yes. SharePoint has the WPSC to fetch properties about a page's web parts. However, SharePoint's JavaScript uses an ActiveX object to call the SharePoint web services--a completely unnecessary strategy that locks you into using IE. No, no, and no. When I looked at rewriting the WPSC for use in all browsers, I noticed that a lot of the data I wanted was already on the page, just not in a format I could use in my code. So, for starters, I'm not going to call the web service at all.

The CTX object

Every time an out-of-the-box web part with a SP data source loads, it creates another instance of the CTX (context) object. Each one gets a number (ctx1, ctx2, ...). These objects hold some good info about the web parts on the page but it's missing simple stuff like web part title! Open Firebug and type ctx into the console. You'll see the last ctx object created and some of the properties it holds.

A better Object

The web parts on your page all get IDs like "WebPartWPQ8". These are apparently given out at runtime and are therefore subject to change based on the order in which the web parts are loaded and which ones are open (as opposed to closed, not deleted). So they're useless without a way to map them back to your web part. I want to provide context for my jQuery selectors to specific web parts and I want to do that by web part title, something with meaning. So I wrote the code below in a jQuery plug-in style to build an object with meaningful names like Tasks, Announcements, and Calendar instead of ctx1, ctx2, and ctx3.
if (typeof wp=='undefined'){ //check for the wp object
	$("div[webpartid]").wpCollect();  //build the wp object
}
if (typeof wp.Pics=='object'){  //check for the specific web part by name
	$("#"+wp.Pics.id).hide(); //hide the Pics web part by ID
}
Since I can also collect the ctx object for a given web part, I put that inside my wp object so I can get at all of the available data by web part title (or guid if the title was hidden by turning Chrome off in the web part settings).
You can get the data from your objects like this: wp.Tasks or by using the bracket notation when names have spaces: wp["Shared Documents"].
<script type="text/javascript">
if(typeof jQuery=="undefined"){
	var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/"; 
	document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script type="text/javascript">
(function(){
	jQuery.fn.wpCollect = function(){
		wp = {};
		this.each(function(i,e){
			var guid = e.getAttribute("webpartid").toUpperCase();
			var id = e.id;
			var ctx = g_ViewIdToViewCounterMap["{"+guid+"}"];
				ctx = (!ctx)?{}:eval("ctx"+ctx);
			var title = id.replace(/WebPartWPQ/,"#WebPartCaptionWPQ");
				title = $(title);
				title = (title.length==0)?guid:title.prev().text();
			wp[title] = {guid:guid,id:id,ctx:ctx};
		});
		return this;
	};
})();
$(function(){
	if (typeof wp=='undefined'){ //check for the wp object
		$("div[webpartid]").wpCollect();  //build the wp object
	}
});
</script>
Paul Grenier

Comments

Willhlaw

JQuery for Everyone: Create a Client-Side Object Model

Paul,

Excellent idea and excellent work. Are you familiar yet with the jPoint project? I have posted on my blog the my presentation at SharePoint Saturday DC. The slide deck has a slide attributing your work on your blogs as part of the inspiration and knowledge that helped us create jPoint.

The jPoint project is at its core, an API for manipulating form pages and lists. In the future, we will expand the core to include APIs for other useful operations on the client side in SharePoint such as manipulating list views and webparts. When we get there, will you be kind enough to help us integrate your code into the Webparts subclass? The jPoint project is hosted on codeplex at http://jPoint.codeplex.com.

Thanks!
Will

Posted 13-Dec-2009 by Willhlaw
AutoSponge

JQuery for Everyone: Create a Client-Side Object Model

Will,

Thanks for the kudos. I'll reply in email about contributing to jPoint.

Paul

Posted 13-Dec-2009 by AutoSponge
JQuery for Everyone: Print (Any) Web Part(s) Plugin | EndUserSharePoint.com

JQuery for Everyone: Create a Client-Side Object Model

[...] you mash this up with my other plugin, SharePoint Client-Side Object Model, you can find web parts no matter where they are on the page or which order they load in: [...]

Posted 17-Dec-2009 by JQuery for Everyone: Print (Any) Web Part(s) Plugin | EndUserSharePoint.com
Mikael

JQuery for Everyone: Create a Client-Side Object Model

Hi Paul - I'm trying to get your solution to work on a MOSS 2007 intranet with jQuery 1.4.2. I get the web part titles and the web part GUID's, but the ctx object is empty. Also when I type "ctx" in Firebug as you suggest in the article I just get a reference error: "ctx is not defined".

Do you have any idea why this is happening? Do I need to include any other JS files to get access to the standard ctx object?

Thanks, Mikael

Posted 07-Sep-2010 by Mikael

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: