One Click Minimize/Restore for WebParts

One anoyance I have with WebPart pages that have a lot of WebParts is the need to click the WebPart menu to select Minimize or Restore when you want a little more screen real estate or you need to expand a previously minimized WebPart.

To solve this niggle I've developed a simple WebPart that using client side Javascript that traps the double click on a WebPart title and toggles the state of the WebPart. It integrates with the SharePoint client side object model so any changes are saved to the site and persists across sessions.

Unzip the DoubleClick WebPart Minimize/Restore DWP file to a directory of your choice

Browse to the SharePoint WebPart page - Click the 'Modify My Page' - 'Add Web Parts' - 'Import menu' option

Click the Browse button and select the DWP file.

Click the upload button - once uploaded you can drag the WebPart to anywhere on the page.

Here's a little more detail of the SharePoint client side scripting.

First I needed to get a list of WebParts on a page. Thats easy - every WebPart page that holds WebParts has a global object WPSC that is initialized like this WPSC.Init(document). The object WPSC is defined in IE55up.js/IE50.js/NonIe.js depending on browser. This is the Web Part Page Services Component which handles the client side WebPart infrastructure, it provides services such as loading/saving properties and handles page events see http://msdn.microsoft.com/library/default.asp?url=/library/en-us/spptsdk/html/wpscaOverview_SV01098760.asp  for more details.

OnPage javascript adds every WebPart on the page to its WebPartPage.Parts collection e.g.

WPSC.WebPartPage.Parts.Register('WPQ1','8db7d8d8-b1e0-4e9d-84ff-0b266b8c0beb',document.all.item('WebPartWPQ1'))

To get a list of all the WebParts on the Page you can do this

for(var i=0; i< WPSC.WebPartPage.Parts.Count;i++)
  {
    wp=WPSC.WebPartPage.Parts.Item(i);
}

What we really need is the WebPartQualifierproperty of the WebPart which is the unique ID for each WebPart on the Page, various parts of the WebPart are then suffixed with this identifier e.g WebPartTitleWPQ2 for the title div and WebPartWPQ2 for the actual serverside rendered HTML div container.

So to hook the DblClick event we can modify the inner loop like so

    wpq=WPSC.WebPartPage.Parts.Item(i).WebPartQualifier;
    var oTitle=document.getElementById('WebPartTitle' + wpq);
  
    if (oTitle)
    { 
       oTitle.attachEvent('ondblclick',MinRestoreWP);
    }

Here we're setting the double click event to fire the MinRestoreWP function. this is defined as

function MinRestoreWP()
{
var WPQId, WPObject;
var titleid,  WPQPos;

// Clear the selection the double click produces
document.selection.empty();
window.event.cancelBubble = true;
window.event.returnValue = false;

titleid=window.event.srcElement.parentNode.id;
WPQPos=titleid.lastIndexOf("WPQ");
if (WPQPos>0)
{
   WPQId='WebPart' + titleid.substring(WPQPos, titleid.length);
   WPObject=document.getElementById(WPQId);
   // call the MSO api to do the work
   if (WPObject) MSOLayout_MinimizeRestore(WPObject);
}
 
return false;
}

Here we get the WebPart to collapse or expand by going to the parent element of the Title bar which holds the WebPart title id which we can parse to get the WPQ id. This allows us to get the WebPart object we need.

The expand collapse is handled by a SharePoint function MSOLayout_MinimizeRestore which simply takes a WebPart object and does the hard work of hidding or showing the webpart by changing the WebPart.style.display CSS property. It also logs the change so the property is saved back to the WebPartPages webservice and is remembered if you close the browser and revisit the page.