Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by
  • When: 16 May 2013 10:22 AM
  • Last revision by (cMVP, Microsoft Community Contributo)
  • When: 18 Sep 2013 5:15 PM
  • Revisions: 3
  • Comments: 2
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  SharePoint 2010 Modal Dialog

SharePoint 2010 Modal Dialog

SharePoint 2010 Modal Dialog


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 theapplication 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>

Thanks.
, , , , [Edit tags]
Leave a Comment
  • Please add 8 and 6 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Sort by: Published Date | Most Recent | Most Useful
Comments
  • 18 Sep 2013 5:15 PM

    Richard Mueller edited Revision 1. Comment: Changed tag "Microsoft SharePoint 2010" to "SharePoint 2010", changed tag "SharePoint  2010 modalDialog" to "modalDialog"

Page 1 of 1 (1 items)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 16 May 2013 10:19 PM

    Revision: edited tags

  • Posted by
    on 18 Sep 2013 5:15 PM

    Richard Mueller edited Revision 1. Comment: Changed tag "Microsoft SharePoint 2010" to "SharePoint 2010", changed tag "SharePoint  2010 modalDialog" to "modalDialog"

Page 1 of 1 (2 items)