1,804 articles and 14,635 comments as of Monday, February 28th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Friday, March 27, 2009

Deploy Custom JQuery Scripts to the SharePoint Site Collection

Introduction to Accordion for QuickLaunch

Paul Grenier made some really cool JQuery web parts.

The one I like most is Accordion for QuickLaunch. It is a simple JQuery script that allows users to collapse and expand sections of a SharePoint QuickLaunch menu (the latest version even remembers the ones you expanded previously).

Deploying Paul’s solution is really easy. You can paste the entire script to the Content Editor Web part, or deploy the pre-packed webpart that does that.

Deploying site-wide

When you are working on a large SharePoint project, deploying a webpart to each page (default.aspx, each list view, each custom web part page…) might be a mission impossible. So to overcome this problem I decided to place Paul’s script to the master page allowing me to automatically apply the solution to all pages on a SharePoint site.


Custom JQuery

To deploy a Javascript/JQuery to a master page do the following:

You are done! Now all the pages inheriting from the default master will have the ability to collapse and expand sections of quick launch.


Custom JQuery

Deploying the solution to the entire site collection

This “site wide approach” could be extended to the entire site collection, allowing you to have custom quick launch on each site in a site collection.


Custom JQuery

For Microsoft Office SharePoint 2007 (MOSS)

Deploying this solution to the entire site collection on SharePoint 2007 is easy. You only need to change the root default.master (or any other master page you are using) and reapply it to all subsites.

To do that go to Site Settings > Look and feel > Master page and reset all subsites to inherit this updated master page. If you are not using publishing pages, you will also need to update System master pages to inherit.


Custom JQuery

For Windows SharePoint Services 3.0 (WSS)

Deploying this solution site collection wide on WSS is a bit more complicated. Each new WSS site your create will automatically use the default.master page template from the following location on your SharePoint server: <%System Drive%>Program Files\Common Files\Microsoft Shared\Web Server Extensions\12\TEMPLATE\GLOBAL\

When a new site is provisioned, a copy of default.master will be stored to /catalogs/masterpage/default.master (you can open it with SharePoint designer)

The easiest (and not recommended) way would be to change the default.master on the file system. Once completed, each new site you create will include the new quick launch functionality. However your existing sites will not be updated. To update these you will need to manually update the master page on each one, or change the reference to the master on a particular page by referencing a master page file you already changed (e.g. the one in the root site).

Learn more about master pages and WSS…

Conclusion

Deploying custom JQuery scripts to master pages allows you to quickly deploy your solution to sites in your site collection. Deployment is smooth only when you are using SharePoint 2007, but it might be a problem for WSS deployments.

 

Toni FrankolaAuthor: Toni Frankola SharePoint Use Cases Toni started his Web adventure in late 90’s and has been working with various web technologies ever since.

Toni is leading project engagements and managing a team of consultants specializing in Microsoft technologies. His primary focus is on Microsoft Office SharePoint and Dynamics CRM. He works at Perpetuum Mobile, a Microsoft Gold Partner from Croatia.

 

Please Join the Discussion

17 Responses to “Deploy Custom JQuery Scripts to the SharePoint Site Collection”
  1. Chris Blocher says:

    GET OUT OF MY HEAD!!!!!!!! Seriously, I just hung up the phone with someone discussing this VERY topic…browse to EndUserSharePoint to see if there’s a solution and here it is! Love these posts! They are greatly appreciated!

    Chris

  2. Hm… In the last part you wrote:

    “The easiest (and not recommended) way would be to change the default.master on the file system. Once completed, each new site you create will include the new quick launch functionality. However your existing sites will not be updated. ”

    This is wrong, any master page that has not benn customized will still point to, and retrieve, the file system updates. however, as you say, changing this file is unsupported, and Microsoft may at any time, as part of a patch, overwrite your changes if they like.

    .b

  3. Alex Angas says:

    Thanks for the post!

    Do you have any advice for whether _spBodyOnLoadFunctionNames.push() should be used for jQuery?

    If you are using the Google AJAX APIs to load jQuery, how do you ensure jQuery *and* SharePoint are loaded before the scripts run?

    Cheers, Alex.

  4. Clark says:

    The AdditionalPageHead delegate control is another, perhaps more robust option (but more complicated):

    http://weblogs.asp.net/jan/archive/2008/11/20/sharepoint-2007-and-jquery-1.aspx

  5. Jeff says:

    Where is the code for this quick lauch expand/collapse? I like the way it looks/works more than the down arrow and x.

  6. Jeff – What you are seeing is the advanced version of the accordian script that comes as part of the live online workshop package. Until Paul releases it to the public, you’d have to take the workshop to get it. — Mark

  7. Gagan says:

    Where is the Script that i will paste in master page? I didn’t find any script here.

  8. Ajit says:

    Here is a link where you can find the script:
    http://www.endusersharepoint.com/?p=985

  9. I really enjoy Paul’s JQuery postings as well, we even use his ‘Accordion for QuickLaunch’ as an example in our blog posts.

    An alternative, and possible easier and cleaner, approach to inserting the same script in multiple pages is to use our Free Infuser tool. It uses a clean way to push code into every page without modifying onet.xml , core.js, master pages or messy ghosting business.

    See http://www.muhimbi.com/blog/2009/07/massage-sharepoint-into-submission.html

  10. James Owenby says:

    I have a SP site and number of sub-sites that I’ve inherited. The goal is to make it all seamless but the main site’s quick launch Navigation isn’t what we want. We want the quick launch navigation that is on one of the sub-sites to be persistent. I’m not seeing any way I can customize the quick launch and add my own URL’s for that. Anyone?

  11. husso says:

    hi,
    I followed your steps and pasted the script in sharepoint designer 2010
    refreshed the teamsite and nothing has changed.
    Does the script not run in sharepoint 2010? or is something missing to get it running in SP2010?

    thanks
    husso

  12. @Husso: Well, probably SP 2010 layout was changed and this script does not work anymore… :(

  13. Dwinters says:

    this looks great, but when trying to add this to the blueband.master, the Accordion will not show. Any suggestion? thanks

    • Reema says:

      Dwinters,

      Were you able to figure out a solution to implement the quick launch in blueband.master? I’ll also stuck with it.
      Any reponse shall be highly appreciated.

      Thanks,
      Reema.

Trackbacks

Check out what others are saying about this post...
  1. [...] lot from our users. One of the more popular solutions, based on Accordion Left Nav and featured in Tony’s Deployment article, has only one improvement since the original [...]




Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!