Home > SharePoint, video tutorial > How to use SharePoint modal dialog box to display Custom Page Part2

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

In the first part of the series, I showed you how to display and close a custom page in a SharePoint modal dialog using JavaScript. In this one, I’d like to show you how to display some information after the Modal dialog is closed.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.

protected static string GetCloseDialogScript(string message)
{
var scriptBuilder = new StringBuilder();
scriptBuilder.Append("<script type='text/javascript'>" + "SP.UI.ModalDialog.commonModalDialogClose(1,").Append(message).Append("); </script>");
return scriptBuilder.ToString();
}
Advertisements
Categories: SharePoint, video tutorial
  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: