iGoogle UI for Sharepoint: my way

I implemented the iGoogle user experience already in the past, but I’ve found really well documented the way Christopher Pettigrew followed in his article series so here I’m referring to that.

The only point I don’t agree with that article is the way to implement it in Sharepoint. The implementation of a Control Adapter it seems to me useless, too complicated and that could even be too heavy in terms of performance.

My Way

My way has been to customize a Page Layout where:

  • include the load of the custom CSS:
<SharePointWebControls:CssRegistration ID="iWidgetsCssRegistration" name="/_layouts/....../StyleSheets/iWidgets.css" runat="server" />

  • include the load of all the required javascript files:
<SharePointWebControls:ScriptLink ID="iWidgetsjQueryUI" language="javascript" name="/_layouts/......../scripts/jquery-ui-1.8.21.custom.min.js" runat="server" />
<SharePointWebControls:ScriptLink ID="iWidgetsjQCookie" language="javascript" name="/_layouts/......../scripts/jquery.cookie.js" runat="server" />
<SharePointWebControls:ScriptLink ID="iWidgetsjQCorner" language="javascript" name="/_layouts/......../scripts/jquery.corner.js" runat="server" />
<SharePointWebControls:ScriptLink ID="iWidgetsiColor" language="javascript" name="/_layouts/......../scripts/iColorPicker.js" runat="server" />
<SharePointWebControls:ScriptLink ID="iWidgets" language="javascript" name="/_layouts/......../scripts/iWidgets.js" runat="server" />

  • include the WebPartZone I would be managed with the iGoogle UI in a DIV block with the class of “column”:
<div class="column" id="middleCol">
<WebPartPages:WebPartZone runat="server" AllowPersonalization="false" ID="TopZone" FrameType="TitleBarOnly"
Title="<%$Resources:cms,WebPartZoneTitle_Top%>" Orientation="Vertical" />

After that, a little change to the main javascript file (in my case named iWidgets.js, in the original article script.js) so every web part in the identified zone will be surrounded by the required HTML:

var $j = jQuery.noConflict();
$j('td[id*="MSOZoneCell_WebPart"]').each(function(index) {
var title = $j(this).find('td[class="ms-WPHeaderTd"]').attr("title");
if(title != null) {
title = title.split(" - ")[0];
else {
title = "";
$j(this).html("<div id='iwidget" + index + "' class='widget'><div class='widget-head'><a class='collapse'>collapse</a><h3>" + title + "</h3><a class='remove'>remove</a><a class='edit'>edit</a></div><div class='widget-edit'><input type='text' class='iColorPicker' id='coloriwidget" + index + "' /><div class='clearfix'></div></div><div class='widget-content'>" + jQuery(this).html() + "</div></div>");
$j("<div id='widget-enabler'><a class='enable'>enable</a></div>").insertBefore('span.s4-help');

Just a little note on that: I’ve added a button (the widget-enabler DIV) with which enable/disable the widget upper bar only when required to move a web part. To implement it, I’ve added also the “enable” event to the iWidget.js javascript:

$j('.enable').mousedown(function (e) {
// Stop event bubbling:
}).click(function () {
return false;

That’s all folk! Simple and even possible, with small changes in where the js and css files are stored, implement as a sandbox solution or deployable using the UI.

Questa voce è stata pubblicata in Senza categoria. Contrassegna il permalink.

3 risposte a iGoogle UI for Sharepoint: my way

  1. Chris Pettigrew ha detto:

    The Reason why it was implemented in my example as a control adapter is so when you go into “Edit Mode” the drag and drop functionality will not interfere with the SharePoint Management experience and we only want the functionality on the display mode. 🙂

    • aramacciotti ha detto:

      Having the button to enable/disable the toolbox around the web parts, that’s not a problem, I think.
      Moreover it’s not so difficult to test if the page is in edit mode or not even client side.

  2. Hello there, You have done a fantastic job.
    I will certainly digg it and personally recommend to my friends.
    I’m sure they will be benefited from this site.


Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...