SharePoint 2010 Modal Dialog

SharePoint 2010 Modal Dialog

Tweet

Modal dialog play very important role to improve the user experience by reducing the number of postbacks. So, SharePoint 2010 comes up with in-build API to show modal dialog to improve the user experience. Here, I will explain you How to integrate SharePoint 2010 modal dialog with the application and some real time problems and their solutions. Before I go on and provide you with the details, Let us see some of the features that this new Modal Dialog provides.

Functionality provided by Modal Dialog: -
       - Display HTML content  in Modal Dialog
       - Display external url (e.g. http://www.google.com) or any application page of SharePoint in the form of an iframe
       - Show/Hide Close button
       - Show/Hide Maximize button

Mentioned below are the steps to integrate a modal dialog in the SharePoint 2010:

1. The JavaScript files for the ECMAScript Object Model (SP.js, SP.Core.js, SP.Ribbon.js, and SP.Runtime.js ) are installed in the %ProgramFiles%\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS directory. We need to add these JavaScript files in the page.
2. To open a dialog we need to use the 'SP.UI.ModalDialog.showModalDialog' method from the ECMAScript Client Object model and we can pass following parameters as per requirement:

- width: Set the width of the modal dialog

- height: Set the height of the modal dialog

- html: the ID HTML control or HTML content to be displayed in modal dialog

- url: Page url or relative path

- dialogReturnValueCallback: In case we want some code to run after the dialog is closed, set JavaScript method name

- allowMaximize: Set to true or false to show hide this option.

- showClose: Set to true or false to show or hide the close button

Examples:
a. Sample code to show HTML content in the SharePoint 2010 modal dialog:

HTML code

// Modal Dialog HTML content <div id="divModalDialogContent"> Hello World! <input type="button" value="OK"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, 'Ok clicked'); return false;" class="ms-ButtonHeightWidth" /> <input type="button" value="Cancel"onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked'); return false;" class="ms-ButtonHeightWidth" /> </div>

JavaScript Code

<script type="text/javascript"> // Call openDialog method on button click or on page load function openDialog() { var options = { html: divModalDialogContent,  // ID of the HTML tag // or HTML content to be displayed in modal dialog width: 600, height: 300, title: "My First Modal Dialog", dialogReturnValueCallback: dialogCallbackMethod,  // custom callback function allowMaximize: true, showClose: true }; SP.UI.ModalDialog.showModalDialog(options); } //Results displayed if 'OK' or 'Cancel' button is clicked if the html content has 'OK' and 'Cancel' buttons function onDialogClose(dialogResult, returnValue) { if (dialogResult == SP.UI.DialogResult.OK) { alert('Ok!'); } if (dialogResult == SP.UI.DialogResult.cancel) { alert('Cancel'); } } // Custom callback function after the dialog is closed function dialogCallbackMethod() { alert('Callback method of modal dialog!'); } </script>

b. Sample code to open a web page or application page in the modal dialog:

JavaScript code

<script type="text/javascript"> function openDialog() { var options = { url: "<Page Url>", width: 600, height: 300, title: "My First Modal Dialog", }; SP.UI.ModalDialog.showModalDialog(options); } </script>

Mentioned below are real time scenarios, you may encounter while using out of box modal dialog of SharePoint 2010 :-
1. Scenario: If page is too long and with the movement of vertical scrollbar, modal popup also move with the scrollbar. Ideally position of modal dialog should be fix.

Solution: Put mentioned below CSS class in you page:

.ms-dlgContent

{

position: fixed!important;

}

2. Scenario: Display modal popup on page load depending. Sometimes the page don't show modal dialog and a JavaScript error message comes (error: showModalDialog does not exist in SP.UI.ModalDialog).

Solution:  Use following code- ExecuteOrDelayUntilScriptLoaded(<showModelMethodName>, "sp.js");  
              This method be make sure that js method showModalDialog is not called till sp.js is fully loaded.

3. Scenario: Sometime we need to close popup from server side and also parent window refresh is required after saving modal dialog data in the SharePoint.

Solution: Mentioned below is the sample code to implement above requirement-

a.  Check current page is popup page or not

//Custom list or library form New, Edit or Display if(SPContext.Current.IsPopUI) { // Code } OR //Layout pages you can ensure byquery string if(Request.QueryString["IsDlg"]=="1") { //code }

b. To close popup use mentioned below JavaScript code:

<script type="text/javascript"> //Close popup on cancel button click function CloseForm() { window.frameElement.cancelPopUp(); return false; } //Commit/Refresh parent window on save button click function SaveForm() { window.frameElement.commitPopup(); return false; } </script>

c. use following server side code to close or save modal dialog:

//Put following code in the button click event, if update panel is not present in the page ClientScript.RegisterClientScriptBlock(this.GetType(), Guid.NewGuid().ToString(),"CloseForm()", true); OR // Put following code in the button click event, if update panel is present in the page ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), Guid.NewGuid().ToString(),"CloseForm()", true);

4. Scenario: After closing modal dialog, all controls disappear from the page.

Solution: If you assign HTML element id like we have done in our first example, you might encounter this issue, we should set copy of modal data instead of assigning ID. See sample code below:

<script type="text/javascript"> //Pass copy of HTML content instead of content control ID function openDialog() { var cloneModalContent = document.createElement('div'); cloneModalContent.innerHTML = document.getElementById('divModalDialogContent').innerHTML; var options = { html: cloneModalContent, //html content to be displayed in modal dialog width: 600, height: 300, title: "My First Modal Dialog", dialogReturnValueCallback: customOnDialogClose, //custom callback function allowMaximize: true, showClose: true }; SP.UI.ModalDialog.showModalDialog(options); } </script>

Updated following real time scenario solution on 17 November, 2011:

 

a. To resolve position issue of modal dialog, we need to add "ms.ModelContent" css class. But correct CSS class name is "ms-dlgContent". Thank you "Athula Nidheesh" to rectify my mistake.

b. Sample code to save or close popup from server side.

c. After closing modal dialog, all controls disappear from the page.