One of the most frequently heard complaints about TeamSite is how difficult it is to navigate. If an editor knows what page they want to edit, they can sometimes find it time consuming to locate the page within TeamSite’s branch and folder structure. This is particularly true if the external URL bears little resemblance to the internal structure of the site within the CMS.
This is why I’ve knocked up a “TeamSite Toolbar”:
Editor Functionality
When editors browse a site they are able to edit, they see a floating toolbar at the top of the page presenting the CMS options available to them. If they’re not logged in to the CMS, they get a login prompt. Otherwise they see an “Edit” link, which links them directly to the form for the page they’re viewing. Other TeamSite functionality can also be exposed to them, for example showing if the file is locked, and by whom.
Technical Details
It works using Greasemonkey, a tool that most developers will be aware of, which can be used to inject your own JavaScript into any web pages. The injected Javascript is pulled from the TeamSite server with each request, allowing the rolling out of toolbar updates without having to involve the editors with installation.
The communication between the toolbar JavaScript and the TeamSite server is handled by JSON. A Server-side CGI is dynamically included as a JavaScript on the page, and this provides JSON data to the toolbar. The data contains the URL for editing the page in the CMS and some metadata for other functionality.
Hi, this looks very good. 1 thing I like to know is how does the webserver or the browser ‘know’ that is should show the toolbar? Is this does server or client side? And how?
Hi Ronald, It’s done client-side.
Greasemonkey is installed onto the site editor’s PC. It is configured with a list of sites to look for, e.g. http://www.channel4.com/*. When the editor browses to a URL which matches, Greasemonkey is configured to run a few lines of JavaScript:
var s = document.createElement('script');s.setAttribute("src", "http://teamsite.channel4.com/iw/greasemonkey-include.js");
s.setAttribute("type", "text/javascript");
document.body.appendChild(s);
This has the effect of injecting some more JavaScript into the page that they’re currently viewing.
Therefore only the site editors will get the JavaScript which creates the toolbar. The original page that the public see is completely untouched, with no toolbar code in it at all.
Does that answer your question?
Loz, thank you for your answer. I think this is a VERY elegant solution for a problem that shows it ugly head at every teamsite project I’ve done so far.
So how do we get it?