If you have spent any amount of time with SharePoint 2010, you have seen the “lightbox” feature which allows the SharePoint user to remain on the same page, providing a pop-up dialog box, while dimming the background – very Web 2.0!

This “lightbox” dialog can be enabled/disabled within any list in the Advanced Settings.

Once enabled, the dialogs are actually launched using the JavaScript method OpenPopUpPage().  Without getting too technical, this is one of many methods that are now available in the SharePoint 2010 client object model – in fact, there is an entire dialog framework now.  You will see many ways to achieve virtually the same thing, such as showModalDialog(), etc.  OpenPopUpPage() is less customizable, but is very easy and simple to use.

This is fantastic (and much needed) functionality, but we thought “This is great, but how can we leverage this within our own customizations?”  Allow me to elaborate…While working on a client project recently, we implemented Bamboo List Rollup Web Parts for data rollups across the client’s sites.  We use their web parts quite a bit within our organization and for our clients, and for those of you that have used these web parts, you know that behind the scenes these are Data View Web Parts (DVWP) with XSL for the presentation.  What this means, is that with a little customization of the XSL, we can add columns, hyperlinks, and virtually any customization to present the rollup exactly as our client requires.

While making customizations to the Bamboo List Rollup, we were rolling-up all project tasks across all project sub-sites; a very common task for the web part.  However, our task list had another related list which held individual status entries for each task.  We wanted to add a custom column to the List Rollup which would allow the user to click the hyperlink to view all of the statuses for the specific task in the rollup view.  However, we didn’t want the user to navigate away from the rollup, and we have this nice, “lightbox” functionality integrated into SharePoint 2010.

Once we had the structure of the JavaScript call, we can simply place this anywhere in our XSL, attached to a hyperlink, and we should get a dialog, showing any page within in.  So, in our case, we wanted the page shown in the dialog to be the list of statuses for this task, which is just another list.  We’ve all seen new and edit forms in these dialogs, but we had never attempted to show a list view in a dialog.  All we needed to know what how to filter the list view, and we could pass this URL (with filter) into our dialog.

After modifying our rollup XSL, we had the following view:

The code behind the “Statuses…” link is simply:

<a href="javascript:OpenPopUpPage('/IT/Project1/lists/StatusList/AllItems.aspx?FilterField1=TaskName

&amp;FilterValue1=' + {@TaskName} + '', RefreshPage)">Statuses...</a>

The final product is a nice, elegant way to show insight into a related list using the new dialog framework.

One last trick: You may be wondering how the SharePoint “chrome” (meaning navigation, etc) is automatically removed from the page when shown in a dialog.  Notice we didn’t tell it to do anything different in the link code above, and if you copy/paste that link, you will get the full SharePoint chrome.  These dialog functions append an additional parameter onto your URL which tells SharePoint to display the page in “dialog mode”.  The parameter is IsDlg=1.  This has us thinking of many creative ways to use this new parameter, which allows you to easily remove all chrome without the CSS modifications needed in 2007.

Before IsDlg=1	After IsDlg=1