SharePoint 2010 Force Modal Dialog

The Problem:

You've added a Custom Action to your SharePoint 2010 list to redirect users to a specific edit form.  However, when they click on it, it takes them to a completely separate page, away from the list.  Lets take a look at how we can force SharePoint to open these links in the Modal Dialog similar to how it handles the default edit/create/display forms.

The Solution:

So, in SharePoint Designer, under Lists and Libraries, you have selected the list you're working on.  In the bottom right-hand corner of the List page, you should see a Custom Actions box.  Create your Custom Action if you haven't already.

Now that you've got your Custom Action started, we are going to work off of the default settings in the "Navigate to Form" field.  We will use a simple JavaScript function call to SP.UI.ModalDialog.showModalDialog() which is a built-in JS function included with SharePoint 2010.

Here is an example of the call:

javascript:SP.UI.ModalDialog.showModalDialog({
url: "/sites/<SiteName>/Lists/<ListName>/EditForm.aspx?ID={ItemId}",
title: "Custom Edit Form/Destination",
dialogReturnValueCallback:  function(dialogResult){
SP.UI.ModalDialog.RefreshPage(dialogResult);
location.reload();
 }
});
return false;

After editing the URL & Title, this function call can be placed right into the "Navigate to URL" textbox back on the SharePoint Designer Custom Action screen.

You might notice there is a line called dialogReturnValueCallback.  Here, we specify the behavior to send back to the original page that called the Modal (our list).  For this example, we refresh the original list to reflect any changes that may have been made on the Modal Dialog.

Copy the JavaScript (inline) right into the Custom Action "Navigate to URL" box, click "OK" and test out your custom action!

** UPDATE (6/24/15) - I noticed when using the above code snippet, that SharePoint Designer won't let you copy and paste the code as it is above.  In order to use the code sample above, you must remove all carriage returns and paste the code in as a single line:

javascript:SP.UI.ModalDialog.showModalDialog({ url: "/sites/<SiteName>/Lists/<ListName>/EditForm.aspx?ID={ItemId}", title: "Custom Edit Form/Destination", dialogReturnValueCallback:  function(dialogResult){ SP.UI.ModalDialog.RefreshPage(dialogResult); location.reload(); }});return false;