CustomAction: Open UrlAction in Modal Dialog

As we know that CustomAction can have UrlAction that points to an application page. In SharePoint 2007, whenever the CustomAction is clicked it simply navigates to the application page defined in UrlAction.

As I am migrating to SharePoint 2010 I want to have some of my CustomAction especially the ECB (Edit Control Block) ones to open in modal dialog. SharePoint 2010 provides several javascript methods to open an url in a modal dialog. One of them is OpenPopUpPageWithTitle method defined in core.js. Below is the signature of the method:

OpenPopUpPageWithTitle(url, callback, width, height,title)

The method parameters are self explained. Internally the OpenPopUpPageWithTitle method is calling SP.UI.ModalDialog.showModalDialog(options) where the options are the parameters passed to the method.  To see how it works below is my ECB definition.

<CustomAction Id="Custom.ProvisionGroup"
                Location="EditControlBlock"
                Title="My Custom Action"
                RegistrationType="List"
                RegistrationId="20002"
                Rights="ManagePermissions" 
               ImageUrl="/_layouts/images/editicon.gif">
 <UrlAction Url="javascript:OpenPopUpPageWithTitle('{SiteUrl}/_layouts/myCustom/ProvisionGroup.aspx?List={ListId}&ID={ItemId}', RefreshOnDialogClose, 600, 400,'My Custom Action')"/>
  </CustomAction>

Basically it is an ECB for a custom list definition, on the UrlAction I use the OpenPopUpPageWithTitle method where the url is a custom application page, the callback is a SharePoint method called RefreshOnDialogClose (this method is defined in core.js, it will refresh the underlying page when the dialog close). Basically the callback can be anything such as display notifaction(SP.UI.Notify). The other parameters specified the width, height and title of the dialog box. Below is the screen shot of the my custom ECB.

CustomAction EditControlBlock

CustomAction ECB

CustomAction Modal Dialog

CustomAction Modal Dialog

In the custom application page we need to close the dialog box whenever it has finished executing. Below is the code to close the dialog box. It needs to be called at the end of the execution.

private void ClosePopUp()
{
            this.Context.Response.Write("<script type='text/javascript'>window.frameElement.commitPopup();</script>");
            this.Context.Response.Flush();
            this.Context.Response.End();
}

Off-course, we can achieve the same result by using SP.UI.ModalDialog directly as shown in this post as OpenPopUpPageWithTitle method internally is using SP.UI.ModalDialog

Microsoft SharePoint 2010,SharePoint Designer, SharePoint Workflow, Web Part

3 thoughts on “CustomAction: Open UrlAction in Modal Dialog