How to use SharePoint modal dialog box to display Custom Page Part3
- by ybbest
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"
RegistrationType="ContentType"
RegistrationId="0x010100866B1423D33DDA4CA1A4639B54DD4642"
Location="EditControlBlock"
Sequence="107"
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) {
emitStatus(value);
}
}
var options = {
url: '{SiteUrl}' + '/_layouts/YBBEST/TitleRename.aspx?List={ListId}&ID={ItemId}',
title: 'Rename title',
allowMaximize: false,
showClose: true,
width: 500,
height: 300,
dialogReturnValueCallback: portalModalDialogClosedCallback };
SP.UI.ModalDialog.showModalDialog(options);" />
</CustomAction>
</Elements>
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 window.frameElement.commonModalDialogClose
protected void SubmitClicked(object sender, EventArgs e)
{
//Process stuff
string message = "You clicked the Submit button";
string newLocation="http://www.google.com";
string information = string.Format("{{'message':'{0}','location':'{1}' }}", message, newLocation);
var longOperation = new SPLongOperation(Page);
longOperation.LeadingHTML = "Processing the application";
longOperation.TrailingHTML = "Please wait while the application is being processed.";
longOperation.Begin();
Thread.Sleep(5*1000);
var closeDialogScript = GetCloseDialogScriptForLongProcess(information);
longOperation.EndScript(closeDialogScript);
}
protected static string GetCloseDialogScriptForLongProcess(string message)
{
var scriptBuilder = new StringBuilder();
scriptBuilder.Append("window.frameElement.commonModalDialogClose(1,").Append(message).Append(");");
return scriptBuilder.ToString();
}
References:
How to: Display a Page as a Modal Dialog Box
