Thursday, February 28, 2013

SharePoint ModalDialog and Refreshing the page upon close

Recently I've been working on a project where we're creating a number of custom pages in a SharePoint 2010 solution, some of which need to be opened in a SharePoint dialog box. I've written a couple of openDialog functions before and this time was focused on the different ways to refresh the parent page after the dialog is closed. Here's the base function I was using:

function showDialog(title, url) {
 function showDialogCallback(dialogResult, returnValue) {
  if (dialogResult == SP.UI.DialogResult.OK) {
   SP.UI.Notify.addNotification(returnValue, false);
  }
  else{
   SP.UI.Notify.addNotification(title + " Cancelled", false);
  }
  setTimeout("SP.UI.ModalDialog.RefreshPage(dialogResult);", 1000);
 } 
 var dialogOptions = {
  url: url,
  title: title,
  dialogReturnValueCallback: showDialogCallback
 };
 SP.UI.ModalDialog.showModalDialog(dialogOptions); 
}

This simply allows me to pass in my title and url and the dialog opens with the dynamic size I need.

In my showDialogCallback function I like to use the SP.UI.Notify functionality (causes the yellow box to animate in on the top right with some information) to let the user know what happened.

The last line in this function has a setTimeout calling the ModalDialog.RefreshPage function, as when this function is called it refreshes the page and clears my Notify from the screen. Setting a timeout allows my notification to show for one second before the page refreshes.

There are a few different refresh calls that I've used:

SP.UI.ModalDialog.RefreshPage(dialogResult); 

This will only refresh if the dialogResult == SP.UI.DialogResult.OK. It has the same effect as putting it in the if statement directly above. I read some where that this kind of refresh isn't a complete reload of the page, instead it does some ajax calls to reload the content of the page you're on, though I haven't confirmed that to be true, and can't say from a user prospective that I see any difference with the next method.
location.reload(true);

This is pretty straight forward. It's just going to relaod the entire page grabbing all information from the server again.

Depending on what I'm trying to accomplish I find I use a combination of the setTimeout with either of these reloads.

A few helpful sites I found in my research:
Collabware SharePoint 2010 ModalDialog Tips & Tricks
Antonio Lanaro Blog Post