How to use SharePoint modal dialog box to display Custom Page Part1
- by ybbest
In the part1 of this series, I will show you how to use the modal dialog box to display the custom page and close the page. You can download solution here.
1. Firstly, I create custom action on the list item ECB called Display Custom Page. To do so, you need to create an element item in SharePoint project and copy the following xml to the element file.
<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 CallDETCustomDialog(dialogResult, returnValue)
{
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
var options = {
url: '{SiteUrl}' + '/_layouts/YBBEST/TitleRename.aspx?List={ListId}&ID={ItemId}',
title: 'Rename title',
allowMaximize: false,
showClose: true,
width: 500,
height: 300,
dialogReturnValueCallback: CallDETCustomDialog };
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.
protected void CloseDialog()
{
if (HttpContext.Current.Request.QueryString["IsDlg"] == null) return;
if (!ClientScript.IsStartupScriptRegistered("CloseDialogFunction"))
{
const string script = "<script type='text/javascript'>" + "SP.UI.ModalDialog.commonModalDialogClose(1, 1);" + "</script>";
ClientScript.RegisterStartupScript(GetType(), "CloseDialogFunction", script);
}
}
