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

Posted by ybbest on YBBest See other posts from YBBest or by ybbest
Published on Mon, 04 Jun 2012 03:01:51 +0000 Indexed on 2012/06/22 3:25 UTC
Read the original article Hit count: 445

Filed under:

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

 

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

References:

How to: Display a Page as a Modal Dialog Box


© YBBest or respective owner

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

Posted by ybbest on YBBest See other posts from YBBest or by ybbest
Published on Mon, 04 Jun 2012 03:02:46 +0000 Indexed on 2012/06/22 3:25 UTC
Read the original article Hit count: 445

Filed under:

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}&amp;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


© YBBest or respective owner

Related posts about sharepoint