Home > ModalDialog > How to use SharePoint modal dialog box to display Custom Page Part3

How to use SharePoint modal dialog box to display Custom Page Part3

In the second part of the series, I showed you how to display and close a custom page in a SharePoint modal dialog using JavaScript and display a message after the modal dialog is closed. In this post, I’d like to show you how to use SPLongOperation with the Modal dialog box. You can download the source code here.

1. Firstly, modify the element file as follow

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAction Id="ReportConcern"
Title="Display Custom Page"
Description="To Display Custom Page in a modal dialog box on this item">
<UrlAction Url="javascript:
function emitStatus(messageToDisplay) {
statusId = SP.UI.Status.addStatus(messageToDisplay.message + ' ' +messageToDisplay.location );
SP.UI.Status.setStatusPriColor(statusId, 'Green');
function portalModalDialogClosedCallback(result, value) {
if (value !== null) {
var options = {
url: '{SiteUrl}' + '/_layouts/YBBEST/TitleRename.aspx?List={ListId}&amp;ID={ItemId}',
title: 'Rename title',
allowMaximize: false,
showClose: true,
width: 500,
height: 300,
dialogReturnValueCallback: portalModalDialogClosedCallback };
SP.UI.ModalDialog.showModalDialog(options);" />

2. In your code behind, you can implement a close dialog function as below. This will close your modal dialog box once the button is clicked and display a status bar. Note that you need to use window.frameElement.commonModalDialogClose instead of SP.UI.ModalDialog.commonModalDialogClose

protected void SubmitClicked(object sender, EventArgs e)
//Process stuff
using (SPLongOperation longOperation = new SPLongOperation(Page))
string message = "You clicked the Submit button";
string newLocation = "http://www.google.com";
string information = string.Format("{{'message':'{0}','location':'{1}' }}", message, newLocation);
longOperation.LeadingHTML = "Processing the  application";
longOperation.TrailingHTML = "Please wait while the application is being processed.";
var closeDialogScript = GetCloseDialogScriptForLongProcess(information);
catch (ThreadAbortException)
// Don’t do anything, this error can occur because the SPLongOperation.End
// performs a Response.Redirect internally and doesnt take into account
// that other code might still be executed
catch (Exception)
// When an exception occurs, the page is redirected to the error page.
SPUtility.TransferToErrorPage("There is a problem to process your application.");

protected static string GetCloseDialogScriptForLongProcess(string message)
var scriptBuilder = new StringBuilder();
return scriptBuilder.ToString();

Common problems:
If you misspell your dialogReturnValueCallback TO dialogReturnValueCallBack, your Callbakc will not work.


How to: Display a Page as a Modal Dialog Box
Using SPLongOperation


Categories: ModalDialog Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: