Monday, April 11, 2011

Open SharePoint 2010 modal dialog and refresh the parent page from custom form

Objective:
1) Open a SharePoint 2010 popup and refresh the parent page when one closes it.
2) Build a custom form that at “submit event” closes the popup and refreshes the parent page.
Solution:
-          Open a Popup using “Javascript” and “SP.UI.$create_DialogOptions();”
-          Add the method “CloseCallback” using the “dialogReturnValueCallback” property
-          Add some JavaScript code inside the CloseCallback to reload the parent page, like the following example:

<a href="javascript:openModalDialog('form.aspx');">Open My Custom Form</a>

<SharePoint:ScriptLink ID="ScriptLink1" Name="sp.js" runat="server" OnDemand="true" Localizable="false" />

<script type="text/ecmascript">

    var options;
    function openModalDialog() {
        options = SP.UI.$create_DialogOptions();
        options.width = 300;
        options.height = 100;
        options.url = SP.Utilities.Utility.getLayoutsPageUrl('customdialog.htm' );
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
        SP.UI.ModalDialog.showModalDialog(options);

    }

    function CloseCallback(result, target) {
        location.reload(true);
    }

</script>

Now when you close the popup, the parent page is refreshed.
If one is working with a Custom Form and wants to close the popup and refresh the parent after the Submit,
he could have two (or more) choices:
1) If you have 1 post back only, after the submit, the you can add in the page load the following:
protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                string script = "<script language='javascript'>parent.CloseCallback();</script>";
                if (!this.Page.ClientScript.IsClientScriptBlockRegistered("rKey"))
                    this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "rKey", script);
            }
        }

          2) If your custom form handles more than 1 post back, you can add the following code at one specific submit click event:
Context.Response.Write("<script type='text/javascript'>window.frameElement.commitPopup();</script>");
Context.Response.Flush();
Context.Response.End();

5 comments:

  1. Thanks for the code above man. It worked out great. Cheers, Srini

    ReplyDelete
  2. webparts previously implemented separately from asp.net. now its based on it. and client object model on JScript. thanks for this sharing this completely custom code on js .
    http://sharepointconsulting.webs.com

    ReplyDelete
  3. Thank you to. It works fine for me.

    ReplyDelete
  4. Instead of reloading the whole page, you can call :

    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

    This will refresh the webpart content using ajax and avoid the small flicker of the screen

    ReplyDelete
  5. Hi,

    I need some help, please.
    I create an application page in VS2010 for SharePoint 2010 to do the following tasks:

    • Query a web service for an XML
    • Convert the XML to HTML using XslCompiledTransform (C#).
    • Save the resulting HTML page on the local SharePoint Web Server. So, they can be accessed via Internet Explorer as a regular webpage.

    What I need now?

    I need to show/display the HTML using a modal windows right after the convention.

    How can I do that using the procedures described in this page? I’m not a programmer. Please. Help.

    I need to invoke a modal window with the HTML right after the conversion process.

    This is my msn: permunos84@hotmail.com

    Thanks in advanced.

    ReplyDelete