Supporters of End User
Web

Power User Toolbox: JavaScript for SharePoint - Pt6

 
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: 
Be A Mad Scientist JavaScript Developer Looking over the last two articles in this series, parts 4 and 5, some ideas may have popped into your head.
"If I use the web service to get data then use that to pre-populate a form or manipulate page elements, I can make some awesome functionality."
I call this the JavaScript mashup. Manage Your Resources Keep in mind the title of this series, Power User Toolbox. I want you to fill your toolbox then collect, build and evaluate solutions for your users. If you started working on your own solutions already, that's great! Your next challenge will likely involve managing your JavaScript code, various library files, and the web parts that put everything on the page. Managing Libraries I found three ways to manage your JavaScript libraries that make sense for SharePoint.
  1. Put the files in the server's file system (as seen on Jan Tielens’ blog).
    • Pro:  Fastest load time
    • Con:  Challenge to keep large farms updated
    • UPDATE: Jan has more information about managing scripts using SmartTools: More info or get it on CodePlex
    • UPDATE: David suggests ShUIE for managing script files
  2. Put the files in a SharePoint document library.
    • Pro:  Only one repository for the entire farm
    • Con:  Stores the files in database blob, increases burden on SQL server
  3. Use the Google AJAX Libraries API.
    • Pro:  Single repository, constantly updated, zero administration, user cache
    • Con:  Needs DNS call since files are not local, relies on Google uptime, not SSL, not all libraries or plugins supported
If you have a secure site, the Google AJAX Libraries API will throw errors in most browsers on the default security setting--not ideal.  Otherwise, for a small performance hit, you can forget about keeping your libraries updated.  As the popularity of the Google AJAX Libraries API grows, users may already have a copy of the library you use in their cache when they hit your page which can actually improve performance. Managing Code Everyone has their own habits for managing code.  I typically keep an offline copy of each web part I make and a copy of each version of the JavaScript code the web part holds.  I also upload a copy of reuseable web parts to the web part gallery.  This way, I can always grab the latest copy from the Quick Add Groups.


Managing Web Parts
When you design web parts that use outside scripts or libraries, avoid calling the same script more than once--it will only reduce performance.  We could add our library to the default.master page but since we also know about footprints (pt 3, 4), we want to avoid loading our library to a page that does not need it.
The easiest "cross-browser" way to do this in SharePoint that I found looks like this (example for jQuery through Google API):


With that code in our web part, the web part will check for the presence of jQuery and if not found, load the library from Google's API--but not more than once.  So, you can have multiple web parts on the page and only the first one will load jQuery.

<geeky stuff>
You might notice that we did not use _spBodyOnLoadFunctionNames.push (the loader) or try to wrap this in a function.  If we wrap this in a function, SharePoint ignores it unless you use the loader or call it with another event--like onClick.  If we use the loader, we're telling the browser to fire the function during the onLoad event (after the DOM loads).  However, if we wait till then, the newly inserted script element will not get processed by the browser.

Also, because we need the script element created before we try to call the jQuery library, we have to close out the first script tag and start another one.
</geeky stuff>


If you're worried that Google could go down (pshaw!) and render your page useless, add a contingency plan script as well, like this:

Make sure you change the path to your jQuery library to match your environment in the 4th line.  This script can also help if you followed Jan Tielens’ blog but a member of the farm somehow missed an update.  Keeping a copy of the jQuery file in a document library and using the contingency script can avoid problems.

Comments

David Kitchen

Power User Toolbox: JavaScript for SharePoint – Pt6

You listed three ways to manage libraries, but there's a fourth: ShUIE.

ShUIE = SharePoint User Interface Extender

What it does in one line: It gives you the power of jQuery within SharePoint coupled with a central location to store customisations and enable them.

What it really does: It uses the AdditionalPageHead WebControl to inject jQuery and jQuery.UI. It also outputs at that point scripts that have been defined in a database against the context of the page.

You can define JavaScript (jQuery) and CSS customisations to run against a Site, Web, a specific user or admin permissions, a List, a page mode (New|Edit|Display|Invalid).

You can easily package up jQuery plugins, or write your own.

The Pros and Cons would look like this:
Pros:
* Fastest Load Time.

Cons:
* If you have many large customisations the JavaScript is inline so it's using up bandwidth.

But even that con isn't that bad... as ShUIE is open source anyone can contribute and add a layer that writes the customisations to a docroot to allow client side caching and network caching.

Anyhow, it's over here:
http://www.codeplex.com/ShUIE/

Posted 07-Dec-2008 by David Kitchen
AutoSponge

Power User Toolbox: JavaScript for SharePoint – Pt6

@David,

Thanks for the heads up about ShUIE.

I found another codeplex project with some similarities: http://www.codeplex.com/jQueryScriptManager/

Posted 07-Dec-2008 by AutoSponge
David Kitchen

Power User Toolbox: JavaScript for SharePoint – Pt6

Yup, I'd seen that.

It's interesting, but still creates a few problems:
1) You have to edit your master pages or .aspx pages in the 12 hive, and that results in breaking support from MS.
2) You have to edit those files, and that means the modifications are global, they're on or off across the farm rather than just specific areas.
3) You still don't have knowledge about the page you're on, ShUIE gives you a client side context object that mimics SPContext.Current so in the JavaScript you know pretty much everything about the page
4) You can't share settings, so if you have a common location for some web service you're accessing, you have to embed the settings within the scripts... when (not if) the environment changes you now have a support issue.

From the view point of "jQueryScriptManager also centrally manages scripts", there is a similarity. However that's where it ends, ShUIE is designed to manage when the scripts are included (based on context) as well as to help the developer by giving them information about the page, and then enable centralised light-up, shared settings, minification, CSS as well as JS, and so on.

So yup, knew about it but they are significantly different things with different aims (that overlap on the edges).

Posted 10-Dec-2008 by David Kitchen
Power User Toolbox: JavaScript for SharePoint - Pt9 | End User SharePoint

Power User Toolbox: JavaScript for SharePoint – Pt6

[...] I mentioned in part 6, you want to manage your code properly both in and out of SharePoint.  But sometimes, your [...]

Posted 12-Dec-2008 by Power User Toolbox: JavaScript for SharePoint - Pt9 | End User SharePoint
JQuery for Everyone: Dressing-up Links | End User SharePoint

Power User Toolbox: JavaScript for SharePoint – Pt6

[...] jQuery to your page (see previous article for different [...]

Posted 16-Dec-2008 by JQuery for Everyone: Dressing-up Links | End User SharePoint
Michael Greth MVP SharePoint Blog

Power User Toolbox: JavaScript for SharePoint – Pt6

SharePoint Kaffeetasse #98... Tools und Addons Custom Content Editor Web Part for SharePoint jQuery http://jquery.com/ jQuery is a...

Posted 05-Jan-2009 by Michael Greth MVP SharePoint Blog
martin

Power User Toolbox: JavaScript for SharePoint – Pt6

about using google ajax, you can just replace the javascript library url with https:// when having https sharepoint site

Posted 15-Feb-2009 by martin

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: