It seems that SharePoint 2007 is enjoying a mini-Renaissance right now thanks to innovative client-side “hacks” using the lightweight, open source Javascript library, jQuery. jQuery’s strength and popularity is built on how incredibly easy it is to use to manipulate DOM elements with very few lines of code.
For example, take a look over at EndUserSharePoint: Paul Grenier has released a whack of posts on how to add some cool features to SharePoint using jQuery:
So, inspired by Paul’s great work, here’s my offering on how to mod-up the SharePoint wiki toolbar with your own links or controls using jQuery:
This is really easy to pull off:
- First, visit the jQuery website and get the minimized (ie. compressed) version of the library – i’m using version 1.3 here. Store this in a document library within the site or wherever it is easy to access.
- Add a Content Editor Web Part (CEWP) to the bottom of the page by opening it in Edit Mode (Site Actions menu); open the Modify Settings tool pane and from this, the Source Editor.
- Paste in the following code:
<script src="https://your.sharepoint.site/Scripts/jquery-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Wait for the DOM to load before we execute...
$(function() {
// make copies of the layout cells for the wiki toolbar
var $tdSeparator = $("table.ms-wikitoolbar tbody tr td.ms-separator:first").clone();
var $tdToolbar = $("table.ms-wikitoolbar tbody tr td.ms-toolbar:first").clone();
var $tdLastCell = $("table.ms-wikitoolbar tbody tr td.ms-toolbar[width]:last").clone();
var $parent = $("table.ms-wikitoolbar tbody tr td.ms-toolbar[width]:last").parent();
// remove the last TD element (padding)
$("table.ms-wikitoolbar tbody tr td.ms-toolbar[width]:last").remove();
// now build a link
var $select = "<a href='#' class='ms-toolbar'>Wiki Pages<a>";
// add a separator pipe, append the link and then the padding
$parent.append($tdSeparator).append("<td class='ms-toolbar' nowrap>" +
$select + "</td>").append($tdLastCell);
});
</script>
- Save and close!
As you can see, this is a really low-cost way to modify the SharePoint UI: There’s no hassling with the .aspx layout page in the ‘12’ hive, no messing about with SharePoint Designer – just some simple Javascript, and even then it’s minimal.
Now, I do imagine if you’ve no prior experience with jQuery you may be wondering what the hell is going on up there – the best way to think of it is akin to regular expressions – it’s all about walking the DOM and finding what you want to modify. jQuery’s notation makes this easy to accomplish and masks a lot of the complexity/verbosity of equivalent lines of code. This said, you may want to look over Paul’s examples and the jQuery online documentation to get a handle on how to use it.
Enjoy…
8c46681a-ee23-468c-82a5-14ef6019556a|0|.0